/** 
* Target Products Ltd - Javascript
* @version 1.0
* @author Michael Maw
* @requires jQuery v1.4.2 or later
* @requires jQuery UI v1.8 or later
* @copyright 2010 Quikrete
*/

$w = {

    // Page Init
    init: function ()
    {
        var url = window.location.href;
        var page = url.substr(url.lastIndexOf("/") + 1, url.length);
        if (page == "") { page = "index.aspx"; }

        // Event Handlers
        if (page == "index.aspx") { $w.slideshow("#img-slideshow", 5000); }

        // Link Handlers
        $("a[href^='http']").attr("target", "_blank");
        $("#secNav a[href='" + page + "']").addClass("current");
        $("#priNav a[href='" + page + "']").parent("li").addClass("current");

    },

    // Show a slideshow
    // @author http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
    slideshow: function (selector, speed)
    {
        $(selector).show();

        //append a LI item to the UL list for displaying caption  
        $(selector).append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3 id="slideshow-title"></h3><p id="slideshow-desc"></p></div></li>');

        //Set the opacity of all images to 0  
        $(selector + ' li').css({ opacity: 0.0 });

        //Get the first image and display it (set it to full opacity)  
        $(selector + ' li:first').css({ opacity: 1.0 });

        //Get the caption of the first image from REL attribute and display it  
        $('#slideshow-caption h3').html($(selector + ' a:first img').attr('title'));
        $('#slideshow-caption p').html($(selector + ' a:first img').attr('alt'));

        //Display the caption  
        $('#slideshow-caption').css({ opacity: 0.7, bottom: 0 });

        //Call the gallery function to run the slideshow      
        var timer = setInterval('$w.gallery()', speed);

        //pause the slideshow on mouse over  
        $(selector).hover(
            function ()
            {
                clearInterval(timer);
            },
            function ()
            {
                timer = setInterval('$w.gallery()', speed);
            }
        );
    },

    // Gallery function
    // @author http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
    gallery: function ()
    {
        // Objects
        var current = $('#img-slideshow li.show');
        var next = $('#img-slideshow li:first');

        // Get next image, if it reached the end of the slideshow, rotate it back to the first image  
        if (current.next().length > 0 && current.next().attr('id') != 'slideshow-caption')
        {
            next = current.next();
        }

        // Get next image caption
        var title = $('img', next).attr('title');
        var desc = $('img', next).attr('alt');

        // Set the fade in effect for the next image, show class has higher z-index  
        next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);

        // Hide the caption first, and then set and display the caption  
        $('#slideshow-caption').animate({ bottom: -60 }, 500, function ()
        {
            //Display the content  
            $('#slideshow-caption').animate({ bottom: 0 }, 500);
            $('#slideshow-title').text(title);
            $('#slideshow-desc').text(desc);
        });

        // Hide the current image  
        current.animate({ opacity: 0.0 }, 1000).removeClass('show');
    }
};

// On load
$(function() { $w.init(); });