/**
 * @author bjarte
 */

timer = true;

(function($){
	// Create constructor
	ConcertScroll = new function(){}
	
	jQuery.extend(ConcertScroll,{
	
		_width : 480
		, _height: 4
		, _border : {
			height: 0
			, width: 0
		}
		, _inbound : {
			height: 0
			, width: 0
		} 
		, _step : 70
		, _ready : true
		, test : function() { alert('test');}
		, _count : 0
		, _autotoggle: true
		, _timer : 5000
		
		
		, init : function() { 
			var _self = this;
				$(".concert-teaser").each(function(){
				_self.instance(this);
				_self.toggle(this);
			
				
				$(this).mouseover(function(){
					timer = false;
					_self._autotoggle = false;
					
				});
				
				$(this).mouseout(function(){
					
					timer = true;
					x = setTimeout(function(){ 
						_self._autotoggle = true
					}, 5000);
				});
				
			});
		$(".concert-teaser-scroll-link").each(function(){				
				$(this).mouseenter(function(){
					timer = false;
				});
				
			//	$(this).mouseleave(function(){
			//		x = setTimeout(function(){
			//			timer = true;
			//		}, 5000);
			//		alert(timer);
			//	});
				
			});
		}
		
	/**
		 * I start the instance and I should create a unique pool of data for each instance
		 * @param {Object} o
		 */
		, instance : function(o) {
			var _self = this;
			
			var ul = $(o).find(".concert-teaser-scroll ul");
			$(0).find('.concert-teaser-info').css({ opacity : 0.7 })
			
			this._border['height'] =  $(o).find(".concert-teaser-scroll").height();
			this._border['width'] =  $(o).find(".concert-teaser-scroll").width();
			
			this._inbound['height'] = ul.height();
			this._inbound['width'] =  ul.width();
			
			$(o).find(".concert-teaser-image ul").width( ul.find(">li").length * this._width );

			$(o).find('.concert-teaser-scroll-up').click(function(){
				
				var pTop = ul[0].offsetTop;
				if (_self._ready & pTop <= 0) {
					_self._ready = false;
					ul.animate({
						top: "+=" + ( pTop < 0 & (-pTop) > _self._step ? _self._step : -(pTop)  )
					}, 300,function(){
						_self._ready = true;
					});
				}
			});

			$(o).find('.concert-teaser-scroll-down').click(function(){
				var pBottom = _self._inbound['height'] + (ul[0].offsetTop - _self._border['height']);
				if (_self._ready & pBottom >= 0) {
					_self._ready = false;
					ul.animate({
						top: "-=" + (pBottom < _self._step ? pBottom : _self._step )
					}, 300, function(){
						_self._ready = true;
					});
				}
			});
			
			
			// do the transparent stuff
			$(o).find('.concert-teaser-info').css({ opacity : 0.7 })
			
			// activate first list item
			$(o).find('.concert-teaser-scroll li:first')
				.addClass('concert-teaser-selected');
			
			$(o).find('.concert-teaser-scroll li').each(function(i){
				var __self = this;
								
				$(this).click(function(){

					// clean selected class	
					$(o).find('.concert-teaser-selected')
						.removeClass("concert-teaser-selected");

					// add selected class
					$(this).addClass('concert-teaser-selected')
				
					// reposition the list
					$(o).find('.concert-teaser-image ul')
						.fadeOut("fast",function(){
							$(this).css({
								left: -(_self._width * i)
							});
						})
						.fadeIn("fast");
					_self._autotoggle = false;	
					timer = false;
					// Timer start after 15 seconds
					x = setTimeout(function(){ 
						_self._autotoggle = true
						timer = true;
					}, 15000);
					
					return false;
				});

				// increase the count
				_self.count++
			});
		}
		/**
		 * I do the times toggle
		 * @param {Object} o
		 */
		, toggle: function(o){
			
			var _self = this;
			var list = $(o).find('.concert-teaser-scroll li');
		
				_self._timekey = setTimeout(function(){
					var selected = $(o).find('.concert-teaser-scroll li.concert-teaser-selected');
					if (timer) { 
						if (_self._autotoggle) {
							selected.removeClass('concert-teaser-selected');
							selected = selected.next();
							if (selected.length > 0) {
								selected.addClass('concert-teaser-selected');
							}
							else {
								selected = $(o).find('.concert-teaser-scroll li:first');
								selected.addClass('concert-teaser-selected');
							}
							
							$(o).find('.concert-teaser-image ul').fadeOut("fast", function(){
								$(this).css({
									left: -(_self._width * $.inArray(selected[0], list))
								});
							}).fadeIn("fast");
							
						}
					}
					_self.toggle(o);
				}, _self._timer);
			}
			
		
	
	

	   , wait: function(option, options) {
	        milli = 1000; 
	        if (option && (typeof option == 'function' || isNaN(option)) ) { 
	            options = option;
	        } else if (option) { 
	            milli = option;
	        }
	        // set defaults
	        var defaults = {
	            msec: milli,
	            onEnd: options
	        },
	        settings = $.extend({},defaults, options);
	
	        if(typeof settings.onEnd == 'function') {
	            this.each(function() {
	                setTimeout(settings.onEnd, settings.msec);
	            });
	            return this;
	        } else {
	            return this.queue('fx',
	            function() {
	                var self = this;
	                setTimeout(function() { $.dequeue(self); },settings.msec);
	            });
	        }
	
	    }
		
	});
	
	// make it available
	window.ConcertScroll = ConcertScroll;
	
})(jQuery)