/**
 * This file contains the JavaScript Class that extends the Tabs class to create animated sliding panels Widget
 *
 * This file contains a single JavaScript Class that provides the said 
 * functionality
 *
 * Language: JavaScript
 * Depenedancies: MooTools 1.2 Core
 *
 * @package    	autCompleter
 * @author     	ProjectMiso.net <email@projectmiso.net>
 * @version    	1.0
 * @since      	September 2007
 * @deprecated 	N/A
 * @license		Developed by ProjectMiso for ProjectMiso's internal use only. This widget may be used for developing websites
 *				for ProjectMiso's clients. In that event, ProjectMiso grants license to the client for life time use of the 
 *				widget in the said website developed by ProjectMiso. ProjectMiso DOES NOT GRANT the Client or client's future 
 *				development teams the right of distribution or the right to use this widget on other websites created by the client. 
 * @copyright	Author
*/

 
/**
 * Features
 *	-- All features in Tabs 
 *	-- Animate slide content
 *  -- Supply custom mootools transitions

*/

/**
 * Public Methods
 *	-- Same as Tabs class
*/

/**
 * Example 1: HTML Sample
 	<div class="mooSlider">
 		<ul class="Slides">
			<li class="Slide firstTab"> Slide 1 </li>
			<li class="Slide"> Slide 2 </li>
			<li class="Slide"> Slide 3 </li>
		</ul>
		<div class="panels">
			<div class="panel">	Panel 1 </div>
			<div class="panel"> Panel 2 </div>
			<div class="panel"> Panel 3 </div>
		</div>
	</div>
 
 * Example 2: JS Initiation
 * What you need -
	* CSS names for the main container (i.e.mooSlider )
	* CSS name for the tab container <ul> (i.e. Slides ) - any tag should work such as DIV or SPAN - make sure to style them properly
	* CSS name for the tabs <li> (i.e. Slide ) - any tag should work such as DIV or SPAN - make sure to style them properly 
			+ selected, first and last tab style
	* CSS name for the panel container (i.e. panels)
	* CSS name for the panels (i.e. panel)
	* Other option values that are not required
	* Now supply these details in an object to initiate the class. See below.
	
 * Initiation example

 	var mySlide = new slidingPanel({
		container: "mooSlider",			//REQUIRED - CSS class name for the main container
		tabs: "Slide",					//REQUIRED - CSS class name for the tabs
		selected: "selectedTab",		//REQUIRED - CSS class name for the selected tab
		first: "firstTab",				//REQUIRED - CSS class name for the first tab
		last: "lastTab",				//REQUIRED - CSS class name	for the last tab
		disabled: "disabledTab",		//Optional - CSS class name	for disabled tabs - if any
		panels: "panel",				//REQUIRED - CSS class name	for the panels
		defaultTab: 0,					//Optional - CSS class name for the default panel/tab
		width: 300,						//Optional - width of the widget
		height: 400,					//REQUIRED - fixed height of the panels
		onChange: function(index){ }	//Optional - function to execute when panels are changed
	});

*/

var slidingPanel = new Class({
    Extends: Tabs,
	options: {
		duration: 550,
		direction: "vertical",
		transition: Fx.Transitions.Expo.easeInOut
	},
    initialize: function(options){
        this.parent(options); //will call initalize of Animal
		
		this.renderSlides();
    },
	renderSlides: function(){
		var Tabs = this, i = 0;
		
		$$(this.container, this.panels).setStyle("height", this.height);
		this.panels.setStyle("display", "block");
		
		if (this.direction != "vertical"){
			this.panels.setStyle("float", "left");
			this.panelContianer.setStyle("width", this.width * this.panels.length + 100);
		}
		
		//this.select(this.defaultTab);
		
		//add the events
		this.tabs.addEvent("click", function(event){
			var e = new Event(event);
			var ajaxUrl = null;
			if (this.getProperty("rel")){
				ajaxUrl = this.getProperty("rel");
			}
			Tabs.select(this.index, ajaxUrl);
		});
	},
	select: function(tab){
		var Tabs = this;
		
		this.tabs.removeClass(this.selectedTabClass);
		this.tabs[tab].addClass(this.selectedTabClass);
		
		if (this.direction == "vertical"){
			var top = this.height * tab;
		} else {
			var left = this.width * tab;
		}
		
		this.Fx = new Fx.Tween(this.panelContianer, {
			duration: this.duration,
			transition: this.transition,
			link: 'cancel',
			onStart: function(){
				
			},
			onComplete:function(){
				//tab, this.tabs[tab], this.
				Tabs.onChange(tab, Tabs.tabs[tab], Tabs.panels[tab]);
			}
		});
		
		
		if (this.direction == "vertical"){
			this.Fx.start("top", -top);
		} else {
			this.Fx.start("left", -left);
		}
		
		this.selectedTab = tab;
	}
});