/* Mootools slider class */
var Slider = new Class({
	options: {
		onChange: Class.empty,
		onComplete: Class.empty,
		onTick: function(pos){
			this.knob.setStyle(this.p, pos);
		},
		mode: 'horizontal',
		steps: 100,
		offset: 0
	},
    mouseover: function(){
        this.knob.setStyle('opacity', '0.5');
        this.knob.setStyle('filter', 'alpha(opacity=50)');
        this.knob.setStyle('-moz-opacity', '0.5');
        this.knob.setStyle('-khtml-opacity', '0.5');
    },
    mouseout: function(){
        this.knob.setStyle('opacity', '0.8');
        this.knob.setStyle('filter', 'alpha(opacity=80)');
        this.knob.setStyle('-moz-opacity', '0.8');
        this.knob.setStyle('-khtml-opacity', '0.8');
    },
	initialize: function(el, knob, options){
		this.element = $(el);
		this.knob = $(knob);
		this.setOptions(options);
		this.previousChange = -1;
		this.previousEnd = -1;
		this.step = -1;
		this.element.addEvent('mousedown', this.clickedElement.bindWithEvent(this));
        this.knob.addEvent('mouseover', this.mouseover.bindWithEvent(this));
	    this.knob.addEvent('mouseout', this.mouseout.bindWithEvent(this));
		var mod, offset;
		switch(this.options.mode){
			case 'horizontal':
				this.z = 'x';
				this.p = 'left';
				mod = {'x': 'left', 'y': false};
				offset = 'offsetWidth';
				break;
			case 'vertical':
				this.z = 'y';
				this.p = 'top';
				mod = {'x': false, 'y': 'top'};
				offset = 'offsetHeight';
		}
		this.max = this.element[offset] - this.knob[offset] + (this.options.offset * 2);
		this.half = this.knob[offset]/2;
		this.getPos = this.element['get' + this.p.capitalize()].bind(this.element);
		this.knob.setStyle('position', 'relative').setStyle(this.p, - this.options.offset);
		var lim = {};
		lim[this.z] = [- this.options.offset, this.max - this.options.offset];
		this.drag = new Drag.Base(this.knob, {
			limit: lim,
			modifiers: mod,
			snap: 0,
			onStart: function(){
				this.draggedKnob();
			}.bind(this),
			onDrag: function(){
				this.draggedKnob();
			}.bind(this),
			onComplete: function(){
				this.draggedKnob();
				this.end();
			}.bind(this)
		});
		if (this.options.initialize) this.options.initialize.call(this);
	},
	resizeSlider: function(sliderSize) {
		var mod, offset, hw;
		switch(this.options.mode){
		case 'horizontal':
			mod={'x': 'left', 'y': false};
			offset='offsetWidth';
                        hw='width';
			break;
		case 'vertical':
			mod={'x': false, 'y': 'top'};
			offset='offsetHeight';
                        hw='height';
		}
		var elementSize=this.element.getStyle(hw).toInt();
		this.options.steps=Math.max(0, sliderSize - elementSize);            
		this.max=this.element[offset] - this.knob[offset] + (this.options.offset * 2);
		this.half=this.knob[offset]/2;
		this.step=Math.min(this.step, this.options.steps);
		var lim={};
		lim[this.z]=[- this.options.offset, this.max - this.options.offset];
		this.getPos=this.element['get' + this.p.capitalize()].bind(this.element);
		this.drag.options.limit=lim;	
		this.set(this.step);
		if (elementSize > sliderSize) {
			this.knob.setStyle('visibility', 'hidden')
			this.element.setStyle('visibility', 'hidden')
		}
		else {
			this.knob.setStyle('visibility', 'visible')
			this.element.setStyle('visibility', 'visible')
		}
 	},
	set: function(step){
		this.step = step.limit(0, this.options.steps);
		this.checkStep();
		this.end();
		this.fireEvent('onTick', this.toPosition(this.step));
		return this;
	},
	clickedElement: function(event){
		var position = event.page[this.z] - this.getPos() - this.half;
		position = position.limit(-this.options.offset, this.max -this.options.offset);
		this.step = this.toStep(position);
		this.checkStep();
		this.end();
		this.fireEvent('onTick', position);
	},
	draggedKnob: function(){
		this.step = this.toStep(this.drag.value.now[this.z]);
		this.checkStep();
	},
	checkStep: function(){
		if (this.previousChange != this.step){
			this.previousChange = this.step;
			this.fireEvent('onChange', this.step);
		}
	},
	end: function(){
		if (this.previousEnd !== this.step){
			this.previousEnd = this.step;
			this.fireEvent('onComplete', this.step + '');
		}
	},
	toStep: function(position){
		return Math.round((position + this.options.offset) / this.max * this.options.steps);
	},
	toPosition: function(step){
		return this.max * step / this.options.steps;
	}
});
Slider.implement(new Events);
Slider.implement(new Options);

window.addEvent('domready',function(){
	$('area').mySlide=new Slider($('area'), $('knob'), {
		steps: 2000,
		wheel: true,
		onChange: function(step){
			$('strip').setStyle('margin-left', -step);
		}
	}).set(0);
	
	document.addEvent('keydown',function(event) {
		var event=new Event(event);
		if (event.key=='right'){
			var step=$('strip').getStyle('margin-left').toInt();
			$('area').mySlide.set(-step + 100);
		}
		if (event.key=='left'){
			var step=$('strip').getStyle('margin-left').toInt();
			$('area').mySlide.set(-step - 100);
		}
	});
	
	setViewerWidth=function() {
		$('viewer').setStyle('width', Math.max(minpagewidth, $('content').getStyle('width').toInt()));
		$('area').setStyle('width', $('viewer').getStyle('width').toInt());
	};
	setViewerWidth();
	$('area').mySlide.resizeSlider(sliderwidth);
	
	window.addEvent('resize', function(event) {
		setViewerWidth();
		$('area').mySlide.resizeSlider(sliderwidth);
	});
	
	document.addEvent('mousewheel', function(event) {
		var event=new Event(event).stop();
		if (event.wheel > 0) {
			var step=$('strip').getStyle('margin-left').toInt();
			$('area').mySlide.set(-step - 100);
		} 
		else if (event.wheel < 0) {
			var step=$('strip').getStyle('margin-left').toInt();
			$('area').mySlide.set(-step + 100);
		}
	});
});