var ImageDiv = "";
var extraContainer = "";
var liElements = "";
var currentLiElement = 0;
var marginleft = 0;
var totalWidth = 0;
var animateSpeed = 200;
var fadeOutSpeed = 200;
var showTextSpeed = 200;
var scrollClick = false;
var fadeClick = false;

function startCarrousel() {
    jQuery('.carrousel .articlelistblock').each(function () {
        var block = this;
        var currentImage = -1;

        ImageDiv = document.createElement('DIV');
        ImageDiv.className = 'carrouselimages';

        extraContainer = document.createElement('DIV');
        extraContainer.className = 'containerimages';

        jQuery(ImageDiv).append(jQuery(extraContainer));
        liElements = jQuery('li', block);
        totalWidth = liElements.length * 111;

        jQuery('li', block).each(function () {
            currentImage++;
            var liElement = this;
            var source = jQuery('.source', liElement);
            if (source.length > 0) {
                var getSource = source[0].innerHTML.toLowerCase().split('</label>')[1];
                jQuery('.articlelist_thumbnail a').each(function () {
                    var thumbAnchor = this;
                    thumbAnchor.href = "../" + getSource + "/default.aspx";
                });
            }

            jQuery(liElement).append(jQuery('<div class="behind">'));

            var images = jQuery('img', liElement);
            if (images.length > 0) {
                var ImageSrc = images[0].src;
                ImageSrc += '?maxwidth=106&maxheight=63&maintainratio=False'
                var newImage = document.createElement('IMG');
                newImage.src = ImageSrc;
                newImage.setAttribute('extra', currentImage);
                newImage.onclick = function () { clickImage(this); };
                jQuery(extraContainer).append(newImage);
            }
        });

        createSmallCarrousel(block);
        showText(0);
    });
}

function createSmallCarrousel(block) {
    var smallImageDiv = document.createElement('DIV');
    smallImageDiv.className = 'smallcarrousel';

    jQuery(smallImageDiv).append('<div class="move moveback disableback" onclick="moveBack()">');
    jQuery(smallImageDiv).append(jQuery(ImageDiv));
    jQuery(smallImageDiv).append('<div class="move moveforward" onclick="moveForward()">');
    jQuery(block).append(jQuery(smallImageDiv));
    
}

function moveForward() {
    if (scrollClick == false) {

        if (marginleft + 444 <= totalWidth) {
            marginleft += 444;
            jQuery(extraContainer).animate({ marginLeft: '-' + marginleft + 'px' }, 500);
            jQuery('.moveback').removeClass('disableback');        
            if (marginleft + 444 > totalWidth) {
                jQuery('.moveforward').addClass('disableforward');
            }
        } 
        
    }
}

function moveBack() {
    if (scrollClick == false) {
        if (marginleft - 444 >= 0) {
            marginleft -= 444;
            jQuery(extraContainer).animate({ marginLeft: '-' + marginleft + 'px' }, 500);
            jQuery('.moveforward').removeClass('disableforward');
            if (marginleft - 444 < 0) {
                jQuery('.moveback').addClass('disableback');
            }
        }
    }
}

function clickImage(liElement) {
    if (fadeClick == false) {

        var showLiElement = liElement.getAttribute('extra');
       
        if (parseInt(showLiElement) != currentLiElement) {
            fadeClick = true;
            
            var fadeOutLi = jQuery(liElements[currentLiElement]);
            var fadeInLi = jQuery(liElements[showLiElement]);

            fadeOutLi.css('z-index', '10');
            fadeInLi.css('z-index', '1');
            jQuery('.info, .behind', fadeOutLi).animate({ top: '319px' }, showTextSpeed, function() {
                fadeOutLi.fadeOut(fadeOutSpeed);
                fadeInLi.fadeIn(fadeOutSpeed, function() {
                    showText(showLiElement);
                    fadeOutLi.css('z-index', '1').css('display', 'none');
                    fadeInLi.css('z-index', '10');
                    currentLiElement = showLiElement;
                    fadeClick = false;
                });
            });
        }
    }
}

function showText(number) {
    jQuery('.info, .behind', liElements[number]).animate({ top: '230px' }, showTextSpeed);
}

jQuery(document).ready(function() {
    startCarrousel();
});