/*
 *  iTunes like slider wrote by patrick lehmann (lehmann@bl-informatik.ch), 22.08.2011
 *
 *
 *
 */

$.fn.iTunesSlider = function(option){
    // default configuration properties
    var defaults = {        
        sliderID:   "slider",
        leftID:     "left",
        rightID:    "right",
        leftWidth: '700px',
        rightWidth: '250px',
        sliderHeight: '360px',
        timeInterval: 1000,
        changeTime: 5000,
        isSliderActive: true,
		
        IMAGE_Icon_Play: '/includes/styles/images/icons/button_play.png',
        IMAGE_Icon_Pause: '/includes/styles/images/icons/button_pause.png'
    }; 
		
    var options = $.extend(defaults, option);                     
    var leftContainer, rightContainer;
    var thumbHeight = Math.floor((options.sliderHeight.substring(0, options.sliderHeight.length - 2)) / 2) + "px";
	
    var sliderController = $('#iTunes_Slider_Controller');
    /*
     * Generiert die Grundstruktur f�r den Slider
     */
    function createBaseStructure(obj){
        obj.append(
            '<div id="' + options.leftID + '" style="width: ' + options.leftWidth + '; height:' + options.sliderHeight +'"><ul style="width: ' + options.leftWidth + '; height:' + options.sliderHeight +'"></ul></div>'
            ).append(
            '<div id="' + options.rightID + '" style="width: ' + options.rightWidth + '; height:' + options.sliderHeight +'"><ul style="width: ' + options.rightWidth + '; height:' + options.sliderHeight +'"></ul></div>'
            );
        leftContainer = $('#' + options.leftID);
        rightContainer = $('#' + options.rightID);
    }
    
    /*
     * Generiert die Listenelemente f�r den Slider
     */
    function createListElement(url, small, large, title){
        
        leftContainer.find('ul').append(
            '<li><a href="'+url+'" title="'+title+'"><img src="'+large+'" width="'+options.leftWidth+'" height="'+options.sliderHeight+'" /></a></li>'
            );
        
        rightContainer.find('ul').append(
            '<li><a href="'+url+'" title="'+title+'" style="height: '+thumbHeight+';"><img src="'+small+'" width="'+options.rightWidth+'" height="'+thumbHeight+'" /></a></li>'
            );
    }
    
    /*
     * Markiert die Listenelemente mit den entsprechenden ID's
     */
    function markListElements(){
        leftContainer.find('li').each(function(index){
            $(this).attr('id', 'images_'+index).css({
                'z-index': 100-10*index
            });
        });
        rightContainer.find('li').each(function(index){
            $(this).attr('id', 'thumbs_'+index);
        });
    }
    
    /*
     * Nimmt die Initiale Sortierung Vor
     */
    function initSort(){
        sliderController.addClass('pause');
        // Left Container sortieren
        leftContainer.find('li').addClass('sorting');
        leftContainer.find('li:nth-child(1)').clone().appendTo(leftContainer.find('ul')).removeClass('sorting');
        leftContainer.find('li:nth-child(3)').clone().appendTo(leftContainer.find('ul')).removeClass('sorting');
        leftContainer.find('li:nth-child(2)').clone().appendTo(leftContainer.find('ul')).removeClass('sorting');
        leftContainer.find('li.sorting').remove();
        
        // Right Container sortieren
        rightContainer.find('li').first().clone().appendTo(rightContainer.find('ul'));
        rightContainer.find('li').first().remove();
    }
    
    /*
     * Animation Left
     */
    function animationImages(){
        leftContainer.find('li').first().clone().appendTo(leftContainer.find('ul'));
        leftContainer.find('li').first().fadeOut(options.timeInterval, function() {
            $(this).remove();
        });
        markListElements();
    }
    
    /*
     * Animation Thumb
     */
    function animationThumb(){
        rightContainer.find('ul li').last().clone().prependTo(rightContainer.find('ul')).css({
            'marginTop': '-'+thumbHeight
        });
        rightContainer.find('ul li').first().animate({
            marginTop: '0px'
        }, options.timeInterval, function() {
            // Animation complete.
            });
        rightContainer.find('ul li').last().remove();
        markListElements();
    }
    
    
    
    
    
    this.each(function() {
        // Slider aktivieren
		
        sliderController.click(function(){
            if (options.isSliderActive){
                sliderController.removeClass('pause');
                sliderController.addClass('play');
                clearInterval(intervalImages);
                clearInterval(intervalThumb);
                options.isSliderActive = false;
            }
            else {
                sliderController.removeClass('play');
                sliderController.addClass('pause');
                intervalImages = null;
                intervalThumb = null;
                animationImages();
                animationThumb();
                intervalImages = setInterval(animationImages, options.changeTime);
                intervalThumb = setInterval(animationThumb, options.changeTime);
                options.isSliderActive = true;
            }
        });
		
		
		
        // Grundstruktur (div Container) erstellen
        createBaseStructure($(this));
        
        // Bilder inkl. Links einbauen
        if ($(this).find('ul.config li').length == 3){
            $(this).find('ul.config li').each(function(){
                var smallImage = $(this).find('img.small').attr('src');
                var largeImage = $(this).find('img.large').attr('src');
                var target = $(this).find('a').attr('href');
                var title = $(this).find('a').attr('title');

                createListElement(target, smallImage, largeImage, title);
            });
        
            initSort();
            markListElements();
        
            if (options.isSliderActive) {
                var intervalImages = setInterval(animationImages, options.changeTime);
                var intervalThumb = setInterval(animationThumb, options.changeTime);
            }
        } else{
            var markup = "<li>\n\t<a href=\"LINK\" title=\"TITLE\">\n\t\t<img src=\"SOURCE SMALL IMAGE\" class=\"small\" />\n\t\t<img src=\"SOURCE LARGE IMAGE\" class=\"large\" />\n\t</a>\n</li>";
            alert(" ERROR:\n\n\nPlease enter in <ul class=\"config\"> four items with the right markup\n\n\n"+markup+"\n\nFor Questions: coding@bl-informatik.ch");
        }
    });
	  
};