$(document).ready(function() {

    //assign li hover class for IE6
    $("li").hover(
          function() {
              $(this).addClass('hover');
          },
          function() {
              $(this).removeClass('hover');
          }
        );
});



var imageIndex = 0;
var imageFolder = 'img/banner/';
var rotationTime = 1000;
var rotationInterval = 5000;

var Images = new Array(6);


    Images[0] = ["banners-shipping.jpg", "banners-shipping-left.jpg", "banners-shipping-right.jpg", "/content/services/servov01.html",
                                "<h2>Need Shipping Services?</h2><p>Vic Shipping specialises in all types of shipping requirements - local and international.</p>"]; //shipping

    Images[1] = ["banners-shipping.jpg", "banners-shipping-left.jpg", "banners-shipping-right.jpg", "/content/services/servov01.html",
                                "<h2>Need Shipping Services?</h2><p>Vic Shipping specialises in all types of shipping requirements - local and international.</p>"]; //shipping

    Images[2] = ["banners-ideas.jpg", "banners-ideas-left.jpg", "banners-ideas-right.jpg", "/content/storage/storov01.html",
                                "<h2>Got a storage idea?</h2><p>Vic Shiiping can put together a cudstom solution to your storage requirement.</p>"]; //storage ideas

    Images[3] = ["banners-containers.jpg", "banners-containers-left.jpg", "banners-containers-right.jpg", "/content/storage/storcs01.html",
                                "<h2>Need a container</h2><p>Vic Shipping has all sorts of containers - standard and custom designs.</p>"]; //containers

    Images[4] = ["banners-solutions.jpg", "banners-solutions-left.jpg", "banners-solutions-right.jpg", "/content/corp/corpbn01.html",
                                "<h2>Complete solutions</h2><p>Vic Shipping supplies complete transportation solutions - taking care of the whole process.</p>"]; //solutions

    Images[5] = ["banners-logistics.jpg", "banners-logistics-left.jpg", "banners-logistics-left.jpg", "/content/services/servlg01.html",
                                "<h2>Need Logistics Help?</h2><p>Vic Shipping delivers an integrated solution.</p>"]; //logistics

    Images[6] = ["banners-foods.jpg", "banners-foods-left.jpg", "banners-foods-right.jpg", "/content/products/prodov01.html",
                            "<h2>Require specific foods sourcing?</h2><p>Talk to us about your specific requirements.</p>"]; //foods


    var rotateBanner = function() {

        var nextImage = getNextImageId();
        
        //set background images for first rotation
        $("#banner-wrapper-back").css("background-image", "url(" + imageFolder + Images[nextImage][0] + ")");
        $("#banner-left-back").css("background-image", "url(" + imageFolder + Images[nextImage][1] + ")");
        $("#banner-right-back").css("background-image", "url(" + imageFolder + Images[nextImage][2] + ")");

        //set onclick
        $('#banner-wrapper').unbind('click');

        $("#banner-wrapper").bind('click', function() {
            document.location = getCurrentUrl();
        });

        //run again in 6 seconds
        setTimeout("rotateImages()", rotationInterval);

    }
    var rotateImages = function() {


    
        //increment image index
    imageIndex = getNextImageId();

    var nextImageIndex = getNextImageId();
       
       // $("#banner-wrapper-back").css("display", "inline")

        //set text
        // setText(Images[imageIndex][5]);

        //swap images
        $("#banner-wrapper").stop().animate({
            opacity: 0
        },
        rotationTime,
        function() {

            //set front div to what is currently in background and set front div back to visible
            $("#banner-wrapper")
                    .css("background-image", "url(" + imageFolder + Images[imageIndex][0] + ")")
                    .css("opacity", 1);
                      
            //run again
            setTimeout("rotateImages()", rotationInterval);

            //set background image in 1 second after opacity finishes (prevent ficker issue)
            setTimeout("setBackground(" + nextImageIndex + ")", 1000);
        });

        $("#banner-left").stop().animate({
            opacity: 0
        },
        rotationTime,
        function() {

            //set front div to what is currently in background and set front div back to visible
            $("#banner-left")
                    .css("background-image", "url(" + imageFolder + Images[imageIndex][1] + ")")
                    .css("opacity", 1);

            $("#banner-left-back").css("background-image", "url(" + imageFolder + Images[nextImageIndex][1] + ")");

        });

        //set front div to what is currently in background and set front div back to visible
        $("#banner-right").stop().animate({
            opacity: 0
        },
        rotationTime,
        function() {

            $("#banner-right")
                       .css("background-image", "url(" + imageFolder + Images[imageIndex][2] + ")")
                        .css("opacity", 1);


            $("#banner-right-back").css("background-image", "url(" + imageFolder + Images[nextImageIndex][2] + ")");
        });

      
}

var setBackground = function(index) {
    $("#banner-wrapper-back").css("background-image", "url(" + imageFolder + Images[index][0] + ")");


}

var getCurrentUrl = function() {
    return Images[imageIndex][3];
}

var getNextImageId = function() {

    var nextImage = imageIndex;

    //get next image
    nextImage++;

    if (nextImage >= Images.length) {
        //reset array
        nextImage = 0;
    }

    return nextImage;
}