var gMyIndex = 1;  //image 1 is loaded by default 
var gDelay = 15000;
$(document).ready(function() {

    if (myImages.length == 5) {

        setDefaultImage()

        startEveryTime()

        updateFrameControl(gMyIndex);

        setFrameImageLink(gMyIndex)

        $("#frameControl li").hover(function() {
            $(this).css('cursor', 'hand');
        }, function() {
            $(this).css('cursor', 'pointer');
        });

        $('#frameControl li').bind('click', function(event) {

            $("#imgFrame").stopTime();
            setTimeout(startEveryTime, 10);

            updateFrameImage(parseInt(this.id));
            updateFrameControl(parseInt(this.id));
        });
    } else {
        $('#imgFrame').css('background-image', 'url(fileupload/default.jpg)');
        $('#frameControl').hide();
    }


    function startEveryTime() {
        $("#imgFrame").everyTime(gDelay, "myInterval", function(i) {
            gMyIndex++;
            updateFrameImage(gMyIndex);
        });
    }

    function updateFrameControl(thisID) {
        var liIndex = parseInt(thisID);
        liIndex--; //jquery indecies are 0 based
        setState()
        var myImage = $('#frameControl li:eq(' + liIndex + ') img')
        var filePart = myImage.attr("src").split("_")
        var img = filePart[0];
        var ext = filePart[1].split(".")[1];
        myImage.attr("src", img + "_on." + ext);
    }

    function setState() {
        $('#frameControl li img').each(function() {
            var filePart = $(this).attr("src").split("_")
            var img = filePart[0];
            var ext = filePart[1].split(".")[1];
            $(this).attr("src", img + "_off." + ext);
        })
    }

    function updateFrameImage(thisID) {
        gMyIndex = thisID;
        if (gMyIndex > 5) {
            gMyIndex = 1;
        }
        var image = new Image();
        image.src = myImages[gMyIndex - 1][0] + "";
        var $this = $('#imgFrame')
        $this.css('cursor', 'progress');
        $this.animate({ opacity: 0.0 }, 1000, function() {
            $this.css('cursor', 'pointer');
            $this.css('background-image', 'url(' + image.src + ')')
            $this.animate({ opacity: 1 }, 500)
            updateFrameControl(gMyIndex)
            setFrameImageLink(gMyIndex)
        });
    }
    function setFrameImageLink(thisID) {
        linkIndex = parseInt(thisID);
        linkIndex--;
        var $this = $('#imgFrame');
        $this.bind('click', function(event) {
            document.location = "" + myImages[linkIndex][1] + "";
        });
    }

    function setDefaultImage() {
        var image = new Image();
        //image.src = "fileUpload/default.jpg";
        $('#imgFrame').css('cursor', 'pointer');
        image.src = myImages[0][0] + "";
        $('#imgFrame').css('background-image', 'url(' + image.src + ')')

    }

});