﻿
function StartRotator() {


    //  Add images top gallery
    for (var i = 0; i < oJsonEquipmentList.bindings.length; i++) {

        $('#gallery').append(
                "<a id='ImageIndex" + i.toString() + "' href='" + oJsonEquipmentList.bindings[i].EquipmentLink + "' >"
                + "  <img src='" + oJsonEquipmentList.bindings[i].Image + "' alt='' width='269' height='212' rel='" + i.toString() + "' > "
                + "</a>"
                );

        $("#ImageIndex" + i.toString()).css(
                {
                    "float": "left",
                    "position": "absolute"
                });

        if (i == 0) {
            $('#gallery a:first').addClass("show");
            $("#caption .productName").append(oJsonEquipmentList.bindings[i].ProductName.toString().substring(0, 40));
            $("#caption .machineDescription").append(oJsonEquipmentList.bindings[i].MachineDescription.toString().substring(0, 80));
            $("#caption .serialNumberAndPrice").html(oJsonEquipmentList.bindings[i].SerialnumberAndPrice.toString());
            $("#clickHereLink").attr("href", oJsonEquipmentList.bindings[i].EquipmentLink);

        }
    }

    //Execute the slideShow
    slideShow();

};

function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({ opacity: 0.0 });

    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({ opacity: 1.0 });

    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    timerId = setInterval('gallery()', waitMilliseconds);

}

function gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = (current.next().length) ? current.next() : $('#gallery a:first');


    //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 current image
    current.animate({ opacity: 0.0 }, 1000)
	    .removeClass('show');

    //Get next image index row from Json Collection
    var nextIndexImage = next.find("img").attr('rel');

    //$("#caption .productName").css({ opacity: .25 });
    $("#caption .productName").html(oJsonEquipmentList.bindings[nextIndexImage].ProductName.toString().substring(0, 40));
    //$("#caption .productName").animate({ opacity: 1.0 }, { queue: false, duration: 1000 });
    $("#caption .machineDescription").html(oJsonEquipmentList.bindings[nextIndexImage].MachineDescription.toString().substring(0, 80));
    $("#caption .serialNumberAndPrice").html(oJsonEquipmentList.bindings[nextIndexImage].SerialnumberAndPrice.toString());
    $("#clickHereLink").attr("href", oJsonEquipmentList.bindings[nextIndexImage].EquipmentLink);
    var wholeControlArea = $("#caption,#gallery");

    wholeControlArea.mouseenter(
        function (event) {
            clearInterval(timerId);
            timerId = 0;
        });

    wholeControlArea.mouseleave(
        function (event) {
            if (timerId == 0)
                timerId = setInterval('gallery()', waitMilliseconds);
        });


}
