// Creating global variable for the loader movie 
// so every function can interact with it later
var loader_flash = null;
var flash_file = "images/content-slider/loader5445.swf?id=" + Math.round(Math.random()*9999);
var loader_html = '<object type="application/x-shockwave-flash" width="27px" height="27px" id="loader_swf" align="middle" data="' + flash_file + '">'+
                    	'<param name="allowScriptAccess" value="always" />'+
                    	'<param name="allowFullScreen" value="false" />'+
                        '<param name="movie" value="' + flash_file + '" />'+
                        '<param name="wmode" value="transparent"/>'+
                        '<param name="quality" value="high" />'+
                    '</object>';

// jQuery code that runs once the DOM is ready
$(document).ready(function() {

    // Inserting the flash loader into the main page
    $("#flash_loader").html(loader_html);
    
    // Making the non visible slides disappear with javascript
    // because this way the through CSS the images preload since
    // the elements are visible in the first place  
    $("#slide_02, #slide_03, #slide_04").css("display", "none");
                
    // Loading content if an inactive button is pressed
    $("a#content_1, a#content_2, a#content_3, a#content_4").live("click", function(event) {
        // Preventing link from acting as normal HTML link 
        // and loading another page (reloading the same one)
        event.preventDefault();
        
        $this = $(this);
        // Retrieving the links status from it's class attribute
        var status = $this.attr("class");
        // Retrieving the page to be loaded from the links id attribute 
        var page = $this.attr("id");
        
        // Loading the new page if the link is passive
        // and if there is no ongoing animation for changing slides
        if (status == "passive" && $("*:animated").length == 0) {
            // Stopping the loader before a new slide is loaded
            loader_flash.pauseLoader();
            // Checking if browser is IE to choose a different page loading 
            // method because of IE's problems with fading transparent PNGs
            if (navigator.appName.indexOf("Microsoft") != -1) {
                // If IE, load page without the fading content slider
                loadPageIe(page);
            } else {
                // If not IE, load page with the fading content slider
                loadPage(page);
            }
        }
    });
    
    // Setting up functionality to pause and resume the countdown
    // Defining the area where the mouse stops countdown 
    var $content_hit = $("#content_holder");
    // Pausing the loader if the mouse is over the content area
    $content_hit.live("mouseover", function() {
        if ($("div#content_holder:animated").length == 0) { 
            pause();            
        }
    });    
    // Resuming the countdown if the mouse leaves the content area
    $content_hit.live("mouseout", function() {
        if ($("div#content_holder:animated").length == 0) { 
            resume();
        }
    });
    
});

// Sending pause command to the flash movie
function pause() {
    if (loader_flash !== null) {
        loader_flash.pauseLoader();
    }
}

// Sending resume command to the flash movie
function resume() {
    if (loader_flash !== null) {
        loader_flash.playLoader();
    }
}

// Capturing the loader flash movie when the flash movie is loaded
// and calls this function via ExternalInterface
function flashLoaded() {
    loader_flash = thisMovie("loader_swf");
    if ($("div:animated").attr("id") == undefined) { 
        loader_flash.restartLoader();
    }
}

// Function for capturing the embedded flash object in all browsers
function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document[movieName];
    }
}

// Function for loading new slides in every browser but IE
// The passed "page" variable is the clicked link's id (content_1, content_2...)
function loadPage(page) {
    // Extracting the number from the end of the variable
    // to get the numner for the new slide
    var pos = page.substr(page.length-1, 1);
    
    // Starting animation with fading out the content sliders
    $("#content_sliders").animate({"opacity" : "0"}, "slow", function() {
        
        // Contunuing animation with fading out the entire content area
        $("div#content_holder").animate({"opacity" : "0"}, "slow", function() {
            // When everything faded out, starting to change 
            // state of the links, and visibility for the slide's div elements
            
            // First, gathering all four links into a group
            $links = $("#content_sliders").children();
            // Iterating through all four links and making them passive
            $.each($links, function() {
                $(this).attr("class", "passive");
            });
            // Changing the clicked link's status to active
            $("#"+page).attr("class", "active").removeAttr("rel");
            
            // Gathering all four slide divs into a group
            $slides = $("div[id^=slide_]");
            // Iterating through all four slide divs and making them passive
            $.each($slides, function() {
                $(this).css("display", "none");
            });
            // Finally, making the choosen slide visible
            switch (page) {
                case "content_1":
                $("div#slide_01").css("display", "block");
                break;
                
                case "content_2":
                $("div#slide_02").css("display", "block");
                break;
                
                case "content_3":
                $("div#slide_03").css("display", "block");
                break;
                
                case "content_4":
                $("div#slide_04").css("display", "block");
                break;
            }
        // Starting to fade in the new slide      
        }).animate({"opacity" : "1"}, "slow", function() {
            // When the new slide finished fading in, 
            // starting animation for the content sliders
            $("#content_sliders").animate({"opacity" : "1"}, "slow", function() {
                // Restarting loader from first fram after the content is changed
                loader_flash.restartLoader(); 
            });
        });
    });
}

