/**
 * 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',
      'top'    : params.height/2 - 15,
      'left'    : 0,
      'z-index'   : 1001,
      'line-height': '30px',
      'opacity'  : 0.7
    }).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',
      'top'    : params.height/2 - 15,
      'right'    : 0,
      'z-index'   : 1001,
      'line-height': '30px',
      'opacity'  : 0.7
    }).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: 958, // width of panel
    height: 312, // height of panel
    strips: 15, // 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);