/*
 * Copyright 2006 OST-SYSTEMS. All rights reserved.
 */

function HectorVerticalSlider(slider, onchanged) {
  this.slider = slider;

  this.onchanged = onchanged; //Read/Write; the handler called when the slider is moved
  this.continuous = true; //Read/Write; a boolean that specifies if the onchanged handler is called while the slider thumb is moving (true) or only when its movement is finished (false); default is true
  this.padding = 0; //Read/Write; an integer that specifies the padding, in pixels, around the slider control within the bounds of the <div> element containing it
  this.value = 0.0; //Read only; the current value of the slider
  this.size = 22; //Read only; the height or width of the slider, in pixels
  this.trackStartPath = null; //Read only; the path to the current image used for the left end of a horizontal slider's track or the top end of a vertical slider's track
  this.trackStartLength = 8; //Read only; if used on a horizontal slider, the width of the image specified as trackStartPath ; if vertical, the height of the image specified as trackStartPath
  this.trackMiddlePath = null; //Read only; the path to the current image used middle of the slider's track
  this.trackEndPath = null; //Read only; the path to the current image used for the right end of a horizontal slider's track or the bottom end of a vertical slider's track
  this.trackEndLength = 8; //Read only; if used on a horizontal slider, the width of the image specified as trackEndPath ; if vertical, the height of the image specified as trackEndPath
  this.thumbPath = null; //Read only; the path to the current image used for the slider's thumb
  this.thumbLength = 22; //Read only; if used on a horizontal slider, the width of the image specified as thumbPath ; if vertical, the height of the image specified as thumbPath

  this.styles = null;
  
  this.setupDefaults();
  
  if (slider == null) {
    return;
  }
  
  this.setupLayout();
  this.refresh();
}

HectorVerticalSlider.prototype.setupLayout = function() {
  this.slider.style[this.styles.fixed] = this.size + "px";
  var doc = this.slider.ownerDocument;
  
  //track
  this.track = doc.createElement("div");
  this.slider.appendChild(this.track);
  this.track.style.position = "absolute";
  this.track.style.width = "100%";
  this.track.style.height = "100%";
  
  var element = doc.createElement("div");
  this.track.appendChild(element);
  element.style.position = "absolute";
  element.style[this.styles.start] = "0px";
  element.style[this.styles.variable] = this.trackStartLength + "px";
  element.style[this.styles.fixed] = "100%";
  element.style.backgroundImage = "url(" + this.trackStartPath + ")";
  element.style.backgroundRepeat = "no-repeat";

  element = doc.createElement("div");
  this.track.appendChild(element);
  element.style.position = "absolute";
  element.style[this.styles.start] = this.trackStartLength + "px";
  element.style[this.styles.end] = this.trackEndLength + "px";
  element.style[this.styles.fixed] = "100%";
  element.style.backgroundImage = "url(" + this.trackMiddlePath + ")";
  element.style.backgroundRepeat = this.styles.repeat;

  element = doc.createElement("div");
  this.track.appendChild(element);
  element.style.position = "absolute";
  element.style[this.styles.end] = "0px";
  element.style[this.styles.variable] = this.trackEndLength + "px";
  element.style[this.styles.fixed] = "100%";
  element.style.backgroundImage = "url(" + this.trackEndPath + ")";
  element.style.backgroundRepeat = "no-repeat";

  //thumb
  this.thumb = doc.createElement("div");
  this.track.appendChild(this.thumb);
  this.thumb.style.position = "absolute";
  this.thumb.style[this.styles.start] = "0px";
  //this.thumb.style[this.styles.shiftStart] = -this.thumbLength / 2 + "px";
  this.thumb.style.width = this.thumbLength + "px";
  this.thumb.style.height = this.thumbLength + "px";
  this.thumb.style.backgroundImage = "url(" + this.thumbPath + ")";
  this.thumb.style.backgroundRepeat = "no-repeat";

  var _self = this;
  this.trackOnClick = function(event) {
    var pos = event[_self.styles.mousePos] - _self.track[_self.styles.offsetPos];
    var thumbPos = parseInt(_self.thumb.style[_self.styles.start]);
    if (pos < thumbPos) {
      _self.slideBy(-_self.thumbLength / 2);
      event.stopPropagation();
      event.preventDefault();
    }
    else if (pos > thumbPos + _self.thumb[_self.styles.scrollSize]) {
      _self.slideBy(_self.thumbLength / 2);      
      event.stopPropagation();
      event.preventDefault();
    }
  }
  this.track.onmousedown = function(event) {
    _self.trackOnClick(event);
  }

  this.thumb.onmousedown = function(event) {
    _self.thumbDragPos = event[_self.styles.mousePos];
    doc.addEventListener("mousemove", _self.thumbDrag, true);
    doc.addEventListener("mouseup", _self.thumbDragStop, true);
    //document.addEventListener("mouseout", _self.thumbDragStop, true);
    event.stopPropagation();
    event.preventDefault();
  }
  
  this.thumbDrag = function(event) {
    var pos = event[_self.styles.mousePos];
    _self.slideBy(pos - _self.thumbDragPos);
    _self.thumbDragPos = pos;
    event.stopPropagation();
    event.preventDefault();
  }

  this.thumbDragStop = function(event) {
    doc.removeEventListener("mousemove", _self.thumbDrag, true);
    doc.removeEventListener("mouseup", _self.thumbDragStop, true);
    //document.removeEventListener("mouseout", _self.thumbDragStop, true);
    event.stopPropagation();
    event.preventDefault();
  }
}

