$(function () {
    var controlId = "";
    var imagesSliderItems = null;

    buildImagesSlider = function (id, imagesSliderItemsAttr) {
        controlId = id;
        imagesSliderItems = imagesSliderItemsAttr;

        buildImagesSliderHtmlElements();
    }

    function buildImagesSliderHtmlElements() {
        var imagesSlider = $("#" + controlId);
        var imagesSliderItemHtml = [];
        var imagesSliderItemDetailsHtml = ['<div id="imagesSliderDetails" class="imagesSliderDetails">',
                                            //'<h2 id="imageSliderDetailsTitle" class="imageSliderDetailsTitle">' + imagesSliderItems[0].SliderTitle + '</h2>',
                                            '<h2 id="imageSliderDetailsTitle" class="imageSliderDetailsTitle"></h2>',
                                            '<div id="imageSliderDetailsDescp" class="imageSliderDetailsDescp">' + imagesSliderItems[0].SliderContent + '</div>',                                            
                                        '</div>'];

        var i = 0;
        var length = imagesSliderItems.length;
        for (i = 0; i < length; i++) {
            imagesSliderItemHtml = ['<img src="', imagesSliderItems[i].ImageUrl, '" id="' + i + '"/>']

            imagesSlider.append(imagesSliderItemHtml.join(''));
        }
        imagesSlider.append(imagesSliderItemDetailsHtml.join(''));

        $("#" + controlId).nivoSlider({
            effect: "slideInRight",
            slices: 1,
            animSpeed: 500,
            pauseTime: 10000,
            startSlide: 0,
            captionOpacity: 0,
            directionNav: false,
            directionNavHide: true,
            controlNav: true,
            controlNavThumbs: false,
            controlNavThumbsFromRel: true,
            keyboardNav: true,
            pauseOnHover: true,
            manualAdvance: false,
            beforeChange: function () { hideSlideDetails(); },
            afterChange: function () { changeSlideDetails(this); }
        });
    }

    function hideSlideDetails() {
        $("#imagesSliderDetails").animate({
            opacity: 0.0,
            height: '0'
        }, 800);
    }

    function changeSlideDetails(currentImage) {
        var selectedID = $(currentImage).children(".nivo-slice").attr("id").replace("imagesSlider", "");
        //$("#" + controlId + " .imageSliderDetailsTitle").text(imagesSliderItems[selectedID].SliderTitle);
        $("#" + controlId + " .imageSliderDetailsDescp").html(imagesSliderItems[selectedID].SliderContent);

        $("#imagesSliderDetails").animate({
            opacity: 1.0,
            height: '100%'
        }, 400);
    }

});