var sliderArray = new Array();
var sliderIndex = -1;

var SliderClass = new Class({
  initialize: function(id, itemcontainer, maincontainer, slidercontainer){
    this.idx = sliderArray.length;
    this.click = false;
    sliderArray[this.idx] = this;
    this.sliderObject = new Object();
    this.sliderObject.itemContainer = document.getElementById(itemcontainer);
    this.sliderObject.mainContainer = document.getElementById(maincontainer);

    this.sliderObject.sliderContainer = document.getElementById(slidercontainer);            
    this.sliderObject.sliderDiff = this.sliderObject.itemContainer.offsetWidth - 
      this.sliderObject.mainContainer.offsetWidth;
    if(this.sliderObject.sliderDiff < 0) this.sliderObject.sliderDiff = 0;
    if(this.sliderObject.sliderDiff != 0){
      document.getElementById(slidercontainer).style.display = "block";
      this.sliderObject.cursorStartX = $(slidercontainer).getLeft();
      this.sliderObject.cursorStartY = $(slidercontainer).getTop();
    }
    this.sliderObject.zIndex = 0;
    this.sliderObject.elNode = document.getElementById(id);
    this.sliderObject.elNode.style.position = "relative";
    this.sliderObject.elNode.style.zIndex = ++this.sliderObject.zIndex;                    
    this.sliderObject.elStartLeft  = parseInt(this.sliderObject.elNode.style.left, 10);
    this.sliderObject.elStartTop   = parseInt(this.sliderObject.elNode.style.top,  10);
    if (isNaN(this.sliderObject.elStartLeft)) this.sliderObject.elStartLeft = 0;
    if (isNaN(this.sliderObject.elStartTop))  this.sliderObject.elStartTop  = 0;         
    this.sliderObject.itemContainer.style.left = "0px";
    this.sliderObject.elNode.style.left = "0px";
    this.sliderTransition = new Fx.Morph( $(this.sliderObject.elNode), { duration: 700, transition: Fx.Transitions.Expo.easeOut} );
    this.itemTransition = new Fx.Morph( $(this.sliderObject.itemContainer), { duration: 1000, transition: Fx.Transitions.Expo.easeOut} );
    var w = parseInt(this.sliderObject.mainContainer.offsetWidth,10);
    var fx = new Fx.Morph( $(this.sliderObject.itemContainer), {duration: 1500, transition: Fx.Transitions.Expo.easeOut} );
    fx.start({'left': [w,0] } );
  },
  dragStart: function(event){
    sliderIndex = this.idx;
    this.sliderObject.cursorStartX = $(this.sliderObject.sliderContainer).getLeft();
    this.sliderObject.cursorStartY = $(this.sliderObject.sliderContainer).getTop();
    this.sliderObject.elNode.style.zIndex = ++this.sliderObject.zIndex;
    if(Browser.Engine.trident){
      document.attachEvent("onmousemove", this.dragGo);
      document.attachEvent("onmouseup",   this.dragStop);
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }else{
      document.addEventListener("mousemove", this.dragGo,   true);
      document.addEventListener("mouseup",   this.dragStop, true);
      event.preventDefault();
    }
  },  
  clickGo: function(event){
    sliderIndex = this.idx;
    this.sliderObject.cursorStartX = $(this.sliderObject.sliderContainer).getLeft();
    this.sliderObject.cursorStartY = $(this.sliderObject.sliderContainer).getTop();
    this.click = true;
    this.dragGo(event);
  },
  dragGo: function(event){
    if(sliderIndex < 0) return; 
    var x, y;
    // Get cursor position with respect to the page.
    if(Browser.Engine.trident){
      x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    }else{
      x = event.clientX + window.scrollX;
    }

    if(x < sliderArray[sliderIndex].sliderObject.cursorStartX){ 
      x = sliderArray[sliderIndex].sliderObject.cursorStartX;
    }
    if(x > sliderArray[sliderIndex].sliderObject.cursorStartX + 
           sliderArray[sliderIndex].sliderObject.mainContainer.offsetWidth - 
           sliderArray[sliderIndex].sliderObject.elNode.offsetWidth)
    { 
      x = sliderArray[sliderIndex].sliderObject.cursorStartX + 
          sliderArray[sliderIndex].sliderObject.mainContainer.offsetWidth - 
          sliderArray[sliderIndex].sliderObject.elNode.offsetWidth;
      //y = event.clientY + window.scrollY;
    } 
    var p = (x-sliderArray[sliderIndex].sliderObject.cursorStartX) /
            (
              sliderArray[sliderIndex].sliderObject.mainContainer.offsetWidth+
              (sliderArray[sliderIndex].sliderObject.elNode.offsetWidth/2)-
              sliderArray[sliderIndex].sliderObject.cursorStartX
            );
    var d = p*(sliderArray[sliderIndex].sliderObject.sliderDiff);

    var start = parseInt(sliderArray[sliderIndex].sliderObject.itemContainer.style.left, 10);
    if (isNaN(start)) start = 0;
    
    sliderArray[sliderIndex].itemTransition.cancel();
    sliderArray[sliderIndex].itemTransition.start({'left':-d});

    // Move drag element by the same amount the cursor has moved.    
    var end = (sliderArray[sliderIndex].sliderObject.elStartLeft + x - sliderArray[sliderIndex].sliderObject.cursorStartX);
    if( sliderArray[sliderIndex].click == true ){
      sliderArray[sliderIndex].sliderTransition.cancel();
      sliderArray[sliderIndex].sliderTransition.start({'left':end});
      sliderArray[sliderIndex].click = false;
    }else{
      sliderArray[sliderIndex].sliderObject.elNode.style.left = end + "px";
    }
    
    //dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px"; 
    if(Browser.Engine.trident){
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }else{
      event.preventDefault();
    }
  },
  dragStop: function(event){     
    if(Browser.Engine.trident){
      document.detachEvent("onmousemove", sliderArray[sliderIndex].dragGo);
      document.detachEvent("onmouseup",   sliderArray[sliderIndex].dragStop);
    }else{
      document.removeEventListener("mousemove", sliderArray[sliderIndex].dragGo,   true);
      document.removeEventListener("mouseup",   sliderArray[sliderIndex].dragStop, true);
    }
    sliderIndex = -1;
  }
});