var $aa = AjaxControlToolkit.Animation;
var selectTimeout;
var selectedQuestion;
var animationLock = false;

function onItemHover(num) {
    selectTimeout = setTimeout("switchPanes(" + num + ");", 300);
    return false;
}

function onItemOut() {
    clearTimeout(selectTimeout);
    return false;
}

function learnMore(num) {
	switchPanes(num);
}

//This function prevents an event from bubbling up through the DOM
function stopEvent(e) {
    if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}

/*Switch the large content area to a new pane. Animate the transition
  depending on the numerical relationship between the old pane and the
  new pane*/
function switchPanes(newNum) {
    clearTimeout(selectTimeout);
    if (selectedQuestion != newNum) {
        $get("q" + newNum + "active").style.visibility="visible";
        $get("q" + newNum).style.visibility="hidden";
        if ($get("q" + selectedQuestion)) {
            $get("q" + selectedQuestion).style.visibility="visible";
            $get("q" + selectedQuestion + "active").style.visibility="hidden";
        }

        if (newNum > selectedQuestion) {
            slideLeft($get("p" + selectedQuestion), $get("p" + newNum), 674);
        } else {
            slideRight($get("p" + selectedQuestion), $get("p" + newNum), 674);
        }
        selectedQuestion = newNum;
    }
}


function slideLeft(oldDiv, newDiv, width) {
        //Initialize our new content panel to be animated
        newDiv.style.left = width + "px";
        newDiv.style.width = "0px";
        newDiv.style.display = "block";

        //This is the sliding animation. It moves the old div out of view, slides the new div in, and hides the old div.   
        var slideInAnimation = new $aa.SequenceAnimation(newDiv, 0, 0, null, 1);
            var slideAnimation = new $aa.ParallelAnimation(newDiv, 0.2, 60, null);
                slideAnimation.add(new $aa.MoveAnimation(newDiv, 0.2, 60, 0, 0, false, "px"));
                slideAnimation.add(new $aa.ResizeAnimation(newDiv, 0.2, 60, width, null, "px"));
                slideAnimation.add(new $aa.MoveAnimation(oldDiv, 0.2, 60, -width, 0, false, "px")); 
            slideInAnimation.add(slideAnimation);
            slideInAnimation.add(new $aa.ScriptAction(oldDiv, 0, 0, "oldDiv.style.display='none';newDiv.style.left='0';newDiv.style.width='" + width + "'"));
            
        //Play the Animation just created
        slideInAnimation.play();
}

function slideRight(oldDiv, newDiv, width) {
       //Initialize our new content panel to be animated
        newDiv.style.left = "-" + width + "px";
        newDiv.style.width = width + "px";
        newDiv.style.display = "block";

        //This is the sliding animation. It moves the old div out of view, slides the new div in, and hides the old div.   
        var slideInAnimation = new $aa.SequenceAnimation(newDiv, 0, 0, null, 1);
            var slideAnimation = new $aa.ParallelAnimation(newDiv, 0.2, 60, null);
                slideAnimation.add(new $aa.MoveAnimation(newDiv, 0.3, 60, 0, 0, false, "px"));
                slideAnimation.add(new $aa.ResizeAnimation(oldDiv, 0.3, 60, 0, null, "px"));
                slideAnimation.add(new $aa.MoveAnimation(oldDiv, 0.3, 60, width, 0, false, "px")); 
            slideInAnimation.add(slideAnimation);
            //Reset the div so we don't have any lingering problems if the animation is interrupted
            slideInAnimation.add(new $aa.ScriptAction(oldDiv, 0, 0, "oldDiv.style.display='none';newDiv.style.left='0';newDiv.style.width='" + width + "'"));
            
        //Play the Animation just created
        slideInAnimation.play();
}

function betterGetBounds(element) {
    var oldVisibility = element.style.visibility;
    var oldDisplay = element.style.display;
    var oldPosition = element.style.position;
    element.style.visibility = "hidden";
    element.style.position = "absolute";
    element.style.display = "block";
    var newDimensions = Sys.UI.DomElement.getBounds(element);
    if ($get('caption')) {
        var caption = $get('caption');
        var oldCaptionVisibility = caption.style.visibility;
        var oldCaptionDisplay = caption.style.display;
        var oldCaptionPosition = caption.style.position;
        caption.style.visibility = "hidden";
        caption.style.position = "absolute";
        caption.style.display = "block";
        var captionDimensions = Sys.UI.DomElement.getBounds(caption);
        newDimensions.captionHeight = captionDimensions.height;
        newDimensions.captionWidth = captionDimensions.width;
        caption.style.display = oldCaptionDisplay;
        caption.style.position = oldCaptionPosition;
        caption.style.visibility = oldCaptionVisibility; 
    }
    element.style.display = oldDisplay;
    element.style.position = oldPosition;
    element.style.visibility = oldVisibility;
    
    return newDimensions;
}

/* Animate the growth of the container div in the AJAX overlay. The div
   first expands horizontally, then vertically. Finally, the new contents is
   loaded in and the overlay controls (close, next, etc.) appear. 
   var element          the overlay container 
   var loadingElement   the element containing the loading graphic
   var innerElement     the element containing the contents fetched by AJAX */
