CHELLO = window.CHELLO || {};
CHELLO.widgets = CHELLO.widgets || {};

CHELLO.widgets.scrollBox = Class.create();
CHELLO.widgets.scrollBox.prototype = {
	mainElement: null,
	contentElement: null,
	backButton: null,
	fwdButton: null,
	contentPosition: [0,0],
	orientation:'horizontal',
	baseOffset:0,
	blockSize:0,
	contentSize:0,
	frameSize:0,
	step:5,
	stopBack:true,
	stopFwd:false,
	isMoving:false,
	lang:'de',
	initialize: function (mainElement, orientation) {
		this.mainElement = mainElement;
		this.orientation = orientation;
		this.lang = lang;
		this.contentElement = $(this.mainElement.id + "_content");
		this.backButton = $(this.mainElement.id + "_back");
		this.fwdButton = $(this.mainElement.id + "_fwd");
		if (this.contentElement.firstChild == null) {
			return false;
		}
		if (this.orientation == 'horizontal') {
			this.baseOffset = Position.positionedOffset(this.contentElement)[0];
			this.blockSize = Element.getDimensions(Element.nextElement(this.contentElement.firstChild)).width;
			this.contentSize = Element.getDimensions(this.contentElement).width;
			this.frameSize = Element.getDimensions(this.contentElement.parentNode).width;		
		} else {
			this.baseOffset = Position.positionedOffset(this.contentElement)[1];
			this.blockSize = Element.getDimensions(Element.nextElement(this.contentElement.firstChild)).height;
			this.contentSize = Element.getDimensions(this.contentElement).height;
			this.frameSize = Element.getDimensions(this.contentElement.parentNode).height;						
		}
		Event.observe(this.backButton, "click", this.moveBack.bindAsEventListener(this));
		//Event.observe(this.backButton, "click", function (e) {Event.element(e).blur()});
		Event.observe(this.fwdButton, "click", this.moveFwd.bindAsEventListener(this));
		//Event.observe(this.fwdButton, "click", function (e) {Event.element(e).blur()});
	},
	moveBack: function (e) {
		if (!this.stopBack && !this.isMoving) {
			if (this.orientation == "horizontal") {
				var effect_options = {x:(this.blockSize*this.step),beforeStart:function() {
					this.isMoving = true;
				}.bind(this),afterFinish:function () {
						this.blockCount = this.blockCount + this.step;
						var contentPosition = Position.positionedOffset(this.contentElement);				
						contentPosition = contentPosition[0];
						if ((this.baseOffset - contentPosition) <= 10) {
							this.stopBack = true;
							this.stopFwd = false;
							var img = $$("#" + this.backButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_left_off_url"];
							}	
							var img = $$("#" + this.fwdButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_right_url"];
							}															
						} else {
							this.stopBack = false;
							this.stopFwd = false;	
							var img = $$("#" + this.fwdButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_right_url"];
							}													
						}
						this.isMoving = false;
					}.bind(this)
				} 
			} else {
				var effect_options = {y:(this.blockSize*this.step),beforeStart:function() {
					this.isMoving = true;
				}.bind(this),afterFinish:function () {
						this.blockCount = this.blockCount + this.step;
						var contentPosition = Position.positionedOffset(this.contentElement);				
						contentPosition = contentPosition[1];
						if ((this.baseOffset - contentPosition) <= 10) {
							this.stopBack = true;
							this.stopFwd = false;
							var img = $$("#" + this.backButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_left_off_url"];
							}			
							var img = $$("#" + this.fwdButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_right_url"];
							}																												
						} else {
							this.stopBack = false;
							this.stopFwd = false;	
							var img = $$("#" + this.fwdButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_right_url"];
							}													
						}
						this.isMoving = false;
					}.bind(this)
				}
			}
			new Effect.Move(this.contentElement, effect_options);
		}
		if (e) {
		  Event.stop(e);
		}
		return false;
	},
	moveFwd: function (e) {
		if (!this.stopFwd && !this.isMoving) {
			if (this.orientation == "horizontal") {
				var effect_options = {x:-(this.blockSize*this.step),beforeStart:function() {
						this.isMoving = true;
					}.bind(this),afterFinish:function () {
						var contentPosition = Position.positionedOffset(this.contentElement);
						this.blockSize = Element.getDimensions(Element.nextElement(this.contentElement.firstChild)).width;
						this.contentSize = Element.getDimensions(this.contentElement).width;
						this.frameSize = Element.getDimensions(this.contentElement.parentNode).width-1;												
						contentPosition = contentPosition[0];
						if ((this.contentSize + contentPosition) - this.frameSize <= 0) {
							this.stopFwd = true;
							var img = $$("#" + this.fwdButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_right_off_url"];
							}																									
						} else {
							this.stopFwd = false;
							this.stopBack = false;
							var img = $$("#" + this.backButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_left_url"];
							}
						}
						this.isMoving = false;			
					}.bind(this)
				}
			} else {
				var effect_options = {y:-(this.blockSize*this.step),beforeStart:function() {
					this.isMoving = true;
					}.bind(this),afterFinish:function () {
						var contentPosition = Position.positionedOffset(this.contentElement);
						this.blockSize = Element.getDimensions(Element.nextElement(this.contentElement.firstChild)).height;
						this.contentSize = Element.getDimensions(this.contentElement).height;
						this.frameSize = Element.getDimensions(this.contentElement.parentNode).height-1;							
						contentPosition = contentPosition[1];
						if ((this.contentSize + contentPosition) - this.frameSize <= 0) {
							this.stopFwd = true;
							this.stopBack = false;
							var img = $$("#" + this.fwdButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_right_off_url"];
							}
							var img = $$("#" + this.backButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_left_url"];
							}																									
						} else {
							this.stopFwd = false;
							this.stopBack = false;
							var img = $$("#" + this.backButton.id + " img")[0];
							if (typeof(img) != "undefined") {
								img.src = epgStrings[this.lang]["slide_left_url"];
							}
						}
						this.isMoving = false;			
					}.bind(this)
				}
			}
			new Effect.Move(this.contentElement, effect_options);
		}	
		if (e) {
		  Event.stop(e);
		}
		return false;					
	},                       
	moveTo: function (id) {
		console.log("moveTo");
    var element = $(id);
		var elementPos = ''; 
	},
    moveFwdToNum: function (num) {
		old_step = this.step;
		this.step = num - (num % old_step);
    if (num > 0) {
      this.moveFwd();
    } 
    this.step = old_step;
	}				
};