var KimiStripImage = new Class({

  options: {
    scaleDuration: 250, // ms
    inactiveOpacity: 1,
    activeOpacity: 1
  },

  initialize: function(strip, options)
  {
    this.strip = strip;
    $extend(this.options, options);
    
    this.img = KimiCore.createElement('img', 'KimiStripImage');
    this.img.setStyle('margin-left', this.options.kimiSpacing);
    this.img.onload = this.onLoad.bind(this);
    this.img.addEvent('mouseover', this.onMouseOver.bind(this));
    //this.img.addEvent('mouseleave', this.onMouseLeave.bind(this));
    
    this.marginTop = parseInt((this.options.activeHeight - this.options.inactiveHeight) / 2) - 1;
    this.img.setStyles({ width: this.options.inactiveWidth, height: this.options.inactiveHeight, marginTop: this.marginTop, visibility: 'hidden' });
    
    this.a = KimiCore.createElement('a', 'KimiStripImageLink');
    this.a.appendChild(this.img);
        
    this.fxSize = new Fx.Styles(this.img, { duration: this.options.scaleDuration, transition: Fx.Transitions.Sine.easeOut });
    this.isActive = false;
  },
  
  inject: function(container)
  {
    container.appendChild(this.a);
  },
  
  load: function(data)
  {
    this.img.style.visibility = 'hidden';
    this.img.setAttribute('src', data.src);
    this.img.setAttribute('kp_animated', data.kp_animated);
    this.img.setAttribute('kp_img_url', data.kp_img_url);
    this.img.addClass(data.className);
    this.img.setStyle('cursor', data.cursor);
    
    this.a.setAttribute('href', data.href);
    this.a.setAttribute('title', data.title);
  },
  
  onLoad: function()
  {
    this.img.setStyle('visibility', 'visible');
    return true;
  },
  
  onMouseOver: function()
  {
    if (this.strip.dragIsActive) return;  // don't respond if a drag is active
  
    this.strip.shrinkActiveKimis();
    this.isActive = true;
    
    if (this.fxSize) this.fxSize.stop();
    this.fxSize.start({
      width: this.options.activeWidth,
      height: this.options.activeHeight,
      opacity: this.options.activeOpacity,
      top: 0 - this.marginTop
    });
  },
  
  onMouseLeave: function()
  {
    if (this.strip.dragIsActive) return;  // don't respond if a drag is active
  
    this.isActive = false;
  
    if (this.fxSize) this.fxSize.stop();
    this.fxSize.start({
      width: this.options.inactiveWidth,
      height: this.options.inactiveHeight,
      opacity: this.options.inactiveOpacity,
      top: 0
    });
  }
  
});