// JavaScript Document
(function($) {
$.fn.accorbion = function(options){
	var defaults = {
		buttons:"",
		panelContainer:"panel"
	}
	
	var opts = $.extend(defaults, options);
	
	var base = this;
	var panelContainer = $('#'+opts.panelContainer);
	var panelWidth;
	
	var currentButton;
	
	__init();
	
	function __init(){
		base.append('<div id="buttons" />');
		if(opts.buttons){
			for(var index in opts.buttons){
				var html = '<div class="button inactive"><p>'+opts.buttons[index]+'</p></div>';
				$("#buttons").append(html);						
			}
			
			
			
			//position the buttons
			$("#buttons .button").each(function(i){
				
				var top = i*35;
				if(i == 0){
					currentButton = $(this);
					_activete(this);					
				}
				$(this).css({"top":top+"px"});
				
				//add event handlers to the button
				$(this).bind("click",function(e){
					handleClick(this,i);
				});
				
			});
			
			
			//wrap the panels
			
			panelContainer.wrap('<div id="canvas" />');
			panelContainer.children("div").addClass("panels");
			panelWidth = panelContainer.children(".panels").width()+25+6;
			panelContainer.css({
					   "position":"absolute",
					   "top":"0px",
					   "left":"0px",
					   "width":panelWidth*(opts.buttons.length+1)+"px"
					   });
			
		}
		
	}
	
	function handleClick(obj,index){
			_activete(obj);
			_slide(index);
	}
	
	
	
	function _activete(obj){
		currentButton.removeClass("active").addClass("inactive");
		$(obj).removeClass("inactive").addClass("active");
		$(obj).css({"zIndex":getNextHighestZindex()});
		currentButton = $(obj);
	}
	
	function _slide(index){
		panelContainer.animate({
							   	"left":"-"+(index*panelWidth)+"px"
							   },700,"easeOutBounce");
	}
	
};

})(jQuery);