window.addEvent('domready',function(){
	new hgSlider();
});

var hgSlider = new Class({
					   
	options:{
		'width'		:	936,
		'height'	:	240,
		'speed'		:	25,	
		'steps'		:	70	
	},
	
	initialize	:	function(){
	
		if($('slider')){
			
			$('slider').setStyles({
				'position'	:	'relative'
			});
			$each($$('#slider img'),function(item){
				var div = new Element('div',{
					'class'		:	'inner'
				}).inject(item,'before').setStyles({
					width		:	this.options.width,
					height		:	this.options.height,
					overflow	:	'hidden',
					'position'	:	'absolute'
				});
				item.clone().inject(div);
				item.dispose();							
			}.bind(this));
			$$('.inner')[1].setStyle('width',0);

			this.insert_controls();
			this.insert_slider();
			
		}
	
	},
	
	insert_controls	:	function(){
		/*	Control-Div */
		new Element('div',{
			'id'		:	'controls'
		}).inject('slider').setStyle('z-index',10).position({
			relativeTo	:	$('slider'),
			position	:	'centerBottom',
			edge		:	'centerBottom'
		});
		
		/*	Slider-Knob */
		new Element('a',{
			'id'		:	'knob'
		}).setStyles({
			'cursor'	:	'pointer',
			'float'		:	'left'
		}).inject('controls');
		$('knob').addEvent('click',function(){
			if(this.periodicalSlider) $clear(this.periodicalSlider);
		}.bind(this));
		
		/* Play-Button */
		new Element('a',{
			'id'		:	'playButton'
		}).inject('slider','after').setStyle('cursor','pointer');
	},
	
	insert_slider	:	function(){
		this.slider = new Slider('controls', 'knob', {
			steps		:	this.options.steps,
			onChange	: 	function(pc){
				var new_width = Math.round(this.options.width / this.slider.options.steps * pc);
				$$('#slider .inner')[1].setStyle('width',new_width);
			}.bind(this)
		});
		
		$('playButton').addEvent('click',function(){
			$clear(this.periodicalSlider);
			if(this.moveBackwards == false) this.slider.set(0);
			this.periodicalSlider = this.autorun.periodical(this.options.speed,this);
		}.bind(this));
		
	},
	
	autorun	:	function(){
		if(! this.moveBackwards){
			if(this.slider.step+1 <= this.slider.options.steps){
				this.slider.set(this.slider.step+1);
			}
			else{
				 $clear(this.periodicalSlider);
				 this.moveBackwards = true;
			}
		}
		else{
			if(this.slider.step-1 >= 0){
				this.slider.set(this.slider.step-1);
			}
			else{
				 $clear(this.periodicalSlider);
				 this.moveBackwards = false;
			}
		}
	}
	
});