HectorVerticalSlider.prototype.refresh = function() {
  var parentElement = this.slider;
  this.track.posTop = parentElement.offsetTop;
  this.track.posLeft = parentElement.offsetLeft;
  while (parentElement.offsetParent != null) {
    parentElement = parentElement.offsetParent;
    this.track.posTop += parentElement.offsetTop;
    this.track.posLeft += parentElement.offsetLeft;
  }

  var sheight = this.track[this.styles.scrollSize] - this.thumbLength;
  var pos = this.value * sheight + this.thumbLength / 2;
  this.thumb.style[this.styles.start] = parseInt(pos) + "px";
}

HectorVerticalSlider.prototype.slideTo = function(x) {
  var sheight = this.track[this.styles.scrollSize] - this.thumbLength;
  if (x < 0) {
    x = 0;
  }
  if (x > sheight) {
    x = sheight;
  }
  this.thumb.style[this.styles.start] = x + "px";
  this.value = parseFloat(x) / (sheight);
  if (this.onchanged) {
    this.onchanged(this.value);
  }
}

HectorVerticalSlider.prototype.slideBy = function(x) {
  var pos = parseInt(this.thumb.style[this.styles.start]);
  this.slideTo(pos + x);
}

HectorVerticalSlider.prototype.setValue = function(value) {
  var sheight = this.track[this.styles.scrollSize] - this.thumbLength;
  this.value = value;
  this.slideTo(parseInt(value * sheight));
}

HectorVerticalSlider.prototype.remove = function() {
  this.slider.removeChild(this.track);
}

HectorVerticalSlider.prototype.show = function() {
  this.track.style.display = "block";  
  this.hidden = false;
}

HectorVerticalSlider.prototype.hide = function() {
  this.track.style.display = "none";  
  this.hidden = true;
}

HectorVerticalSlider.prototype.setSize = function(size) {
  this.size = size;
  this.slider.style[this.styles.fixed] = size + "px";
  this.refresh();  
}

HectorVerticalSlider.prototype.setTrackStart = function(path, size) {
  this.trackStartPath = path;
  this.trackStartLength = size;
  this.remove();
  this.setupLayout();
  this.refresh();
}

HectorVerticalSlider.prototype.setTrackMiddle = function(path) {
  this.trackMiddlePath = path;
  this.remove();
  this.setupLayout();
  this.refresh();    
}

HectorVerticalSlider.prototype.setTrackEnd = function(path, size) {
  this.trackEndPath = path;
  this.trackEndLength = size;
  this.remove();
  this.setupLayout();
  this.refresh();  
}

HectorVerticalSlider.prototype.setThumb = function(path, size) {
  this.thumbPath = path;
  this.thumbLength = size;
  this.remove();
  this.setupLayout();
  this.refresh();  
}

HectorVerticalSlider.prototype.setupDefaults = function() {
  var path = getHectorPath() + "scripts/HectorClasses/Images/";  

	this.trackStartPath = path + "vsliderTop.png";
	this.trackMiddlePath = path + "vsliderMiddle.png";
	this.trackEndPath = path + "vsliderBottom.png";
	this.thumbPath = path + "sliderThumb.png";
	
	this.styles = {
	  start: "top",
	  end: "bottom",
	  fixed: "width",
	  variable: "height",
	  repeat: "repeat-y",
	  scrollSize: "scrollHeight",
	  viewSize: "viewHeight",
	  scrollPos: "scrollTop",
	  scroller: "verticalScrollTo",
	  mousePos: "clientY",
	  offsetPos: "posTop",
	  shiftStart: "left"
	}
}

function HectorHorizontalSlider(slider, onchanged) {
  this.slider = slider;
  this.onchanged = onchanged;
  this.setupDefaults();
  this.setupLayout();
  this.refresh();
}

HectorHorizontalSlider.prototype = new HectorVerticalSlider(null, null);

HectorHorizontalSlider.prototype.setupDefaults = function() {
  var path = getHectorPath() + "scripts/HectorClasses/Images/";  

	this.trackStartPath = path + "hsliderLeft.png";
	this.trackMiddlePath = path + "hsliderMiddle.png";
	this.trackEndPath = path + "hsliderRight.png";
	this.thumbPath = path + "sliderThumb.png";
	
	this.styles = {
	  start: "left",
	  end: "right",
	  fixed: "height",
	  variable: "width",
	  repeat: "repeat-x",
	  scrollSize: "scrollWidth",
	  viewSize: "viewWidth",
	  scrollPos: "scrollLeft",
	  scroller: "horizontalScrollTo",
	  mousePos: "clientX",
	  offsetPos: "posLeft",
	  shiftStart: "top"
	}
}