/**
 * jquery.scrollable 0.11. Making HTML elements scroll.
 * 
 * http://flowplayer.org/tools/scrollable.html
 *
 * Copyright (c) 2008 Tero Piirainen (tero@flowplayer.org)
 *
 * Released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * >> Basically you can do anything you want but leave this header as is <<
 *
 * Since  : 0.01 - 03/01/2008
 * Version: 0.11 - 05/29/2008
 */
(function($) {
		
	// plugin initialization
	$.fn.extend({
		scrollable: function(arg1, arg2, arg3) { 
			
			return this.each(function() {
				if (typeof arg1 == "string") {
					var el = $.data(this, "scrollable");
					el[arg1].apply(el, [arg2, arg3]);
					
				} else { 
					new $.scrollable(this, arg1, arg2);
				}
			});
		}		
	});
		
	// constructor
	$.scrollable = function(el, opts) {   
		// store this instance
		$.data(el, "scrollable", this);
		this.init(el, opts); 
	};
	
	
	// methods
	$.extend($.scrollable.prototype, { 
			
		init: function(el, config)  {
			 
			// current instance
			var self = this;  
			
			var opts = {								
				size: 5,
				horizontal:false,				
				activeClass:'active',
				notActiveClass:'destPic',
				speed: 1000,
				onSeek: null,
				// jquery selectors
				items: '.items',
				prev:'.prev',
				next:'.next',
				navi:'.navi',
				naviItem:'span'
			}; 
	
			this.opts = $.extend(opts, config); 			
			// root / itemRoot
			var root = this.root = $(el);			
			var itemRoot = $(opts.items, root);			
			if (!itemRoot.length) itemRoot = root;			
				
			// wrap itemRoot.children() inside container
			itemRoot.css({position:'relative', overflow:'hidden', visibility:'visible'});
			itemRoot.children().wrapAll('<div class="__scrollable" style="position:absolute"/>');
			
			this.wrap = itemRoot.children(":first");
			this.wrap.css(opts.horizontal ? "width" : "height", "200000em").after('<br clear="all"/>');			
			this.items = this.wrap.children();
			this.index = 0;
     		// mousewheel
			if ($.isFunction($.fn.mousewheel)) { 
				root.bind("mousewheel.scrollable", function(event, delta)  { 
					self.move(-delta, 50);
					
					return false;
				});
			} 
			
			// item.click()
			this.items.each(function(index, arg) {
				$(this).bind("mouseover.scrollable", function() {
					self.mouseover(index);
				});
			});

			this.activeIndex = 0;
					
		},
		mouseover: function(index) {
			var item = this.items.eq(index);		
			var klass = this.opts.activeClass;
			var prvKlass = this.opts.notActiveClass;

			if (!item.hasClass(klass) && (index >= 0 || index < this.items.size())) { 
				
				this.items.children("img").eq(this.activeIndex).removeClass(klass);
				var prev = this.items.eq(this.activeIndex).removeClass(klass);
				this.items.eq(index).addClass(klass);
				this.items.eq(index).children("img").addClass(klass);
				//this.items.eq(index).switchClass(prvKlass, klass, 300);
				//this.items.eq(index).children("img").switchClass(prvKlass, klass, 300);
				this.seekTo(index - Math.floor(this.opts.size / 2));
				this.activeIndex = index;
			}  
		},
		
		// all other seeking functions depend on this generic seeking function		
		seekTo: function(index, time) {
			if (index < 0) index = 0;			
			index = Math.min(index, this.items.length - this.opts.size);			
			
			var item = this.items.eq(index);			
			if (item.size() == 0) return false; 			
			this.index = index;
			if (this.opts.horizontal) {
				var left = this.wrap.offset().left - item.offset().left;				
				this.wrap.stop();
				this.wrap.animate({left: left}, time || this.opts.speed);
				
			} else {
				
				var top = this.wrap.offset().top - item.offset().top;
				this.wrap.stop();
				this.wrap.animate({top: top}, time || this.opts.speed);							
			}
			// custom onSeek callback
			if ($.isFunction(this.opts.onSeek)) {
				this.opts.onSeek.call(this.getStatus());
			}
			// navi status update
			var navi = $(this.opts.navi, this.root);
			if (navi.length) {
				var klass = this.opts.activeClass;
				var page = Math.round(index / this.opts.size);
				navi.children().removeClass(klass).eq(page).addClass(klass);
			}
			
			
			return true; 
		},			
		move: function(offset, time) {
			this.seekTo(this.index + offset, time);
		}
		
	});  
	
})(jQuery);