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);
  this.perFrame=0;
  //alert("this.thumbs.length"+this.thumbs.length);
  for(var index=0; index<this.thumbs.length; index++) {
  	//alert("this.perFrame"+this.perFrame);
  	//22 is included for margin-left and margin-right of image
  	
  	this.perFrame = 22 + this.perFrame + (this.thumbs[index].offsetWidth);  	
   }
  this.totalFrames =(Math.ceil(this.perFrame/(this.innerWidth)));  
  //alert("this.totalFrames"+this.totalFrames);
  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;
    this.inner0.style.width='477px';
  }

  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';
      //document.getElementsByClassName('mask_transparent', this)[0].style.border = '#FC02C4 1px solid';
    };
    list[i].onmouseout = function() {
      //document.getElementsByClassName('mask_transparent', this)[0].style.display = 'none';
      //document.getElementsByClassName('mask_transparent', this)[0].style.border = '#000000 1px solid';
    };
  }
};

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;
  var textdecoration = this.style.textDecoration;
  //this.style.textDecoration = (textdecoration == 'underline') ? '' : 'underline';
  this.style.backgroundPosition = (bgPos == '0px -27px') ? '0 0' : '0px -27px';
}

function largeImg(current,max) {
	var elementId;	
	for(i = 1; i <= max; i++) {
		elementId = 'largeImg_' + i;
		document.getElementById(elementId).style.display = 'none';
	}	
	elementId = 'largeImg_' + current;
	document.getElementById(elementId).style.display = 'block';
	
}
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);