/**
 * jqFancyTransitions - jQuery plugin
 * @version: 1.8 (2010/06/13)
 * @requires jQuery v1.2.2 or later 
 * @author Ivan Lazarevic
 * Examples and documentation at: http://www.workshop.rs/projects/jqfancytransitions
 
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
**/

(function($) {
    var opts = new Array;
    var level = new Array;
    var img = new Array;
    var links = new Array;
    var titles = new Array;
    var order = new Array;
    var imgInc = new Array;
    var inc = new Array;
    var stripInt = new Array;
    var imgInt = new Array; 
    
    $.fn.jqFancyTransitions = $.fn.jqfancytransitions = function(options){
    
    init = function(el){

        opts[el.id] = $.extend({}, $.fn.jqFancyTransitions.defaults, options);
        img[el.id] = new Array(); // images array
        links[el.id] = new Array(); // links array
        titles[el.id] = new Array(); // titles array
        order[el.id] = new Array(); // strips order array
        imgInc[el.id] = 0;
        inc[el.id] = 0;

        params = opts[el.id];

        if(params.effect == 'zipper'){ params.direction = 'alternate'; params.position = 'alternate'; }
        if(params.effect == 'wave'){ params.direction = 'alternate'; params.position = 'top'; }
        if(params.effect == 'curtain'){ params.direction = 'alternate'; params.position = 'curtain'; }  

        // width of strips
        stripWidth = parseInt(params.width / params.strips); 
        gap = params.width - stripWidth*params.strips; // number of pixels
        stripLeft = 0;

        // create images and titles arrays
        $.each($('#'+el.id+' img'), function(i,item){
            img[el.id][i] = $(item).attr('src');
            links[el.id][i] = $(item).next().attr('href');
            titles[el.id][i] = $(item).attr('alt') ? $(item).attr('alt') : '';
            $(item).hide();
        });

        // set panel
        $('#'+el.id).css({
            'background-image':'url('+img[el.id][0]+')',
            'width': params.width,
            'height': params.height,
            'position': 'relative',
            'background-position': 'top left'
            });

        // create title bar
        $('#'+el.id).append("<div class='ft-title' id='ft-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000; color: #fff; background-color: #000; '>"+titles[el.id][0]+"</div>");
        if(titles[el.id][imgInc[el.id]])
            $('#ft-title-'+el.id).css('opacity',opts[el.id].titleOpacity);
        else
            $('#ft-title-'+el.id).css('opacity',0);

        if(params.navigation){
            $.navigation(el);
            $('#ft-buttons-'+el.id).children().first().addClass('ft-button-'+el.id+'-active');          
        }

        odd = 1;
        // creating bars
        // and set their position
        for(j=1; j < params.strips+1; j++){
            
            if( gap > 0){
                tstripWidth = stripWidth + 1;
                gap--;
            } else {
                tstripWidth = stripWidth;
            }
            
            if(params.links)    
                $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; height:"+params.height+"px; float: left; position: absolute;outline:none;'></a>");
            else
                $('#'+el.id).append("<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; height:"+params.height+"px; float: left; position: absolute;'></div>");
                            
            // positioning bars
            $("#ft-"+el.id+j).css({ 
                'background-position': -stripLeft +'px top',
                'left' : stripLeft 
            });
            
            stripLeft += tstripWidth;

            if(params.position == 'bottom')
                $("#ft-"+el.id+j).css( 'bottom', 0 );
                
            if (j%2 == 0 && params.position == 'alternate')
                $("#ft-"+el.id+j).css( 'bottom', 0 );
    
            // bars order
                // fountain
                if(params.direction == 'fountain' || params.direction == 'fountainAlternate'){ 
                    order[el.id][j-1] = parseInt(params.strips/2) - (parseInt(j/2)*odd);
                    order[el.id][params.strips-1] = params.strips; // fix for odd number of bars
                    odd *= -1;
                } else {
                // linear
                    order[el.id][j-1] = j;
                }
    
        }

            $('.ft-'+el.id).mouseover(function(){
                opts[el.id].pause = true;
            });
        
            $('.ft-'+el.id).mouseout(function(){
                opts[el.id].pause = false;
            }); 
            
            $('#ft-title-'+el.id).mouseover(function(){
                opts[el.id].pause = true;
            });
        
            $('#ft-title-'+el.id).mouseout(function(){
                opts[el.id].pause = false;
            });             
        
        clearInterval(imgInt[el.id]);   
        imgInt[el.id] = setInterval(function() { $.transition(el)  }, params.delay+params.stripDelay*params.strips);

    };

    // transition
    $.transition = function(el,direction){

        if(opts[el.id].pause == true) return;

        stripInt[el.id] = setInterval(function() { $.strips(order[el.id][inc[el.id]], el)  },opts[el.id].stripDelay);
        
        $('#'+el.id).css({ 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' });
        
        if(typeof(direction) == "undefined")
            imgInc[el.id]++;
        else
            if(direction == 'prev')
                imgInc[el.id]--;
            else
                imgInc[el.id] = direction;

        if  (imgInc[el.id] == img[el.id].length) {
            imgInc[el.id] = 0;
        }
        
        if (imgInc[el.id] == -1){
            imgInc[el.id] = img[el.id].length-1;
        }
        
        if(titles[el.id][imgInc[el.id]]!=''){
            $('#ft-title-'+el.id).animate({ opacity: 0 }, opts[el.id].titleSpeed, function(){
                $(this).html(titles[el.id][imgInc[el.id]]).animate({ opacity: opts[el.id].titleOpacity }, opts[el.id].titleSpeed);
            });
        } else {
            $('#ft-title-'+el.id).animate({ opacity: 0}, opts[el.id].titleSpeed);
        }
        
        inc[el.id] = 0;
        
        buttons = $('#ft-buttons-'+el.id).children();
        
        buttons.each(function(index){
            if(index == imgInc[el.id]){
                $(this).addClass('ft-button-'+el.id+'-active');
            } else{
                $(this).removeClass('ft-button-'+el.id+'-active');
            }
        });     

        if(opts[el.id].direction == 'random')
            $.fisherYates (order[el.id]);
            
        if((opts[el.id].direction == 'right' && order[el.id][0] == 1) 
            || opts[el.id].direction == 'alternate'
            || opts[el.id].direction == 'fountainAlternate')            
                order[el.id].reverse();     
    };


    // strips animations
    $.strips = function(itemId, el){

        temp = opts[el.id].strips;
        if (inc[el.id] == temp) {
            clearInterval(stripInt[el.id]);
            return;
        }
        $('.ft-'+el.id).attr('href',links[el.id][imgInc[el.id]]);
        if(opts[el.id].position == 'curtain'){
            currWidth = $('#ft-'+el.id+itemId).width();
            $('#ft-'+el.id+itemId).css({ width: 0, opacity: 0, 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' });
            $('#ft-'+el.id+itemId).animate({ width: currWidth, opacity: 1 }, 1000);
        } else {
            $('#ft-'+el.id+itemId).css({ height: 0, opacity: 0, 'background-image': 'url('+img[el.id][imgInc[el.id]]+')' });
            $('#ft-'+el.id+itemId).animate({ height: opts[el.id].height, opacity: 1 }, 1000);
        }
        
        inc[el.id]++;
        
    };

    // navigation
    $.navigation = function(el){
        // create prev and next 
        $('#'+el.id).append("<a href='#' id='ft-prev-"+el.id+"' class='ft-prev'>prev</a>");
        $('#'+el.id).append("<a href='#' id='ft-next-"+el.id+"' class='ft-next'>next</a>");
        $('#ft-prev-'+el.id).css({
            'position'  : 'absolute',
            'z-index'   : 1001,
            'line-height': '30px'
        }).click( function(e){
            e.preventDefault();
            $.transition(el,'prev');
            clearInterval(imgInt[el.id]);
            imgInt[el.id] = setInterval(function() { $.transition(el)  }, params.delay+params.stripDelay*params.strips);        
        });

        $('#ft-next-'+el.id).css({
            'position'  : 'absolute',
            'z-index'   : 1001,
            'line-height': '30px'
        }).click( function(e){
            e.preventDefault();
            $.transition(el);
            clearInterval(imgInt[el.id]);
            imgInt[el.id] = setInterval(function() { $.transition(el)  }, params.delay+params.stripDelay*params.strips);
        });

        // image buttons
        $("<div id='ft-buttons-"+el.id+"'></div>").insertAfter($('#'+el.id));
        $('#ft-buttons-'+el.id).css({
            'text-align'    : 'right',
            'padding-top'   : 5,
            'width'         : opts[el.id].width
        });
        for(k=1;k<img[el.id].length+1;k++){
            $('#ft-buttons-'+el.id).append("<a href='#' class='ft-button-"+el.id+"'>"+k+"</a>");
        }
        $('.ft-button-'+el.id).css({
            'padding'   : 5
        });

        $.each($('.ft-button-'+el.id), function(i,item){
            $(item).click( function(e){
                e.preventDefault();
                $.transition(el,i);
                clearInterval(imgInt[el.id]);
                imgInt[el.id] = setInterval(function() { $.transition(el)  }, params.delay+params.stripDelay*params.strips);                
            })
        });     
    }
    


    // shuffle array function
    $.fisherYates = function(arr) {
      var i = arr.length;
      if ( i == 0 ) return false;
      while ( --i ) {
         var j = Math.floor( Math.random() * ( i + 1 ) );
         var tempi = arr[i];
         var tempj = arr[j];
         arr[i] = tempj;
         arr[j] = tempi;
       }
    }   
        
    this.each (
        function(){ init(this); }
    );
        
};

    // default values
    $.fn.jqFancyTransitions.defaults = {    
        width: 500, // width of panel
        height: 332, // height of panel
        strips: 10, // number of strips
        delay: 5000, // delay between images in ms
        stripDelay: 50, // delay beetwen strips in ms
        titleOpacity: 0.7, // opacity of title
        titleSpeed: 1000, // speed of title appereance in ms
        position: 'alternate', // top, bottom, alternate, curtain
        direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
        effect: '', // curtain, zipper, wave
        navigation: false, // prev next and buttons
        links : false // show images as links       
    };
    
})(jQuery);