function animateGrow(element, loadingElement, innerElement, fade, isFlash, playerNum, toWidth, toHeight) {
    element = $get(element);
    innerElement = $get(innerElement);
    loadingElement = $get(loadingElement);
    var closeButton = $get('closeButton');
    var nextButton = $get('nextButton');
    var previousButton = $get('previousButton');
    var dimensions = Sys.UI.DomElement.getBounds(element);
    var fromHeight = dimensions.height;
    var fromWidth = dimensions.width;
    
    //Compute the dimensions of the div we are loading
    var newDimensions = betterGetBounds(innerElement);
    if (!isFlash) {
        var toHeight = newDimensions.height;
        var toWidth = newDimensions.width;
    }
    //Calculate how far we need to move and grow the overlay contents element
    var heightDifference = (toHeight - fromHeight) / 2;
    var widthDifference = (toWidth - fromWidth) / 2;
    
    //This is the sliding animation. It moves the old div out of view, slides the new div in, and hides the old div.   
    loadingElement.style.display="none";
    var growAnimation = new $aa.SequenceAnimation(element, 0, 0, null, 1);
        var heightGrow = new $aa.ParallelAnimation(element, 0.2, 60, null);
        growAnimation.add(new $aa.ResizeAnimation(element, 0.3, 60, null, toHeight, "px"));
        var wideGrow = new $aa.ParallelAnimation(element, 0.2, 60, null);
            wideGrow.add(new $aa.MoveAnimation(element, 0.3, 60, - widthDifference, 0, true, "px"));
            wideGrow.add(new $aa.ResizeAnimation(element, 0.3, 60, toWidth, null, "px"));
        growAnimation.add(wideGrow);  
        growAnimation.add(new $aa.StyleAction(innerElement, 0.01, 30, "display", "block"));
        growAnimation.add(new $aa.StyleAction(closeButton, 0.01, 30, "display", "block"));
        if (isFlash) {
            //var captionDimensions = betterGetBounds($get('caption'));
            growAnimation.add(new $aa.StyleAction(nextButton, 0.01, 30, "display", "block"));
            growAnimation.add(new $aa.StyleAction(previousButton, 0.01, 30, "display", "block")); 
            growAnimation.add(new $aa.ResizeAnimation(element, 0.3, 60, null, toHeight + newDimensions.captionHeight, "px"));
            growAnimation.add(new $aa.StyleAction($get('caption'), 0.01, 30, "display", "block"));
            growAnimation.add(new $aa.FadeInAnimation($get('caption'), 0.2, 30, 0.0, 1.0, true));
        }
        
    //Play the Animation just created
    growAnimation.play();
    
}

/* Perform the AJAX call that loads contents into the overlay
   div. Once the div is loaded, animate the growth of the container */
function loadContents(flash, index) {
    var overlayInner = $get('overlayInner');
    overlayInner.innerHTML = "";
    var nextIndex = (index + 1) % 9;
    var prevIndex = (index - 1) < 0 ? 8 : (index - 1);   
    $get('nextButton').onclick = function() {switchFlash(nextIndex);return false;}; 
    $get('previousButton').onclick = function() {switchFlash(prevIndex);return false;}; 
    center('overlayContents');
    animationLock = false;
    //Initialize the AJAX request
    var request = new Sys.Net.WebRequest();
    request.set_httpVerb("GET");
    var append = this.isInOuterDirectory ? "" : "../";
    request.set_url(append + (flash ? "aspx/PlayerSample.aspx" : "aspx/ComparePlans.aspx"));
    request.add_completed(function(executor)
    {
        if (executor.get_responseAvailable()) {
            overlayInner.innerHTML = executor.get_responseData();
            var toWidth;
            var toHeight;
            if (flash) {
                loadFlash(index);
                //Hack for firefox not interacting nicely with SWFObject
                var info = $get('info' + index);
                toWidth = parseInt(info.getAttribute('swfwidth')) + 15;
                toHeight = parseInt(info.getAttribute('swfheight')) + 15;
            }
            // End hack
            animateGrow('overlayContents', 'overlayInnerLoading', 'overlayInner', true, flash, parseInt(index) + 1, toWidth, toHeight);
        }
    });
    
    var executor = new Sys.Net.XMLHttpExecutor();
    request.set_executor(executor);
    executor.executeRequest();
}

function switchFlash(index) {
    var innerElement = $get('overlayInner');
    
    innerElement.style.display = "none";
    innerElement.innerHTML = "";
    $get('overlayInnerLoading').style.display="block";
    loadContents(true, index);
}

/* This method is called when the AJAX overlay should appear. It
   animates the background of the overlay, then makes the AJAX call
   to load the overlay's content. */
function showBox(e){
    animationLock = true;    
    initializeBox(e);
    var overlayDiv = $get('overlay');
    
    //Animate the overlay fading, then do the AJAX call
    var overlayAnimation = new $aa.SequenceAnimation(overlayDiv, 0, 0, null, 1);
    overlayAnimation.add(new $aa.FadeInAnimation(overlayDiv, 0.2, 30, 0.0, 0.8, false));
    overlayAnimation.add(new $aa.ScriptAction(overlayDiv, 0.001, 30, "loadContents(false, -1);"));
    overlayAnimation.play();
    return false;
}

