////////////////////// MMJS.PicSlide /////////////////////
// Version : 0.1.3
// Require : jQuery 1.4.2
// Author : Albert.Lee
// Last Modify : 2010.09.20
//////////////////////////////////////////////////////////

var MMJS = MMJS || {};

MMJS.PicSlide =  function( args ){
  //init args
  args = args || {};

  var args_default = {
    container: '#PicSlide_Con',
    list: [], //pic list ,object array, items like 
    /*
    { 
      'pic':'./images/01.jpg',
      'trans':'flash',
      'link':'link',
      'id':'id',
      'class':'class',
      'usemap':'class',
      'alt':'class'
    }
    */
    interval: 3, //global interval in seconds
    //transaction flash var
    flash_t_p1: 20,  // flash parse1 in microseconds
    flash_t_p2: 200,  // flash parse2 in microseconds
    //transaction fade var
    fade_t_p1: 'slow',
    fade_t_p2: 'slow',
    //nav
    nav_ul_selector:'',
    nav_active_item:null,
    nav_active_class_name:'active'
  }
  
  args = jQuery.extend( args_default,args );
  jQuery.extend( this,args );

  
  this.init();

}


MMJS.PicSlide.prototype.init = function(){
  
  this.$con = jQuery(this.container);

  this.$nav_ul = jQuery(this.nav_ul_selector);

  if ( !this.created ){
    //main wrap
    this.$wrap = jQuery( '<div style="width:100%;height:100%;position:relative"></div>' );
    //flash mask
    this.$flash_mask = jQuery( '<div style="width:100%;height:100%;position:absolute;left:0;top:0;background-color:#fff"></div>' ).hide();
    //perload container
    this.$perload_con = jQuery( '<div style="width:0;height:0;overflow:hidden;position:absolute;left:0;top:0"></div>' );
    
    // append
    this.$wrap.append( this.$perload_con ).append( this.$flash_mask );
    
    this.created = true;
  }

  if ( this.list.length ){

    //init pic perload
    for ( i=0;i<this.list.length;i++ ){
      this.$perload_con.append( '<img src="' + this.list[i].pic + '">' );
    }
  
    //add the first pic in wrap
    this.cur_pic_index = 0;
    this.cur_pic_obj = this.list[this.cur_pic_index];
    this.$cur_pic = this.createImage( this.cur_pic_obj );
    this.$cur_pic.show();

    //replace the default $con content
    this.$con.empty().append(this.$wrap);
    
    if ( this.list.length > 0 ){
      this.goto(0);
      this.play();
    }

  }
  
}

//
MMJS.PicSlide.prototype.createImage = function( pic_obj ){

  $img = jQuery( '<img src="' + pic_obj.pic + '">' );
  if ( typeof pic_obj['link'] == 'string' ){
    $img.click( function(){ 
			window.location.href = pic_obj['url'];
		} ).focus( function(){
			this.blur();
		} );
    $img.css( {'cursor':'pointer'} );
  }
  if ( typeof pic_obj['id'] == 'string' ){
    $img.attr( {'id':pic_obj['id']} );
  }
  if ( typeof pic_obj['class'] == 'string' ){
    $img.attr( {'class':pic_obj['class']} );
  }
  if ( typeof pic_obj['usemap'] == 'string' ){
    $img.attr( {'usemap':pic_obj['usemap']} );
  }
  if ( typeof pic_obj['alt'] == 'string' ){
    $img.attr( {'alt':pic_obj['alt']} );
  }
  
  return jQuery( '<div style="position:absolute;left:0;top:0"></div>' ).append($img).hide().insertBefore(this.$flash_mask);
}

