// 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: 	8000
		}, options || {});
		
		this.el = $(element);
		this.elid = element;
		this.el.setStyle('width', this.options.width + 'px');
		this.skipInit = false;
		
		
		
		this.loading = new Element('div', {
			'id': this.elid + '_footer'
		});
		this.loading.setHTML('Cargando panorama...');
		this.loading.injectInside(this.el);
		
		this.picturename = this.el.getProperty('alt');
		if(this.options.caption == '')
		{
			this.options.caption = this.picturename;
		}
		
		this.area = Math.floor(this.options.width / 2) - 20;
		
		
		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.loading.remove();
			
			
			this.outter = new Element('div', {
				'id': this.elid + '_outter',
				'styles': {
					'width' : this.options.width + 'px',
					'height': this.imageHeight + 'px',
					'position': 'relative',
					'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.footer = new Element('div', {
			//   'id': this.elid + '_footer',
			//   'styles': {
			//   	'width' : this.options.width + 'px',
			//   	'height': '70px',
			//   	'background-color': this.options.footercolor
			//   }
			//});
			//
			//this.caption = new Element('div', {
			//   'id': this.elid + '_caption',
			//   'styles': {
			//   	'float': 'left',
			//   	'padding-left': '5px',
			//   	'color' : this.options.captioncolor,
			//   	'font-family': "Trebuchet MS",
			//   	'font-size': '13px'
			//   }
			//});
			//this.caption.setHTML(this.options.caption);
			//
			//this.thumb = new Element('div', {
			//   'id': this.elid + '_thumb',
			//   'styles': {
			//   	'float': 'right',
			//   	'margin-right': '8px',
			//   	'margin-top': '10px',
			//   	'height': this.imageHeight / this.ratio +'px',
			//   	'width': '200px',
			//   	'text-align': 'left',
			//   	'border': '2px solid #fff',
			//   	'cursor': 'pointer'
			//   },
			//   'title': 'Click to move the frame!'
			//});
			
			if(window.ie)
			{
				this.ieheightadjust = 0;
			}
			else
			{
				this.ieheightadjust = 5;
			}
			
			//this.frame = new Element('div', {
			//	'id': this.elid + '_frame',
			//	'styles': {
			//		'height': (this.imageHeight / this.ratio) +'px',
			//		'width': this.options.width / this.ratio + 'px',
			//		'position': 'relative',
			//		'top': '-' + (this.imageHeight / this.ratio + this.ieheightadjust) +'px',
			//		'left' : '0px',
			//		'border': '1px dashed blue',
			//		'background-color': 'lightblue',
			//		'cursor': 'move',
			//		'z-index': '1000',
			//		'opacity': '0.4',
			//		'-moz-opacity': '0.4',
			//		'filter': 'alpha(opacity=40)'
			//	},
			//	'title': 'Drag me to move the panorama!'
			//});
			//
			
			this.scrollLeft = new Element('div', {
				'id': this.elid + '_scrollLeft',
				'styles': {
					'float': 'left',
					'height': this.imageHeight + 'px',
					'width': '40px',
					'position': 'relative',
					'background-color': 'lightblue',
					'opacity': '0.2',
					'-moz-opacity': '0.2',
					'filter': 'alpha(opacity=20)',
					'top': '-' + this.imageHeight + 'px',
					'background-image': 'url(_img/arrow_left.png)',
					'background-repeat': 'no-repeat',
					'background-position': 'center center'
				},
				'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': '40px',
					'position': 'relative',
					'background-color': 'lightblue',
					'opacity': '0.2',
					'-moz-opacity': '0.2',
					'filter': 'alpha(opacity=20)',
					'top': '-' + this.imageHeight + 'px',
					'background-image': 'url(_img/arrow_right.png)',
					'background-repeat': 'no-repeat',
					'background-position': 'center center'
				},
				'events': {
					'mouseover': this.moveEast.bind(this),
					'mouseout': this.stopMove.bind(this)
				}
			});
			this.halfFrame = (this.options.width / this.ratio) / 2;
			
			this.image.setProperty('width', 200);
			this.image.setProperty('height', this.imageHeight / this.ratio);
			this.image.setStyle('left', '0px');
			
			//Inject everything
			this.outter.injectInside(this.el);
			this.inner.injectInside(this.outter);
			//this.footer.injectInside(this.el);
			//this.caption.injectInside(this.footer);
			
			this.scrollLeft.injectInside(this.outter);
			this.scrollRight.injectInside(this.outter);
			

			//this.thumb.injectInside(this.footer);
			
			//this.image.injectInside(this.thumb);
			//this.frame.injectInside(this.thumb);
			
			
			// reset the scroll
			this.outter.scrollTo(0, 0);
			
		
			//do the scrollthing!
			if(this.options.activateSlider)
			{
				this.scroll = new Scroller(this.outter, {area: this.area, velocity: 0.3, onChange:function(x, y) {
					newleft = (x / this.ratio);
					
					
					testx = (x * -1) * 2;
					console.log(testx);
					this.inner.setStyle('left', testx);
					
					if(x <= 0)
					{
						this.frame.setStyle('left', 0);
					}
					else if(x >= this.imageWidth)
					{
						this.frame.setStyle('left', 200 - this.frame.getStyle('width').toInt());
					}
					else
					{
						if( (newleft >= 0) && (newleft < 200 - this.frame.getStyle('width').toInt()) ) 
						{
							this.frame.setStyle('left', newleft);
							
						}
					}
				}.bind(this)});
				
				this.outter.addEvent('mouseover', this.scroll.start.bind(this.scroll));
				this.outter.addEvent('mouseout', this.scroll.stop.bind(this.scroll));
			}
			
			
			
			this.skipInit = true;
		}
		
	},
	

	
	createDraggable: function() {
		this.dragHandle = this.frame.makeDraggable({
				modifiers: {x : 'left', y : false}, 
				limit: {x : [0, 200 - this.frame.getStyle('width').toInt() ]}, 
				onDrag: function() {
					frameleft = this.frame.getStyle('left').toInt();
					newscroll = frameleft * this.ratio;
					
					this.outter.scrollTo(newscroll, 0);
					
				}.bind(this)
		});
	},
		
	
	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();
		if(currentLeft < 0)
		{
			newleft = currentLeft + 5;
		}
		else
		{
			newleft = (this.imageWidth * -1);
		}
		this.inner.setStyle('left', newleft);
	},
	
	
	stopMove: function() {
		$clear(this.timer);
	}
	
});