/**
 * tabbox
 *
 * @version      1.0
 * @author       msdf
 * @license      The MIT License
 *
 */
 
jQuery.fn.tabbox = function(options){
	// options
	var options = jQuery.extend({
		tabId: ["tab1", "tab2"],
		boxId: ["box1", "box2"],
		currentTabId: "tab1",
		hoverSuffix: "_over",
		currentSuffix: "_current",
		speed: 150
	}, options);

	//implement indexOf
	if(! Array.indexOf) {
	  Array.prototype.indexOf = function(o)
	  {
	    for(var i in this) {
	      if(this[i] == o) {
	        return i;
	      }
	    }
	    return -1;
	  }
	}
	
	// prepare elements
	var $this = jQuery(this);

	var tabId = options.tabId;
	var boxId_obj = options.boxId;
	var currentTabId = options.currentTabId;
	var currentTabIndex = tabId.indexOf(currentTabId);
	
	var hoverSuffix = options.hoverSuffix;
	var currentSuffix = options.currentSuffix;
	var speed = options.speed;
	
	var $tab_obj = [];
	var default_obj = [];
	var hover_obj = [];
	var current_obj = [];

	for(i = 0; i < tabId.length; i++) {
		$tab_obj.push(jQuery("#" + tabId[i] + " img"));
		default_obj.push($tab_obj[i].attr("src"));
		hover_obj.push($tab_obj[i].attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+hoverSuffix+"$2"));
		current_obj.push($tab_obj[i].attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+currentSuffix+"$2"));
	}

	// init
	function init() {

		// set background
		jQuery("li", $this).each(function(){
			var imgHover = jQuery("img", this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+hoverSuffix+"$2");
			jQuery(this).css("background-image", "url('"+imgHover+"')");
		});

		// set default
		changeBox(currentTabIndex);

	}

	// changeBox
	function changeBox(num){
		for(i = 0; i < tabId.length; i++) {
			if(i == num) {
				jQuery($tab_obj[i]).attr("src", current_obj[i]);
				jQuery("#" + boxId_obj[i]).css("display","block");
				var paneNum = i + 1;
				jQuery("#pane" + String(paneNum)).jScrollPane({showArrows:true, scrollbarWidth: 16});
			} else {
				jQuery($tab_obj[i]).attr("src", default_obj[i]);
				jQuery("#" + boxId_obj[i]).css("display","none");
			}
		}
	}

	// mouse action
	jQuery("img", $this).hover(function() {
		jQuery(this).stop().animate({opacity: 0},speed);
	},function(){
		jQuery(this).stop().animate({opacity: 1},speed);
 	});

	// click event
	$tab_obj[0].click(function(){
		changeBox(0);
	});
	
	$tab_obj[1].click(function(){
		changeBox(1);
	});
	
	// do init
	init();
	
	return this;
}