var Slider = function(obj) {
  this.root = obj;
  this.btnLeft;
  this.btnRight;
  this.inner0;
  this.inner1;
  this.innerWidth;
  this.thumbs = [];
  this.frame = 1;
  this.perFrame;
  this.totalFrames;
  this.currX = 0;
  this.isAnimating = false;

  if(!this.prepare()) return false;
  this.bindEvents();
  this.delegate();
};

Slider.prototype.prepare = function() {
  var r = this.root;
  
  if(!(this.btnLeft = document.getElementsByClassName('slider_btn_l_null', r)[0])) return false;
  if(!(this.btnRight = document.getElementsByClassName('slider_btn_r', r)[0])) return false;
  if(!(this.inner0 = document.getElementsByClassName('slider_inner', r)[0])) return false;
  if(!(this.inner1 = this.inner0.getElementsByTagName('div')[0])) return false;
  this.innerWidth = this.inner0.offsetWidth;
  this.thumbs = this.inner1.getElementsByClassName('artist_a');
  if (this.thumbs.length == 0) {
	  this.thumbs = this.inner1.getElementsByTagName('a');
  }
  this.perFrame = Math.floor(this.innerWidth / this.thumbs[0].offsetWidth);
  this.totalFrames = Math.ceil(this.thumbs.length / this.perFrame);

  if(this.thumbs.length < this.perFrame) {
    var margin = (this.innerWidth - (this.perFrame*this.thumbs[0].offsetWidth)) / this.perFrame;
    this.inner0.style.width = (this.thumbs.length*this.thumbs[0].offsetWidth) + (this.thumbs.length*margin) + 'px';
    this.innerWidth = this.inner0.offsetWidth;
  }

  return true;
};

Slider.prototype.bindEvents = function() {
  var self = this;
  var list = this.thumbs;

  self.btnLeft.onmouseover = self.btnLeft.onmouseout = self.btnRight.onmouseover = self.btnRight.onmouseout = _ShiftBg;

  if(document.getElementsByClassName('mask_transparent', self.root).length == 0)
    return;

  for(var i=0; i<list.length; i++) {
    list[i].onmouseover = function() {
      document.getElementsByClassName('mask_transparent', this)[0].style.display = 'block';
    };
    list[i].onmouseout = function() {
      document.getElementsByClassName('mask_transparent', this)[0].style.display = 'none';
    };
  }
};

Slider.prototype.animate = function(flag) {
  if(this.isAnimating) return;

  var self = this;
  var inc = flag ? 1 : -1;
  var end = flag ? self.currX - self.innerWidth : self.currX + self.innerWidth;
  var start = self.currX;
  var theFx = new Fx.Style(self.inner1, 'left', {
    duration: 1300,
    transition: Fx.Transitions.cubicOut,
    onStart: function() {
      self.isAnimating = true;
      self.frame += inc;
      self.currX = end;
      self.delegate();
    },
    onComplete: function() {
      self.isAnimating = false;
    }
  }).custom(start, end);
};

Slider.prototype.delegate = function() {
  var self = this;

  if(self.frame < self.totalFrames) {
    self.btnRight.onclick = function() { self.animate(1); };
    self.btnRight.className = 'slider_btn_r';
  }
  else {
    self.btnRight.onclick = null;
    self.btnRight.className = 'slider_btn_r_null';
  }

  if(self.frame > 1) {
    self.btnLeft.onclick = function() { self.animate(0); };
    self.btnLeft.className = 'slider_btn_l';
  }
  else {
    self.btnLeft.onclick = null;
    self.btnLeft.className = 'slider_btn_l_null';
  }
};

function _ShiftBg() {
  var bgPos = this.style.backgroundPosition;
  this.style.backgroundPosition = (bgPos == '0px -50px') ? '0 0' : '0px -50px';
}

var _LoadSliders = function() {
  if(document.getElementById && document.getElementsByTagName && document.createElement) {
    var temp = new Object();
    var divs = document.getElementsByClassName('slider');
    for(var i=0; i<divs.length; i++) {
      temp = new Slider(divs[i]);
    }
    temp = null;
  }
  else
    return false;
};

if(window.addEventListener)
  window.addEventListener('load', _LoadSliders, false);
else if(window.attachEvent)
  window.attachEvent('onload', _LoadSliders);