// Function for loading new slides in IE
// The passed "page" variable is the clicked link's id (content_1, content_2...)
function loadPageIe(page) {
    // Extracting the number from the end of the variable
    // to get the numner for the new slide
    var pos = page.substr(page.length-1, 1);
    
    // Checking for IE 6 to hide the sliders before the fade effect starts
    var ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);;
    if (ie_ver < 7) {
        $("#content_sliders").css({"display" : "none"});
    }
    
    // Starting animation with fading out the entire content area
    $("div#content_holder").animate({"opacity" : "0"}, "slow", function() {
        // When everything faded out, starting to change 
        // state of the links, and visibility for the slide's div elements
        
        // First, gathering all four links into a group
        $links = $("#content_sliders").children();
        // Iterating through all four links and making them passive
        $.each($links, function() {
            $(this).attr("class", "passive");
        });
        // Changing the clicked link's status to active
        $("#"+page).attr("class", "active").removeAttr("rel");
        
        // Gathering all four slide divs into a group
        $slides = $("div[id^=slide_]");
        // Iterating through all four slide divs and making them passive
        $.each($slides, function() {
            $(this).css("display", "none");
        });
        // Finally, making the choosen slide visible
        switch (page) {
            case "content_1":
            $("div#slide_01").css("display", "block");
            break;
            
            case "content_2":
            $("div#slide_02").css("display", "block");
            break;
            
            case "content_3":
            $("div#slide_03").css("display", "block");
            break;
            
            case "content_4":
            $("div#slide_04").css("display", "block");
            break;
        }
        // Restarting loader from first fram after the content is changed
        loader_flash.restartLoader();
    // Starting to fade in the new slide      
    }).animate({"opacity" : "1"}, "slow", function() {
        if (ie_ver < 7) {
            $("#content_sliders").css({"display" : "block"});
            $(this).css({"filter" : "none"});
        }
    });
}

// Function for loading next page when the flash movie reaches the end
function loadNext() {
    // Retrieving the id of the active link 
    var active = $("a[class='active']").attr("id");
    // Extracting the number from the end of the variable
    // to get the numner for the new slide
    var pos = active.substr(active.length-1, 1);
    
    // Loading the next slide based on the active one
    switch(pos) {
        // Loading the 2nd slide if the 1st one is active
        case "1":
            // Choosing which method to use for page load
            if (navigator.appName.indexOf("Microsoft") != -1) {
                loadPageIe("content_2");
            } else {
                loadPage("content_2");
            }
        break;
        // Loading the 3rd slide if the 2nd one is active
        case "2":
            // Choosing which method to use for page load
            if (navigator.appName.indexOf("Microsoft") != -1) {
                loadPageIe("content_3");
            } else {
                loadPage("content_3");
            }
        break;
        // Loading the 4th slide if the 3rd one is active
        case "3":
            // Choosing which method to use for page load
            if (navigator.appName.indexOf("Microsoft") != -1) {
                loadPageIe("content_4");
            } else {
                loadPage("content_4");
            }
        break;
        // Loading the 1st slide if the 4th one is active
        case "4":
            // Choosing which method to use for page load
            if (navigator.appName.indexOf("Microsoft") != -1) {
                loadPageIe("content_1");
            } else {
                loadPage("content_1");
            }
        break;
    }    
}