// Pamoorama 0.3
// By: Jean-Nicolas Jolivet 
// www.silverscripting.com/pamoorama/
// Feel free to do whatever you want with the script! Give credits if you like it
// if you don't like it, don't use it ;)
var pamoorama = new Class({
	
	initialize: function(element, options) {
		this.options = Object.extend({
			activateSlider:		false,
			footercolor:		'#000',
			captioncolor:		'#fff',
			caption:			'',
			width:				600,
			enableAutoscroll:	true,
			autoscrollSpeed: 	10000
		}, options || {});
		
		this.el = $(element);
		this.elid = this.el.id;
		this.el.setStyle('width', this.options.width + 'px');
		this.skipInit = false;
	
		this.picturename = this.el.innerText;
		this.el.innerText = "";
		

		
		this.image = new Asset.image(this.picturename, {
			onload: this.continueInit.bind(this)
		});
		this.image.setStyles({'left': '-10000px', 'position': 'relative'});
		
		this.image.injectInside(document.body);
	
	},
	
	continueInit: function()
	{
		if(! this.skipInit)
		{
			
			this.imageWidth = this.image.getSize().size.x;
			this.imageHeight = this.image.getSize().size.y;
			this.ratio = this.imageWidth / 200;
			this.image.remove();
			
			
			this.outter = new Element('div', {
				'id': this.elid + '_outter',
				'styles': {
					'width' : this.options.width + 'px',
					'height': this.imageHeight + 'px',
					'overflow': 'hidden'
				}
			});
			
			this.inner = new Element('div', {
				'id': this.elid + '_inner',
				'styles' : {
					'width': this.imageWidth * 2 + 'px',
					'height': this.imageHeight + 'px',
					'background': 'transparent url(' + this.picturename + ') repeat-x top left',
					'position': 'relative',
					'left': '-' + this.imageWidth + 'px'
				}
			});
			
			this.scrollLeft = new Element('div', {
				'id': this.elid + '_scrollLeft',
				'styles': {
					'float': 'left',
					'height': this.imageHeight + 'px',
					'width': '150px',
					'position': 'relative',
					'top': '-' + this.imageHeight + 'px'
				},
				'events': {
					'mouseover': this.moveWest.bind(this),
					'mouseout': this.stopMove.bind(this)
				}
			});
			
			this.scrollRight = new Element('div', {
				'id': this.elid + '_scrollRight',
				'styles': {
					'float': 'right',
					'height': this.imageHeight + 'px',
					'width': '150px',
					'position': 'relative',
					'top': '-' + this.imageHeight + 'px'
				},
				'events': {
					'mouseover': this.moveEast.bind(this),
					'mouseout': this.stopMove.bind(this)
				}
			});

			
			//Inject everything
			this.outter.injectInside(this.el);
			this.inner.injectInside(this.outter);

			this.scrollLeft.injectInside(this.outter);
			this.scrollRight.injectInside(this.outter);

			// reset the scroll
			this.outter.scrollTo(0, 0);

			this.skipInit = true;
		}
		
	},
	
	moveEast: function() {
		this.timer = this.doMoveEast.periodical(20, this);

	},
	
	moveWest: function() {
		this.timer = this.doMoveWest.periodical(20, this);
	},
	doMoveEast: function() {
		
		currentLeft = this.inner.getStyle('left').toInt();
		//console.log(currentLeft);
		if(currentLeft * -1 >= ((this.imageWidth * 2) - this.options.width))
		{
			//newleft = (this.imageWidth * -1) + this.options.width;
		}
		else
		{
			newleft = currentLeft - 5;
			this.inner.setStyle('left', newleft);
		}
		
		
	},
	
	doMoveWest: function() {
		
		currentLeft = this.inner.getStyle('left').toInt();
		//console.log(currentLeft);
		if(currentLeft < -this.imageWidth)
		{
			newleft = currentLeft + 10;
			this.inner.setStyle('left', newleft);
		}
		else
		{
			//newleft = (this.imageWidth * -1);
		}
		
	},
	
	
	stopMove: function() {
		$clear(this.timer);
	}
	
});