//Requirements:
//This script and Jquery need to be registered in the head block
//As well as the carousel javascript file.
//A Web part registering LoadImages() needs to be on the page.
var mycarousel_itemList;

function LoadRibbon() {
    LoadImages();
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        scroll: 4,
        visible: 4,
        buttonPrevHTML: '<div>click on a project<img src="/Style%20Library/UnitedProperties.Images/triangle.gif" /></div>',
        buttonPrevEvent: 'none',
        buttonNextHTML: '<div>more projects<img src="/Style%20Library/UnitedProperties.Images/triangle.gif" /></div>',
        itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallback },
        itemVisibleOutCallback: { onAfterAnimation: mycarousel_itemVisibleOutCallback }
    });

    InitializeFilmStrip();


}

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
    // The index() method calculates the index from a
    // given index who is out of the actual item range.

    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));



    //On hover, change the big image
    $('.ImgThumbnail').mouseenter(function() {

        var thumbDesc = $(this).attr("descriptionurl").split("::");
        
        $('#up-imageviewer').attr({ "src": thumbDesc[2].replace("&apos;", "'"), "title": thumbDesc[2].replace("&apos;", "'") });
        $('#up-imagelabel').text(thumbDesc[0]);
    });
        
    
    $('#mycarousel').parent().mouseleave(function(){
    
    	 $('#up-imageviewer').attr({ "src": $('#defaultImage').val(), "title": $('#defaultImage').val() });
		 $('#up-imagelabel').text($('#defaultImageText').val());

    });

    // setting click event for each thumbnail
    $('.ImgThumbnail').click(function() {
        var thumbDesc = $(this).attr("descriptionurl").split("::");
        //$('#up-imageviewer').attr({ "src": thumbDesc[2], "title": thumbDesc[2] });
        $('#up-imagelabel').text(thumbDesc[0]);
        $('#up-imagelocation').attr({ "href": thumbDesc[1].replace("&apos;", "'") });

        //Change what the default image and text are.
        $('#defaultImage').val(thumbDesc[2].replace("&apos;", "'"));
       $('#defaultImageText').val(thumbDesc[0]);
    });

};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    //carousel.remove(i);
};

/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {


    return '<img src="' + item.url + '" class="ImgThumbnail" descriptionurl="' + item.title.replace("&apos;", "'") + '" alt="' + item.title.replace("&apos;", "'").split("::")[0] + '" />';
};


function InitializeFilmStrip() {



    //Set the default images shown and in hidden fields.
    if (mycarousel_itemList.length > 0) {
        var numRand = Math.floor(Math.random() * mycarousel_itemList.length - 1)
        var thumbDesc = mycarousel_itemList[numRand].title.split("::");
        //$('#up-imagelabel').html(thumbDesc[0]);
        //$('#up-imageviewer').attr({ "src": thumbDesc[2], "title": thumbDesc[2] });
        //$('#up-imagelocation').attr({ "href": thumbDesc[1] });
        //$('#defaultImage').val(thumbDesc[2]);
        //Set to Default Image.
            $('#defaultImage').val(thumbDesc[2].replace("&apos;", "'"));
            $('#up-imagelocation').attr({ "href": thumbDesc[1].replace("&apos;", "'") });
            $('#up-imageviewer').attr({ "src": thumbDesc[2]});

    }

}