Wd.Navigation = {};

Wd.Navigation.Hot = Options.extend
({
 
	options:
	{
		direction: 'left',
		speed: 'slow',
		action: Class.empty
	},
	
	timer: null,
	interval: 500,

	initialize: function(options)
	{
		this.setOptions(options);

		switch (this.options.speed)
		{
			case "fast": this.interval = 250; break;
			case "slow": this.interval = 1000; break;
		}

		// element
		
		el = new Element
		(
		 	'span', { 'class': this.options.speed }
		);
	
		// methods
			
		el.onmouseover = this.mouseEnter.bind(this);
		el.onmouseout = this.mouseLeave.bind(this);

		this.element = el;
	},
	
	mouseEnter: function()
	{
		this.timer = this.options.action.periodical(this.interval);
	},
	
	mouseLeave: function()
	{
		$clear(this.timer);
	} 
});

Wd.Navigation.Main = Options.extend
({
	options:
	{
		count: 0,
		
		onIncrease: Class.empty,
		onDecrease: Class.empty
	},

	initialize: function(options)
	{
		this.setOptions(options);
		
		//
		// left part
		//
		
		var left_fast = new Wd.Navigation.Hot
		(
			{
				direction: 'left',
				speed: 'fast',
				action: this.decrease.bind(this)
			}
		);
		
		var left_medium = new Wd.Navigation.Hot
		(
			{
				direction: 'left',
				speed: 'medium',
				action: this.decrease.bind(this)
			}
		);
		
		var left_slow = new Wd.Navigation.Hot
		(
			{
				direction: 'left',
				speed: 'slow',
				action: this.decrease.bind(this)
			}
		);
		
		var left_group = document.createElement("div");
		
		left_group.className = "left";	
		left_group.appendChild(left_fast.element);
		left_group.appendChild(left_medium.element);
		left_group.appendChild(left_slow.element);
		
		//
		// right part
		//

		var right_fast = new Wd.Navigation.Hot
		(
			{
				direction: 'right',
				speed: 'fast',
				action: this.increase.bind(this)
			}
		);
		
		var right_medium = new Wd.Navigation.Hot
		(
			{
				direction: 'right',
				speed: 'medium',
				action: this.increase.bind(this)
			}
		);
		
		var right_slow = new Wd.Navigation.Hot
		(
			{
				direction: 'right',
				speed: 'slow',
				action: this.increase.bind(this)
			}
		);
	
		var right_group = document.createElement("div");
		
		right_group.className = "right";
		right_group.appendChild(right_slow.element);
		right_group.appendChild(right_medium.element);
		right_group.appendChild(right_fast.element);
	
		//
		// cycler - left
		//
		
		var one_left = new Element
		(
		 	'span',
			{
				'class': 'decrease', 
				'events':
				{
					click: this.decrease.bind(this)
				}
			}
		);

		var one_right = new Element
		(
		 	'span',
			{
				'class': 'increase', 
				'events':
				{
					click: this.increase.bind(this)
				}
			}
		);
		
		//
		// cycler - pager
		//
	
		this.pager = new Element
		(
		 	'div', { 'class': 'pager' }
		);
	
		//
		// cycler
		//
	
		var cycler = new Element
		(
		 	'div', { 'class': 'cycler' }
		);
		
		cycler.appendChild(one_left);
		cycler.appendChild(one_right);
		cycler.appendChild(this.pager);
	
		//
		// navigation bar
		//
		
		this.element = new Element
		(
		 	'div', { 'class': 'navigation' }
		);
	
		var transition = new Fx.Style(this.element, 'opacity', { wait: false });
	
		transition.set(0.5);
	
		this.element.onmouseover = function()
		{
			transition.start(1);
		};
	
		this.element.onmouseout = function()
		{
			transition.start(0.5);
		};
	
		// append children
	
		this.element.appendChild(left_group);
		this.element.appendChild(cycler);
		this.element.appendChild(right_group);
	},
	
	setPosition: function(position)
	{
		this.pager.innerHTML = (position + 1) + '/' + this.options.count;
	},
	
	increase: function()
	{
		this.setPosition(this.options.onIncrease());
	},

	decrease: function()
	{
		this.setPosition(this.options.onDecrease());
	}
});