/**
 * @author dhardy
 * To utilize this script you must call showBubble(index);
 * index = which bubble node in the XML should be utilized.
 */
var nodeIndex = 0;
var xmlHttp;
var currentControl;
var currentPosition;

window.onresize = positionBubble;

/// <summary>Shows bubble at selected node index</summary>
function showBubble(index)
{
    nodeIndex = index;
    getBubbleData();
}

function getBubbleData()
{
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) 
    {
        alert("Your browser does not support AJAX!");
        return;
    }
    xmlHttp.onreadystatechange = stateChanged;
    // pagecastUrl is written out from code behind since it can be different for different pages
    xmlHttp.open("GET", pagecastUrl, true);
    xmlHttp.send(null);
}

function stateChanged()
{
    if (xmlHttp.readyState == 4) 
    {
        var xmlDoc = xmlHttp.responseXML.documentElement;
        var vars = xmlDoc.getElementsByTagName("control")[nodeIndex].childNodes[0].nodeValue.split(",");
        generateBubble(vars[0], vars[1]);
        populateBubble(xmlDoc);      
    }
}

function positionBubble()
{
    var bubble = document.getElementById('bubble');
    if (bubble)
    {
        var selectedControl = document.getElementById(currentControl);
        // move to location
        scrollToObject(currentControl);
        var left = 0;
        var top = 0;
        var height = 0;
        var width = 0;
        if (selectedControl.offsetParent) 
        {
            left = selectedControl.offsetLeft;
            top = selectedControl.offsetTop;

            width = selectedControl.offsetWidth;
            height = selectedControl.offsetHeight;
	        
            while (selectedControl = selectedControl.offsetParent)
            {
		        left += selectedControl.offsetLeft;
		        top += selectedControl.offsetTop;
            }
        }
        else
        {
            return;
        }
        
        switch (currentPosition)
        {
            case "LfTp":
	            bubble.style.left = left + width + "px";
	            bubble.style.top = top - 10 + "px";		
	            bubble.className = "sm_top_left";
                break;
            case "RtTp":
	            bubble.style.left = left - 320 + "px";
	            bubble.style.top = top - 10 + "px";
	            bubble.className = "sm_top_right"
                break;
            case "RfBt":
	            bubble.style.left = left + width + "px";
	            bubble.style.top = top - 117 + height + "px";
	            bubble.className = "sm_bottom_left"
                break;
            case "RtBt":
	            bubble.style.left = left - 320 + "px";
	            bubble.style.top = top - 117 + height + "px";
	            bubble.className = "sm_bottom_right"
                break;
        }
    }
}

/// <summary>Creates the actual bubble div</summary>
function generateBubble(control, position)
{
    currentControl = control;
    currentPosition = position;
    var selectedControl = document.getElementById(control);
    // create the bubble
    var bubble = document.createElement('div');	
    bubble.style.position = "absolute";
    // give it an id and name
    bubble.setAttribute('id', 'bubble');
    // create the close handle
    var bubble_close = document.createElement('a');
	    bubble_close.setAttribute('id', 'bubble_close');
	    bubble_close.setAttribute('name', 'bubble');
	    bubble_close.setAttribute('href', 'javascript: closeBubble();');
	    bubble_close.innerHTML = " Close ";
    // create the content area
    var bubble_content = document.createElement('p');
	    bubble_content.setAttribute('id', 'bubble_content');
    // create navigation
    var bubble_nav = document.createElement('a');
	    bubble_nav.setAttribute('id', 'bubble_nav');
    // create an inner block
    var bubble_inner = document.createElement('div');
	    bubble_inner.setAttribute('id', 'bubble_inner')
    //remove any current bubbles
    closeBubble();
    // make the bubble and insert it onto the page (ORDER MATTERS)
    bubble_inner.appendChild(bubble_close);	
    bubble_inner.appendChild(bubble_content);
    bubble_inner.appendChild(bubble_nav);
	
    bubble.appendChild(bubble_inner)
	
    // insert the new bubble	
    var contentBody = document.getElementById('ContentBody');
    contentBody.appendChild(bubble);
    // position the bubble
    positionBubble();
    //fade it all in
    fade('bubble', 500, 1);
}