function showFlash(e, index) {
    animationLock = true;
    initializeBox(e);
    var overlayDiv = $get('overlay');
    
    //Animate the overlay fading, then do the AJAX call
    var overlayAnimation = new $aa.SequenceAnimation(overlayDiv, 0, 0, null, 1);
    overlayAnimation.add(new $aa.FadeInAnimation(overlayDiv, 0.2, 30, 0.0, 0.8, false));
    overlayAnimation.add(new $aa.ScriptAction(overlayDiv, 0.001, 30, "loadContents(true, '" + index + "');"));
    overlayAnimation.play();
    return false;
}

function initializeBox(e) {
    stopEvent(e);
    var overlayDiv = $get('overlay');
    var innerElement = $get('overlayInner');
    var overlayContents = $get('overlayContents');
    
    //Initialize our elements to be animated
    innerElement.style.display="none";
    $get('overlayInnerLoading').style.display="block";
    $get('closeButton').style.display="none";
    $get('previousButton').style.display="none";
    $get('nextButton').style.display="none";
    overlayContents.style.width = "400px";
    overlayContents.style.height = "90px";
    overlayDiv.style.display = "block";
}

/*Hide the overlay, return to normal state */
function hideBox(){
    if (!animationLock) {  
        var overlayDiv = $get('overlay');
        var overlayContents = $get('overlayContents');
        var innerElement = $get('overlayInner');
        $get('closeButton').style.display="none";
        overlayContents.style.display = "none";
        var overlayAnimation = new $aa.SequenceAnimation(overlayDiv, 0, 0, null, 1);
            var fadeOutAnimation = new $aa.FadeOutAnimation(overlayDiv, 0.2, 30, 0.0, 0.8, false);
        overlayAnimation.add(fadeOutAnimation);
        overlayAnimation.add(new $aa.StyleAction(overlayDiv, 0.001, 30, "display", "none"));
        overlayAnimation.play();
    }
    return false;
}

function loadFlash(index) {
    var info = $get('info' + index);
    var width = info.getAttribute('swfwidth');
    var height = info.getAttribute('swfheight');
    var swf = info.getAttribute('swf');
    var flashvars = info.getAttribute('file');
    var description = info.getAttribute('description');
    var name = info.getAttribute('swfname');
    
    $get('playerNumber').innerHTML = parseInt(index) + 1;
    $get('playerDescription').innerHTML = name + " - " + description;
  
    var params = {
        flashvars: flashvars,
        allowScriptAccess: "always",
        menu: "false",
        allowfullscreen: "true",
        wmode: "transparent"
    };   
    
    swfobject.embedSWF(swf, "sampleFlash", width, height, "9.0.28", "", {}, params);
}

/* Functions to expand or shrink the flash overlay on the home page */

function initializeTabs() {
    $get("q1").onclick = function() {switchPanes(1);};
    $get("q2").onclick = function() {switchPanes(2);};
    $get("q3").onclick = function() {switchPanes(3);};
    $get("q1").onmouseover = function() {onItemHover(1);};
    $get("q2").onmouseover = function() {onItemHover(2);};
    $get("q3").onmouseover = function() {onItemHover(3);};
}

function shrinkFlash() {
    $get("testFlash").style.width = "70px";
    $get("testFlash").style.height = "32px";
    $get("flashIntroWrapper").style.width = "70px";
    $get("flashIntroWrapper").style.height = "32px";
    initializeTabs();
}
function expandFlash() {
    $get("testFlash").style.width = "678px";
    $get("testFlash").style.height = "333px";
    $get("flashIntroWrapper").style.width = "678px";
    $get("flashIntroWrapper").style.height = "333px";
}

/* Center our AJAX overlay in the middle of the viewport */
function center(element){
    try{
        element = $get(element);
    }catch(e){
        return;
    }

    var my_width  = 0;
    var my_height = 0;

    if ( typeof( window.innerWidth ) == 'number' ){
        my_width  = window.innerWidth;
        my_height = window.innerHeight;
    }else if ( document.documentElement &&
             ( document.documentElement.clientWidth ||
               document.documentElement.clientHeight ) ){
        my_width  = document.documentElement.clientWidth;
        my_height = document.documentElement.clientHeight;
    }
    else if ( document.body &&
            ( document.body.clientWidth || document.body.clientHeight ) ){
        my_width  = document.body.clientWidth;
        my_height = document.body.clientHeight;
    }

    element.style.position = 'absolute';
    element.style.zIndex   = 250;

    element.style.visibility = "hidden";
    element.style.display = "block";
    var elementDimensions = Sys.UI.DomElement.getBounds(element);
    element.style.display = "none";
    element.style.visibility = "visible";
    var setX = ( my_width  - elementDimensions.width  ) / 2;

    setX = ( setX < 0 ) ? 0 : setX;

    element.style.left = setX + "px";
    element.style.top = "7%";
    
    element.style.display = "block";
}

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();