/*********************************************************************
 *
 *  </common/js/vslider.js>
 *
*********************************************************************/
(function($){ // start $ encapsulation

/**
 * $.fn.vSlider
 * jQuery interface for VSlider
 */
$.fn.vSlider = function(config){
	var defaults = {
		up: '.down a',
		down: '.up a',
		items: '.items',
		maxItemNum: 3
	};
	if(!$(defaults.up)[0]) return;
	VSlider($.extend(defaults,config,{
		container: this
	}));
	return this;
};

/**
 * VSlider
 * slider manager class
 */
var VSlider = function(config){
	
	var o = {};
	o.items = [];

	/**
	 * model
	 */
	var m = {};
	m.maxItemNum = config.maxItemNum;
	m.totalItemNum = 0;
	m.currentIndex = 0;

	/**
	 * view
	 */
	var v = {};
	v.init = function(){
		v.container = config.container;
		v.up = Button(v.container.find(config.up));
		v.down =Button(v.container.find(config.down));
		v.items = v.container.find(config.items)//.css('position','relative');
		v.ul = v.items.find('ul')//.css('position','absolute');
		v.up.click(o.toUp);
		v.down.click(o.toDown);
	};

	/**
	 * changeItemsDivHeight
	 */
	var changeItemsDivHeight = function(items){
		var totalHeight = 0;
		$.each(items, function(i,item){
			totalHeight += item.getHeight();
		});
		v.items.queue([]).animate({
			height: totalHeight+'px'
		},300);
	};
	
	/**
	 * slideUlUpper
	 */
	var slideUlUpper = function(distance){
		v.ul.queue([]).animate({
			marginTop: (Number(v.ul.css('margin-top').replace('px','')) - distance)+'px'
		},300);
	};

	/**
	 * slideUlLower
	 */
	var slideUlLower = function(distance){
		v.ul.queue([]).animate({
			marginTop: (Number(v.ul.css('margin-top').replace('px','')) + distance)+'px'
		},300);
	};

	/**
	 * toUp
	 */
	o.toUp = function(){
		if(v.ul.is(':animated')){ return; }
		if(!v.up.isOn){ return; }
		var itemsToShow = [];
		for(var i=0,l=m.maxItemNum; i<l; i++){
			itemsToShow.push(o.items[m.currentIndex+1+i]);
		}
		var itemToHide = o.items[m.currentIndex];
		var nextIndex = m.currentIndex+1;
		o.changeButtonStatus(nextIndex);
		changeItemsDivHeight(itemsToShow);
		slideUlUpper(itemToHide.getHeight());
		m.currentIndex++;
	};

	/**
	 * toDown
	 */
	o.toDown = function(){
		if(v.ul.is(':animated')){ return; }
		if(!v.down.isOn){ return; }
		var itemsToShow = [];
		for(var i=0,l=m.maxItemNum; i<l; i++){
			itemsToShow.push(o.items[m.currentIndex-1+i]);
		}
		var itemToHide = o.items[m.currentIndex-1];
		var nextIndex = m.currentIndex-1;
		o.changeButtonStatus(nextIndex);
		changeItemsDivHeight(itemsToShow);
		slideUlLower(itemToHide.getHeight());
		m.currentIndex--;
	};

	/**
	 * changeButtonStatus
	 */
	o.changeButtonStatus = function(nextIndex){
		var first = (nextIndex === 0);
		var finalIndex = o.items.length - m.maxItemNum;
		var last = (nextIndex === finalIndex);
		if(first){
			v.up.on();
			v.down.off();
		}else if(last){
			v.up.off();
			v.down.on();
		}else{
			v.up.on();
			v.down.on();
		}
	};

	/**
	 * constructor
	 */
	v.init();
	$.each(v.ul.find('li'), function(){
		var li = $(this);
		var item = Item(li);
		o.items.push(item);
	});
	if(o.items.length<=m.maxItemNum){
		v.up.css('cursor','default');
		v.down.css('cursor','default');
		return;
	}
	m.totalItemNum = o.items.length;
	var ulHeight = 0;
	for(var i=0,l=m.maxItemNum; i<l; i++){
		if(o.items[i]){
			ulHeight += o.items[i].getHeight();
		}
	}
	v.items.css('height',ulHeight);
	o.changeButtonStatus(0);
	
	return o;

};

/**
 * Item
 */
var Item = function(li){
	li.getHeight = function(){
		return li.innerHeight();
	};
	return li;
};

/**
 * Button
 */
var Button = function(anchor){
	var img = anchor.find('img');
	var srcOff = img.attr('src');
	var srcOn = srcOff.replace('disable.','enable.');
	new Image().src = srcOn; // preload
	anchor.isOn = false;
	anchor.off = function(){
		if(!anchor.isOn){ return; };
		anchor.css('cursor','default');
		img.attr('src',srcOff);
		anchor.isOn = false;
	};
	anchor.on = function(){
		if(anchor.isOn){ return; };
		anchor.css('cursor','pointer');
		img.attr('src',srcOn);
		anchor.isOn = true;
	};
	anchor.click(function(e){
		e.preventDefault();
	});
	return anchor;
};



})(jQuery); // end $ encapsulation