/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


var onHomepage = false;

function theRotator() {
        
	//Set the opacity of all images to 0
        if (onHomepage) {
            $('div.hero-container ul li').css({opacity: 0.0});

            //Get the first image and display it (gets set to full opacity)
            $('div.hero-container ul li:first').css({opacity: 1.0});
            $('div.hero-container ul li:first').addClass('active');
        }
        $('#nav-best-price').css('background-image', 'url(/images/bestprices_on.png)');
        $('#nav-best-price').addClass('active');
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

	setTimeout('rotate()',3000);

    }

    function rotate() {
        $('.nav-rotator').css('background-image', 'none');

        //Get the first image
        if (onHomepage) {
            var currentHpImage = ($('div.hero-container ul li.active') ?  $('div.hero-container ul li.active') : $('div.hero-container ul li:first'));

            if ( currentHpImage.length == 0 ) currentHpImage = $('div.hero-container ul li:first');

            //Get next image, when it reaches the end, rotate it back to the first image
            var nextHpImage = ((currentHpImage.next().length) ? ((currentHpImage.next().hasClass('active')) ? $('div.hero-container ul li:first') : currentHpImage.next()) : $('div.hero-container ul li:first'));

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

            //Hide the current image
            currentHpImage.animate({opacity: 0.0}, 500)
            .removeClass('active');
        }

        var currentNavImage = ($('.nav-rotator.active') ?  $('.nav-rotator.active') : $('.nav-rotator:first'));

        

        if ( currentNavImage.length == 0 ) currentNavImage = $('.nav-rotator:first');

        

        //Get next image, when it reaches the end, rotate it back to the first image
        var nextNavImage = ((currentNavImage.next().length) ? ((currentNavImage.next().hasClass('active')) ? $('.nav-rotator:first') : currentNavImage.next()) : $('.nav-rotator:first'));
        
        

        
        if (nextNavImage.attr('id') == 'nav-best-price') {
            $('#nav-best-price').css('background-image', 'url(/images/bestprices_on.png)');
            $('#nav-eight-day').css('background-image', 'url(/images/7day_off.png)');

        }
        if (nextNavImage.attr('id') == 'nav-eight-day') {
            $('#nav-eight-day').css('background-image', 'url(/images/7day_on.png)');
            $('#nav-best-price').css('background-image', 'url(/images/bestprices_off.png)');
        }

        
        nextNavImage.addClass('active');
        currentNavImage.removeClass('active');

        

        if (nextNavImage.attr('id') == 'nav-best-price') {
            setTimeout('rotate()',3000);
        }
        if (nextNavImage.attr('id') == 'nav-eight-day') {
            setTimeout('rotate()',3000);
        }



    };



    $(document).ready(function() {
            //Load the slideshow
            
            theRotator();
    });