//--------------------------------------------------------------- SCROLLER CLASS

function scrollerClass(container, buttons, options){
	this.container	= $(container);
	this.btn_left	= $(buttons[0]);
	this.bnt_right	= $(buttons[1]);

	this.content = null;
	this.listener = null;
	this.timer = null;
	
	this.container_width = 0;
	this.content_width = 0;
	this.position = 0;

	this.options = Object.extend({
		offset: 5, delay: 100
	}, options);

	this.init = function(){
		this.content = this.container.down('div.scrollContent');
		this.listener = this.action.bindAsEventListener(this);

		$A([this.btn_left, this.bnt_right]).each(function(btn){
			Event.observe(btn, 'mouseover', this.listener);
			Event.observe(btn, 'mouseout', this.listener);
		}.bind(this));

		this.reset();
	};

	this.reset = function(){
		this.container_width = this.container.getDimensions().width;
		this.content_width = this.content.firstDescendant().getDimensions().width;
		this.position = 0;
		this.move();
	};

	this.action = function(e){
		var delta = e.element() === this.btn_left ? 1 : (e.element() === this.bnt_right ? -1 : 0);
		switch(e.type){
			case "mouseover":
			case "mousedown":
				if(this.container_width < this.content_width && delta != 0){
					this.scroll(delta);
					this.timer = setInterval(this.scroll.bind(this, Math.round(delta * this.options.offset)), this.options.delay);
				}
				break;
			case "mouseout":
			case "mouseup":
				clearInterval(this.timer)
				break;
		}
	};

	this.scroll = function(offset){
		if(offset < 0){ // right button (move left)
			this.position = Math.max(this.position + offset, this.container_width - this.content_width);
		}
		if(offset > 0){ // left button (move right)
			this.position = Math.min(this.position + offset, 0);
		}                                                                    

		this.move();
	};

	this.move = function(position){
		this.content.setStyle({marginLeft: this.position + 'px'});
	}

	Event.observe(window, 'load', this.init.bindAsEventListener(this));
	Event.observe(window, 'resize', this.reset.bindAsEventListener(this));
}

//---------------------------------------------------------------- ONLOAD EVENTS

Event.observe(document, 'dom:loaded', function(e){
	$$('input[rel="clear"]').each(function(el, i){
		if(el.type.match(/text/i) && !$F(el).blank()){
			var defValue = el.value;
			el.observe('focus', function(e, defValue){
				if(this.value == defValue) this.value = "";
			}.bindAsEventListener(el, defValue));
			el.observe('blur', function(e, defValue){
				if(this.value == "") this.value = defValue;
			}.bindAsEventListener(el, defValue));
		}
	});

	$$('img[rel="hover"]').each(function(el, i){
		if (el.src.blank() == false) {   
			var defsrc = el.src;   
			var hovsrc = el.src.substring(0, el.src.length - 4) + '_a' + el.src.substring(el.src.length - 4);
			el.observe('mouseover', function(e, src){
				this.src = src;
			}.bindAsEventListener(el, hovsrc));
			el.observe('mouseout', function(e, src){
				this.src = src;
			}.bindAsEventListener(el, defsrc));
			new Element('img', {src: hovsrc});
		}   
	});

	$$('img[rel="bg"]').each(function(el, i){
		var defbg = el.up('td').style.backgroundColor;
		var hovbg = '#333333';
		el.observe('mouseover', function(e, bg){
			this.up('td').setStyle({backgroundColor: bg});
		}.bindAsEventListener(el, hovbg));
		el.observe('mouseout', function(e, bg){
			this.up('td').setStyle({backgroundColor: bg});
		}.bindAsEventListener(el, defbg));
	});
	
	$$('img[rel="fade"]').each(function(el, i){
		el.setOpacity(0.6);
		(function(object, start, finish, ptr){
			object.observe('mouseover', function(e){
				if(ptr !== null) ptr.cancel();
				ptr = new Effect.Appear(object, {duration: 0.3, from: start, to: finish, afterFinish: function(){
					ptr = null;
				}});
			});
			object.observe('mouseout', function(e){
				if(ptr !== null) ptr.cancel();
				ptr = new Effect.Fade(object, {duration: 0.2, from: finish, to: start, afterFinish: function(){
					ptr = null;
				}});
			});
		})(el, 0.6, 1.0, null);
	});	
});