/// <summary>
/// Populates data within generated bubble div
/// </summary>
function populateBubble(xmlDoc)
{
    //Place the content into the bubble
    document.getElementById("bubble_content").innerHTML = xmlDoc.getElementsByTagName("content")[nodeIndex].childNodes[0].nodeValue;
    // check to see if this is the last bubble
    if(xmlDoc.getElementsByTagName("close")[nodeIndex].childNodes[0].nodeValue == "true")
    {
        document.getElementById("bubble_nav").setAttribute("href", "javascript:closeBubble();");
	    document.getElementById("bubble_nav").innerHTML = "Done";
    }
    else
    {
	    var link = "javascript: showBubble(" + (nodeIndex + 1) + ")";
        document.getElementById("bubble_nav").setAttribute("href", link);
        document.getElementById("bubble_nav").innerHTML = "Next";
    }
}

/// <summary>
/// This function closes the bubble
/// </summary>
function closeBubble()
{
    present = document.getElementById('bubble');
    if (present) { present.parentNode.removeChild(present); }
}


function GetXmlHttpObject()
{
    var xmlHttp = null;
    try 
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } 
    catch (e) 
    {
        // Internet Explorer
        try 
        {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) 
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

/*
 * FADE FUNCTION SHOULD BE REPLACED WITH GD CODE
 */
function $(v){
    return (document.getElementById(v));
}

function $S(v){
    return ($(v).style);
}

function uni(v, id, s){
    var ob = $S(id), b = v / 100;
    ob.opacity = b;
    //ob.top = top + 'px';
    ob.MozOpacity = b;
    ob.KhtmlOpacity = b;
    ob.filter = "alpha(opacity=" + v + ")";
}

function zero(v){
    v = parseInt(v);
    return (!isNaN(v) ? v : 0);
}

function fade(id, ln, s){
    var top = zero(parseInt($S(id).top));
    function opacity(oStart, oEnd, ln){
        var speed = Math.round(ln / 100), timer = 0;
        
        if (oStart > oEnd) {
            for (i = oStart; i >= oEnd; i--) {
                setTimeout("uni(" + i + ",'" + id + "','','" + (top--) + "')", timer * speed);
                timer++;
            }
            setTimeout("$S('" + id + "').display='none';", timer * speed);
        }
        else 
            if (oStart < oEnd) {
                $S(id).display = 'inline';
                for (i = oStart; i <= oEnd; i++) {
                    setTimeout("uni(" + i + ",'" + id + "','" + 1 + "','" + (top++) + "')", timer * speed);
                    timer++;
                }
            }
        
    }
    
    if (s == 1 || (!s && $S(id).opacity == 0)) 
        opacity(0, 100, ln);
    else 
        opacity(100, 0, ln);
}

/*
 * Code from http://www.brandspankingnew.net/specials/anchorjump/anchorjump_01.html
 */
var scrollInt;
var scrTime, scrSt, scrDist, scrDur, scrInt;
/* SCROLL FUNCTIONS */
function scrollPage(){
    scrTime += scrInt;
    if (scrTime < scrDur) {
        window.scrollTo(0, easeInOut(scrTime, scrSt, scrDist, scrDur));
    }
    else {
        window.scrollTo(0, scrSt + scrDist);
        clearInterval(scrollInt);
    }
}

// Scrolls To Object
function scrollToObject(obj)
{
    if (!document.getElementById) { return; }

    // set scroll target
    if (window.scrollY) 
    {
        scrSt = window.scrollY;
    }
    else 
    {
        if (document.documentElement.scrollTop) 
        {
            scrSt = document.documentElement.scrollTop;
        }
        else 
        {
            scrSt = document.body.scrollTop;
        }
    }
    
    var ele = document.getElementById(obj);
    
    scrDist = ele.offsetTop - scrSt-100;
    scrDur = 500;
    scrTime = 0;
    scrInt = 10;  
    // set interval
    clearInterval(scrollInt);
    scrollInt = setInterval(scrollPage, scrInt);
}

/* EASING FUNCTIONS */
function easeInOut(t, b, c, d){
    return c / 2 * (1 - Math.cos(Math.PI * t / d)) + b;
}
