var WdViewport = new Class
({
	Implements: [ Options ],
	
	options:
	{
		padding: 10,
		adjustHeight: false,
		startPosition: 0,
		browse: 'before'
	},
	
	initialize: function(el, options)
	{
		this.setOptions(options);
		this.element = $(el);
		
		this.view = new Element
		(
			'div',
			{
				'styles':
				{
					position: 'absolute',
					top: 0,
					left: 0
				}
			}
		);
		
		this.children = this.element.getChildren();
		
		this.view.adopt(this.children);
		this.view.inject(this.element);
		this.view.set('tween', { property: 'left' });
		
		if (this.options.adjustHeight)
		{
			this.adjustHeightFx = new Fx.Tween(this.element, { property: 'height', transition: 'bounce:out' } );
		}
		
		//
		// normalize children width
		//
		
		this.count = this.children.length;
		this.position = this.options.startPosition;
		
		/*
		 * `rolling` is set to true when the viewport rolling is started.
		 */
		
		this.rolling = false;
		
		this.offsets = [];
		this.heights = [];
		
		var offset = 0;
		var totalWidth = 0;
		var height = 0;
		
		this.children.each
		(
			function(el)
			{
				var size = el.getSize();
				var w = size.x + this.options.padding/* + el.getStyle('margin-left').toInt() + el.getStyle('margin-right').toInt()*/;
				
				this.offsets.push(offset);
				this.heights.push(size.y);
				
				el.setStyles
				(
					{
						'position': 'absolute',
						'top': 0,
						'left': -offset
					}
				);
				
				offset -= w;
				totalWidth += w;
				height = Math.max(height, size.y);				
			},
			
			this
		);
		
		var w = this.element.getSize().x;
		
		this.fitting = (totalWidth / w).round();
		
		
		
		this.element.setStyles
		({
			'overflow': 'hidden',
			'position': 'relative',
			'height': height
		});
		
		this.view.setStyle('width', totalWidth);
		
		if (this.adjustHeightFx)
		{
			this.adjustHeightFx.start(this.heights[this.position]);
		}
		
		this.element.addEvent
		(
			'mouseenter', this.pause.bind(this)
		);
		
		this.element.addEvent
		(
			'mouseleave', this.resume.bind(this)
		);
		
		this.setBrowse(this.options.browse);
	},
	
	start: function()
	{
		this.rolling = true;
		this.resume();
	},
	
	stop: function()
	{
		this.pause();
		this.rolling = false;
	},
	
	pause: function()
	{
		if (!this.rolling)
		{
			return;
		}
		
		if (this.timer)
		{
			$clear(this.timer);
			
			this.timer = null;
		}
	},
	
	resume: function()
	{
		if (!this.rolling)
		{
			return;
		}
		
		this.timer = ( function() { this.setPosition(this.position + 1); } ).periodical(this.options.delay, this);
	},
	
	setPosition: function(position)
	{
		var count = this.count;
		
		count -= count - this.fitting;
		
		if (position >= count)
		{
			position = 0;
		}
		else if (position < 0)
		{
			position = count - 1; 
		}
		
		this.position = position;
		
		if (this.browse)
		{
			var handles = this.browse.getChildren();
			
			handles.removeClass('active');
			handles[position].addClass('active');
		}
				
		this.view.get('tween').start(this.offsets[position]);
		
		if (this.adjustHeightFx)
		{
			this.adjustHeightFx.start(this.heights[position]);
		}
	},
	
	setBrowse: function(mode)
	{
		if (mode != 'before')
		{
			return;
		}
		
		var handles = [];
		
		this.children.each
		(
			function(el, i)
			{
				var title = el.getElement('.view-title');
				
				if (title)
				{
					title = title.get('html');
				}
				
				var handle = new Element
				(
					'li',
					{
						html: title,
						title: title,
						
						events:
						{
							'click': function(ev)
							{
								this.setPosition(i);
							}
							.bind(this),
							
							'mouseenter': this.pause.bind(this),
							'mouseleave': this.resume.bind(this)
						}
					}
				);
				
				if (i == 0)
				{
					handle.addClass('active');
				}
				
				handles.push(handle);
			},
			
			this
		);
		
		this.browse = new Element('ul', { 'class': 'viewport-browse' } ).adopt(handles);
		this.browse.inject(this.element, 'before');
	}	
});