//***************************************
//  FADING SLIDESHOW WITH QUICK PICKER
//***************************************
//DESCRIPTION:  Fading Slideshow with quick picker using ASP.NET AJAX SlideshowExtender, AnimationExtender, Webservice, Javascript & CSS
//METHOD: Cross Fade between slides by varying opacity of "mask" frame - as opacity tends to zero, the background frame is revealed.
//        By advancing the frames when they are not visible (background frame advances when mask is at full opacity, mask frame advances when it has opacity of zero)
//        Because the proper events are hooked into for when animations are complete the timing of animations/slide changes is exact (rock solid).
//        NavigateURL has been concatenated to the Description field with a pipe symbol delimiter
//        Webservice provides slides collection using the same Dataset tableadaptor methods as the repeater used for the quicklist
//        My slide images happen to be 600 x 278
//
//COMPATIBILITY:    XHTML Strict - IE7, IE6, Mozilla 5, Firefox 2.0.0.11 to 3.0.5 on ASP 2.0, AJAX 1.0, IIS7.0
//
//NOTES:  $get is an alias for getElementById - find DOM element
//        $find Sys.Application.findComponent - find client component
//AUTHOR:   Dominic Alexander Turner
//DATE:     14/12/2007
//UPDATED:  10/01/2009 - Changed to XHTML Strict - external .js
var SlideShowExtender1;
var SlideShowExtender2;
var SlideShowExtender1_Init = false;
var SlideShowExtender2_Init = false;
var FadeOutBehaviour;
var FadeInBehaviour;
var TickInterval = 3000; //This is the pause between animations
var CurrentURL1 = '';
var CurrentURL2 = '';
var MaskOn = true;
var FadeInOutTimerId;

//Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(SlideshowStart);
//Sys.Application.add_load(InitializeSlideshow);

function pageLoad() {
    InitializeSlideshow();
}

function InitializeSlideshow(sender, args) {
    //Get reference to the SlideShowExtender component
    SlideShowExtender1 = $find("ss1");
    SlideShowExtender2 = $find("ss2");
    //Get reference to the Fade out animation behaviour
    FadeOutBehaviour = $find("SlideFadeOut").get_OnClickBehavior().get_animation();
    //Get reference to the Fade In animation behaviour
    FadeInBehaviour = $find("SlideFadeIn").get_OnClickBehavior().get_animation();
    //Start Slideshow when first slide is loaded
    SlideShowExtender1.add_slideChanged(SlideShowExtender1_Initialised);
    SlideShowExtender2.add_slideChanged(SlideShowExtender2_Initialised);
}

function SlideShowExtender1_Initialised() {
    SlideShowExtender1_Init = true;
    SlideShowExtender1.remove_slideChanged(SlideShowExtender1_Initialised);
    //Set Quick Pick
    SetActiveQuickLink2();
    //Add handler to click event on Slideshow container div
    $addHandler($get(SlideShowContainerClientID), "click", SlideClick);
    //Only Start if Both Slideshow are initialised
    ValidateInitialised();
}
function SlideShowExtender2_Initialised() {
    SlideShowExtender2_Init = true;
    SlideShowExtender2.remove_slideChanged(SlideShowExtender2_Initialised);
    //Set Quick Pick
    SetActiveQuickLink2();
    //Add handler to click event on Slideshow container div
    $addHandler($get(SlideShowContainerClientID), "click", SlideClick);
    //Only Start if Both Slideshow are initialised
    ValidateInitialised();
}

function ValidateInitialised() {
    if (SlideShowExtender1_Init == true && SlideShowExtender2_Init == true) {
        FadeInOutTimerId = setTimeout(SlideshowStart, TickInterval);
    }
}

function SlideshowStart() {

    //Add handler to the animation behaviour ended event
    FadeOutBehaviour.add_ended(FadeOutEnd);
    //Add handler to the animation behaviour ended event
    FadeInBehaviour.add_ended(FadeInEnd);
    //Offset Frame 1 (background) to start - initially mask will be slide 1 fading to reveal background slide 2)
    SlideShowExtender1._clickNext();
    //FIX FOR XHTML INTERFACE IE7 BUG (Navigation Pane disappears) - Defined in Interface.js
    //ForceContentRedraw(); //All Interface elements
    //RedrawElement("left"); //Just Navigation Panel
    //Play first Fade Out behaviour and continue slideshow
    FadeOut();
}

function SlideshowStop() {
    clearTimeout(FadeInOutTimerId);
}

function FadeOut() {
    //Deactivate highlighted quickpick
    DeactivateQuickPick();
    //Play the fade out animation behaviour
    FadeOutBehaviour.play();
}

