(function($) { 

	// static constructs
	$.component = $.component || {};
	
	$.component.scrollablepano = {
		version: '1.0.0',
		conf: {
			images: null,
			assetFolder: 'img/',
			image: '#loadedimg',
			captions: null,
			width: null,
			height: null,
			x: null,
			y: null,
			debug: null,
			color: null,
			size: null,
			href: null,
			interval: 3000,
			offset: null,
			controlsContainer: null
		} 
	};

	// constructor
	function ScrollablePano(root, conf){ 
		var self = this;
		var total = conf.images.length;
		var current = 0;
		var timerObj;
		var offset = root.offset();
		var panoXW = offset.left + root.width(); 
		var panoYH = offset.top + root.height();

		// methods
		$.extend(self, {
					  
			getCaption: function(i){ 
				return conf.captions[i];
			},
			getImages: function(i){
				return conf.images[i];
			},
			loadImage: function(src, name, fn){
				root.image(src,name,fn);
			},
			setCaption: function(parent, caption, index){
				parent.append('<div class="captionbox" id="objCaptions'+index+'">'+caption+'</div>');
			},
			animate: function(current,next,direction,total){
				$('#loadedimg'+ next).css({'left': (direction*conf.offset)+"px" }).css('z-index',$('#loadedimg'+current).css('z-index'));
				$('#objCaptions'+ next).css({'left': ((direction*conf.offset)+conf.x[next])+"px" }).css('z-index',$('#loadedimg'+current).css('z-index'));
				$('#loadedimg'+ next).animate({left:"0px"},{"duration":400,"easing":'swing'});
				$('#objCaptions'+ next).animate({left:(0+conf.x[next])+"px"},{"duration":400,"easing":'swing'});
				$('#loadedimg'+ current).animate({left:(-1*direction)*conf.offset + "px"},{"duration":400,"easing":'swing'});
				$('#objCaptions'+ current).animate({left: (((-1*direction)*conf.offset)+conf.x[current]) + "px"},{"duration":400,"easing":'swing'});
			},
			setClick: function(obj,linktext){
				if(linktext.length > 0){
					obj.css("cursor","pointer");
					obj.click(function(){window.location=linktext});
				}
			},
			setColor: function(obj,color){
				obj.css('color',color);
			},
			setDebug: function(obj,bool){
				if(bool) obj.css('border','1px solid yellow');
			},
			setHeight: function(obj,num){
				obj.css('height',num+'px');
			},
			setWidth: function(obj,num){
				obj.css('width',num+'px');
			},
			setX: function(obj,num){
				obj.css('left',num+'px');
			},
			setY: function(obj,num){
				obj.css('top',num+'px');
			},
			setZorder: function(obj,num){
				obj.css('z-index',num);
			},
			setSize: function(obj,num){
				obj.css('font-size',num+'px');
			},
			setNext: function(i,d,t){
				var index = i + d;
				if(index<0) index = total-1;
				else if(index==total) index = 0;
				return index;
			},
			getNext: function(dir){
				var next = self.setNext(current,dir,total);
				self.animate(current,next,dir,total);
				current = next;
			},
			bindButton: function(obj,dir){
				obj.bind('click', [dir], self.handleDirectionEvent );
			},
			unbindButton: function(obj){
				obj.bind('click', self.handleDirectionEvent );
			},
			addButtons: function(obj){
				obj.append('<button class="next" id="btnNext"></button><button class="prev" id="btnPrev"></button>');
			},
			fadeInButtons: function(){
				$('#btnNext').fadeIn('slow');
				//$('#btnPrev').fadeIn('slow',self.startTimer());
				$('#btnPrev').fadeIn('slow');
			},
			startTimer: function(){
				timerObj = $.timer(conf.interval,function(timer){self.onTimerEvent(timer)});
			},
			onTimerEvent: function(){
				self.getNext(-1);
			},
			stopTimer: function(){
				timerObj.stop();
			},
			resetTimer: function(){
				timerObj.reset(conf.interval);	
			},
			setHover: function(){
				root.hover(function(){
					self.stopTimer();
				}, function () {
					self.resetTimer();
				});
			},
			handleDirectionEvent: function(event){
				self.getNext(event.data[0]);
			}
		});
	
		//MAIN/////////////////////////////////////////////////////
			this.loadImage(conf.assetFolder+this.getImages(0),'loadedimg0',function(){});
			this.setZorder($('#loadedimg0'),(total-1));
			this.setClick($('#loadedimg0'),conf.href[0]);
			this.setCaption(root, this.getCaption(0), 0);
			this.setWidth($('#objCaptions0'),conf.width[0]);
			this.setHeight($('#objCaptions0'),conf.height[0]);
			this.setZorder($('#objCaptions0'),(total-1));
			this.setX($('#objCaptions0'),conf.x[0]);
			this.setY($('#objCaptions0'),conf.y[0]);
			this.setColor($('#objCaptions0'),conf.color[0]);
			this.setSize($('#objCaptions0'),conf.size[0]);
			this.setDebug($('#objCaptions0'),conf.debug[0]);
			
			$(window).load(function(){
				for(var i=total-1;i>=1;i--){
					self.loadImage(conf.assetFolder+self.getImages(i),'loadedimg'+i,function(){});
					self.setZorder($('#loadedimg'+i),((total-1)-i));
					self.setClick($('#loadedimg'+i), conf.href[i]);
					self.setCaption(root,self.getCaption(i),i);
					self.setX($('#objCaptions'+i),conf.x[i]);
					self.setY($('#objCaptions'+i),conf.y[i]);
					self.setWidth($('#objCaptions'+i),conf.width[i]);
					self.setHeight($('#objCaptions'+i),conf.height[i]);
					self.setZorder($('#objCaptions'+i),((total-1)-i));
					self.setColor($('#objCaptions'+i), conf.color[i]);
					self.setSize($('#objCaptions'+i), conf.size[i]);
					self.setDebug($('#objCaptions'+i), conf.debug[i]);
					if((total>1)&&(i==1)){
						self.addButtons(conf.controlsContainer);
						self.setZorder($('#btnNext'),total);
						self.setZorder($('#btnPrev'),total);
						self.bindButton($('#btnNext'),-1); 
						self.bindButton($('#btnPrev'),1);
						self.fadeInButtons();
						
						//GET OFFSET LOCATION OF ROOT
						$().mousemove(function(e){
							if( (e.pageX > offset.left) && (e.pageX <= panoXW) && (e.pageY > offset.top) && (e.pageY <= panoYH) ){
								if(timerObj){
									self.stopTimer();
								}
							}else{
								if(timerObj){
									self.resetTimer();
								}else{
									self.startTimer();
								}
							}
						}); 
						self.startTimer();
						self.setHover(root);
						
					}
					
				}
																							 
				
			});
		///////////////////////////////////////////////////////////
	}
	
	$.fn.scrollablepano = function(conf) {
		var inst;
		inst = new ScrollablePano($(this), conf);
		return inst; 		
	};
	
	$.fn.image = function(src, id, f){ 
		return this.each(function(){ 
			var i = new Image(); 
			i.src = src; 
			i.onload = f;
			i.id = id;
			this.appendChild(i);
		}); 
	}
		
	$.timer = function (interval, callback){
		var interval = interval || 100;
		if (!callback) return false;
		_timer = function (interval, callback) {
			this.stop = function () { clearInterval(self.id); };
			this.internalCallback = function () { callback(self); };
			this.reset = function (val) {
				if (self.id) clearInterval(self.id);
				var val = val || 100;
				this.id = setInterval(this.internalCallback, val);
			};
			this.interval = interval;
			this.id = setInterval(this.internalCallback, this.interval);
			var self = this;
		};
		return new _timer(interval, callback);
	};
	
})($);