ns('MagicWand.ImageSwitcher');

/**
 * Image switcher
 */
MagicWand.ImageSwitcher.Image = function(config) {
  // configurable {
  this.selector = ''; // required
  this.image_width = 93;
  this.image_height = 100;
  this.slot_margin = 21;
  this.auto_init = false;
  // }
  this._wrapper_selector = '';
  this._list_selector = '';
  this._secondary_image_selector = '';
  
  $.extend(this, config);
  
  if(this.auto_init)
    this.init();
}

MagicWand.ImageSwitcher.Image.prototype = {
  init: function() {
    this._initWrapper();
    this._initSlots();
  },
  
  _initWrapper: function() {
    this.getEl().wrap('<div></div>');
    this._wrapper_selector = this.getEl().parent().getIdSelector();
    this.getWrapEl().css({
      width: this.image_width,
      height: this.image_height,
      overflow: 'hidden'
    });
  },
  
  _initSlots: function() {
    this._initList();
    this._initMainSlot();
    this._initSecondarySlot();
  },
  
  _initList: function() {
    var $list = this.getEl().wrap('<ul></ul>');
    this._list_selector = $('ul', this.getWrapEl()).getIdSelector();
    this.getListEl().css('position', 'relative');
    this.getListEl().css({
      width: this.image_width * 2 + this.slot_margin
    });
  },
  
  _initMainSlot: function($list) {
    this.getEl().wrap('<li></li>');
    this.getEl().parent().css({
      'float': 'left',
      width: this.image_width
    });
  },
  
  _initSecondarySlot: function() {
    var $secondary_slot = $('<li></li>').appendTo(this._list_selector);
    $secondary_slot.css({
      'margin-left': this.slot_margin,
      'float': 'left',
      width: this.image_width
    });
    var src = this.getEl().attr('src');
    var title = this.getEl().attr('title');
    var $secodary_image = $('<img src="' + src + '" title="' + title + '"/>').appendTo($secondary_slot);
    this._secondary_image_selector = $secodary_image.getIdSelector();
  },
  
  switchTo: function(src, title, callback) {
    /*this.getEl().animate({
      width: 0
    }, 3000);*/
   var $sec_img = this.getSecondaryImageEl();
   this.getEl().attr('src', $sec_img.attr('src'))
               .attr('title', $sec_img.attr('title'));
   $sec_img.attr('src', src).attr('title', title);
   
   this.getListEl().css('left', 0).animate({
     left: -(this.image_width + this.slot_margin)
   }, 3000, 'swing', callback);
  },
  
  getEl: function() {
    return $(this.selector);
  },
  
  getWrapEl: function() {
    return $(this._wrapper_selector);
  },
  
  getSecondaryImageEl: function() {
    return $(this._secondary_image_selector);
  },
  
  getListEl: function() {
    return $(this._list_selector);
  }
}