function FadeOutEnd() {
    //Advance mask image 2 slides
    SlideShowExtender2._clickNext();
    SlideShowExtender2._clickNext();
    //SlideShowExtender2._clickNext();
    //SlideShowExtender2._clickPrevious();
    //Reset Scroll Position (interface.js)
    //ResetScrollPosition()
    //Set relevant link URL for mask frame
    SetActiveQuickLink1();
    //Background is now active
    MaskOn = false;
    
    //Start FadeIn after interval
    FadeInOutTimerId = setTimeout(FadeIn, TickInterval);
}

function FadeIn() {

    //Deactivate highlighted quickpick
    DeactivateQuickPick();
    //Play fade in animation behaviour
    FadeInBehaviour.play();
}

function FadeInEnd() {
    //Advance background image 2 slides
    SlideShowExtender1._clickNext();
    SlideShowExtender1._clickNext();
    //Reset Scroll Position (interface.js)
    //ResetScrollPosition()
    //Set relevant link URL for background frame
    SetActiveQuickLink2();
    //Mask is now active
    MaskOn = true;
    
    //Start FadeOut after interval
    FadeInOutTimerId = setTimeout(FadeOut, TickInterval);
}

function SlideClick() {
    SlideshowStop();
    //Determine CurrentURL of visible frame (browser's vary whether opacity zero counts as passing mouse clicks through - this is bulletproof)
    var CurrentURL = '';
    if (MaskOn) {
        DeriveURL2();
        CurrentURL = CurrentURL2;
    }
    else {
        DeriveURL1();
        CurrentURL = CurrentURL1;
    }
    //Navigate to relevant url (changed from window.navigate as not supported in Firefox)
    window.location.href = CurrentURL;
}

function DeriveURL1() {
    //Derive Frame 1 URL (Background Frame)
    var imageDescription1 = $get(imageDescription1ClientID);
    var DescHref1 = imageDescription1.innerHTML.toString();
    var dataArray1 = DescHref1.split("|");
    CurrentURL1 = dataArray1[1];
}

function DeriveURL2() {
    //Derive Frame 2 URL (Mask Frame)
    var imageDescription2 = $get(imageDescription2ClientID);
    var DescHref2 = imageDescription2.innerHTML.toString();
    var dataArray2 = DescHref2.split("|");
    CurrentURL2 = dataArray2[1];
}

function GetTicks() {
    //Debug function - returns number of milliseconds since the start of time itself.
    var now = new Date();
    var ticks = now.getTime();
    return ticks;
}

function SetActiveQuickLink1() {
    //Set currentSlide class on relevant quick pick line (and remove from all others)
    //Get URL of current slide
    DeriveURL1()
    //Get reference to QuickPickContainer
    var menu = $get("QuickPickContainer");
    //Get array of all links in QuickPickContainer
    links = menu.getElementsByTagName("a");
    //Iterate through all child link elements
    for (i = 0; i < links.length; i++) {
        //Check if link URL contains the relative URL of the visible slide
        var currentHref = links[i].getAttribute("href");
        if (currentHref.indexOf(CurrentURL1) > -1) {
            //Set highlighting class of the current quick pick - N.B. setting class is needed for Mozilla compatibility - className appears to be correct according to the DOM spec
            links[i].setAttribute("class", "currentSlide");
            links[i].setAttribute("className", "currentSlide");
        }
        else {
            //Remove the class attribute from the current quick pick
            links[i].removeAttribute("class", "currentSlide");
            links[i].removeAttribute("className", "currentSlide");
        }
    }
}

function SetActiveQuickLink2() {
    //Set currentSlide class on relevant quick pick line (and remove from all others)
    //Get URL of current slide
    DeriveURL2()
    //Get reference to QuickPickContainer
    var menu = $get("QuickPickContainer");
    //Get array of all links in QuickPickContainer
    links = menu.getElementsByTagName("a");
    //Iterate through all child link elements
    for (i = 0; i < links.length; i++) {
        //Check if link URL contains the relative URL of the visible slide
        var currentHref = links[i].getAttribute("href");
        if (currentHref.indexOf(CurrentURL2) > -1) {
            //Set highlighting class of the current quick pick - N.B. setting class is needed for Mozilla compatibility - className appears to be correct according to the DOM spec
            links[i].setAttribute("class", "currentSlide");
            links[i].setAttribute("className", "currentSlide");
        }
        else {
            //Remove the class attribute from the current quick pick
            links[i].removeAttribute("class", "currentSlide");
            links[i].removeAttribute("className", "currentSlide");
        }
    }
}

function DeactivateQuickPick() {
    //Remove all quickpick highlights
    //Get reference to QuickPickContainer
    var menu = $get("QuickPickContainer");
    //Get array of all links in QuickPickContainer
    links = menu.getElementsByTagName("a");
    //Iterate through all child link elements
    for (i = 0; i < links.length; i++) {
        //Remove the class attribute from the current quick pick
        links[i].removeAttribute("class", "currentSlide");
        links[i].removeAttribute("className", "currentSlide");
    }
}