/**
 * @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;
    }