//
MMJS.PicSlide.prototype.doTransaction = function( callback ){
  var class_obj = this;

  if ( typeof callback == 'function' ){
    callback.apply( this,[ this.next_pic_index ] );
  }
  
  //if need pic switch
  if ( this.cur_pic_index != this.next_pic_index ){
    this.cur_pic_obj = this.list[this.cur_pic_index];
    this.next_pic_obj = this.list[this.next_pic_index];
    // callback function when transaction is over
    this.callback_trans = function( $cur_pic,$old_pic ){
      class_obj.$cur_pic = $cur_pic;
      $old_pic.remove();
      class_obj.cur_pic_index = class_obj.next_pic_index;
    };
    switch( this.cur_pic_obj.trans ){
      case 'flash':
        this.transFlash( this.next_pic_obj,this.callback_trans );
        break;  
      case 'fade':
        this.transFade( this.next_pic_obj,this.callback_trans );
        break;
    }
  }
}


//
MMJS.PicSlide.prototype.next = function( callback ){
  
  //first run
  if ( typeof this.cur_pic_index == 'undefined' ){
    this.cur_pic_index = 0;
  }
  //get the right next pic index
  this.next_pic_index = this.cur_pic_index + 1;
  if ( typeof this.list[this.next_pic_index] == 'undefined' ){
    this.next_pic_index = 0;
  }
  this.doTransaction( callback );
  this.setNav(this.next_pic_index);
}

//
MMJS.PicSlide.prototype.prev = function( callback ){
  //first run
  if ( typeof this.cur_pic_index == 'undefined' ){
    this.cur_pic_index = 0;
  }
  //get the right next pic index
  this.next_pic_index = this.cur_pic_index - 1;
  if ( typeof this.list[this.next_pic_index] == 'undefined' ){
    this.next_pic_index = ( this.list.length - 1 );
  }
  this.doTransaction( callback );
  this.setNav(this.next_pic_index);
}

//
MMJS.PicSlide.prototype.goto = function( index,callback ){
  //get the right next pic index
  if ( typeof this.list[index] != 'undefined' ){
    this.next_pic_index = index;
  }
  this.doTransaction( callback );
  this.setNav(this.next_pic_index);
}


//
MMJS.PicSlide.prototype.play = function(callback){
  var class_obj = this;
  this.stop();
  this.interval_handler = window.setInterval( function(){ 
    class_obj.next.apply( class_obj,[callback] );
  },this.interval*1000 );
}

//
MMJS.PicSlide.prototype.stop = function(){
  if ( this.interval_handler ){
    window.clearInterval(this.interval_handler);
    this.interval_handler = null;
  }
}


MMJS.PicSlide.prototype.transFlash = function( pic_to,callback ){
  var class_obj = this;
  
  var $pic_to = this.createImage( pic_to );
  this.$flash_mask.fadeIn( this.flash_t_p1,function(){
    class_obj.$cur_pic.hide();
    $pic_to.show();
    class_obj.$flash_mask.fadeOut( class_obj.flash_t_p2,function(){
      callback.apply( class_obj,[$pic_to,class_obj.$cur_pic] );
    } );
  } );
  
}

MMJS.PicSlide.prototype.transFade = function( pic_to,callback ){
  var class_obj = this;
  
  var $pic_to = this.createImage( pic_to );
  this.$cur_pic.fadeOut( this.fade_t_p1 );
  $pic_to.fadeIn( this.fade_t_p2,function(){
    callback.apply( class_obj,[$pic_to,class_obj.$cur_pic] );  
  } );
}

MMJS.PicSlide.prototype.setNav = function( index ){
  var class_obj = this;
  index = parseInt(index);
  
  if ( index >= 0 ){
    if ( class_obj.nav_active_item ){
      var $li = class_obj.$nav_ul.find(' > li');
      $li.find( class_obj.nav_active_item ).removeClass(class_obj.nav_active_class_name);
      $li.eq(index).find( class_obj.nav_active_item ).addClass(class_obj.nav_active_class_name);
    }else{
      class_obj.$nav_ul.find(' > li').removeClass(class_obj.nav_active_class_name).eq(index).addClass( class_obj.nav_active_class_name );
    }
  }
}


