/*****************************************************
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * <http://www.gnu.org/licenses/>
 * 
 * Copyright 2007 Matthew Weltman <meweltman@yahoo.com>
 *
 *
 * options:
 * The third argument (much like many mootools plugins) are options, they are:
 * active_tab_class - The className of the active tab.
 * scroll_fx_duration - The duration of the scroll between tabs.  For no effect set to 0. Defaults to 500.
 * 
 * To create horizontal tabs:
 * orientation - set to 'horizontal'
 * tab_margin_left - The margin to the left of the left-most tab
 * tab_margin_right - The margin to the right of the right-most tab
 * 
 * To create vertical tabs (note: your tabs must have a set height):
 * orientation - set to 'vertical'
 * tab_margin_top - The margin to the left of the left-most tab
 * tab_margin_bottom - The margin to the right of the right-most tab
 * 
 * -silding tabs can reposition itself to the center of a container or window (see below).
 * to accomplish this you need to enable 3 options
 * container_reposition - set this to true
 * container - the container your tabs are in
 * outer_container - the container you want the tabs to center inside of.  To center in the window, set to 'window'
 * offset - The offset +/- where the container will be centered
 *
 */
var sliding_tabs = new Class({
	initialize:function(tabs, bodies, options){
		this.options = {
			active_tab_class: 'active_tab',
			tab_margin_left: '10px',
			tab_margin_right: '10px',
			tab_margin_top: '10px',
			tab_margin_bottom: '10px',
			scroll_fx_duration:500,
			event:'click',
			orientation:'horizontal',
			scroll_orientation:'vertical',
			//used for container repositioning
			container_reposition: false,
			container:null,
			offset:null,
			outer_container:null,
            initial_tab:0,
            classes:{
				tab_overflow:'tab_overflow',
				tab_container:'tab_container',
				tab_body_container:'tab_body_container'
			}
		}
		var classes = this.options.classes;
		$extend(classes,options.classes);
		$extend(this.options,options);
		this.options.classes=classes;
		if(this.options.orientation=='horizontal'){
			this.flow = 'left';
			this.side = 'right';
			this.dim = 'width';
			this.cart = 'x';
		}else{
			this.flow = 'top';
			this.side = 'bottom';
			this.dim = 'height';
			this.cart = 'y';
		}
		this.bodies = bodies;
		this.tabs = tabs;
		this.tabs.setStyles({
			'position':'relative',
			'float':this.flow
		});
	
		this.tab_overflow = new Element('div').setProperty('class',this.options.classes.tab_overflow);
		this.tab_overflow.injectBefore(this.tabs[0]);
	
		this.tab_container = new Element('div').setProperty('class',this.options.classes.tab_container);
		this.tab_container.injectInside(this.tab_overflow);
		
		this.tab_body_container = new Element('div').setProperty('class',this.options.classes.tab_body_container);
		this.tab_body_container.injectBefore(this.bodies[0]);
		if(this.options.orientation!='horizontal')
			this.tab_overflow.setStyle('float','left');
		
		this.bodies.each(function(el,i){
			el.injectInside(this.tab_body_container);
		}.bind(this));
		
		if(this.options.container_reposition){
			if(this.options.outer_container.toLowerCase() == 'window')
				this.outer_container_dim = this.options.scroll_orientation=='vertical'?Window.getSize().height:Window.getSize().width;
			else
				this.outer_container_dim = this.options.scroll_orientation=='vertical'?$(this.options.outer_container).getStyle('height').toInt():$(this.options.outer_container).getStyle('width').toInt();
			this.scroll_flow=this.options.scroll_orientation=='vertical'?'top':'left';
			this.container_fx = new Fx.Tween($(this.options.container),{link:'cancel'});
		}
		
		this.body_fx = new Fx.Scroll(this.tab_body_container,{link:'cancel',duration:this.options.scroll_fx_duration});
		
		this.tab_items = [];
		this.tabs_dim = 0;
		
		this.tabs.each(function(el,i){
			this.tabs_dim += el.getStyle(this.dim).toInt()
				+ el.getStyle('border-'+this.side+'-width').toInt()
				+ el.getStyle('border-'+this.flow+'-width').toInt()
				+ el.getStyle('margin-'+this.flow).toInt()
				+ el.getStyle('margin-'+this.side).toInt()
				+ el.getStyle('padding-'+this.flow).toInt()
				+ el.getStyle('padding-'+this.side).toInt()
			el.injectInside(this.tab_container);
			el.setStyle(this.flow,this.options['tab_margin_'+this.flow]);
			this.tab_items[i] = new tab_item(el,this.bodies[i],this);
		}.bind(this));
		
		this.tab_container.setStyle(this.dim,(this.tabs_dim+this.options['tab_margin_'+this.flow].toInt()+this.options['tab_margin_'+this.side].toInt())+'px');
		
		this.tab_fx = new Fx.Scroll(this.tab_overflow,{
			duration:300,
			link:'cancel',
			onComplete:function(){
				this.tab_overflow.addEvent('mousemove',this.mouse_move.bind(this));
			}.bind(this)
		});
		
		this.tab_overflow.addEvent('mouseenter',function(e){
			e = new Event(e).stop();
			if(this.options.orientation=='horizontal')
				this.tab_fx.start(this.get_position(e));
			else
				this.tab_fx.start(0,this.get_position(e));
		}.bind(this));
		
		this.tab_overflow.addEvent('mouseleave',function(){
			this.tab_overflow.removeEvents('mousemove');
		}.bind(this));
		
		this.active_item = this.tab_items[this.options.initial_tab];
		this.tabs[this.options.initial_tab].addClass(this.options.active_tab_class)
		this.tab_body_container.setStyle(this.tab_items[this.options.initial_tab].dim,this.tab_items[this.options.initial_tab].body_dim);
		this.body_event_fx = new Fx.Tween(this.tab_body_container,{duration:500,link:'cancel'});
        new Fx.Scroll(this.tab_body_container,{link:'cancel',duration:0}).toElement(this.tab_items[this.options.initial_tab].body);
        new Fx.Scroll(this.tab_overflow,{link:'cancel',duration:0}).toElement(this.tab_items[this.options.initial_tab].item);
	},
	mouse_move:function(e){
		e = new Event(e).stop();
		this.tab_fx.cancel();
		if(this.options.orientation=='horizontal')
			this.tab_overflow.scrollLeft = this.get_position(e);
		else
			this.tab_overflow.scrollTop = this.get_position(e);
	},
	get_position:function(e){
		var pos = this.tab_overflow.getPosition();
		var scroll = this.tab_overflow.getScroll();
		var scrollPos = Window.getScroll()[this.cart]+e.client[this.cart]-(pos[this.cart]+scroll[this.cart]);
		var position = scrollPos*(this.tab_container.getStyle(this.dim).toInt())/this.tab_overflow.getStyle(this.dim).toInt() - scrollPos;
		return position;
	}
});

var tab_item = new Class({
	initialize:function(item,body,tab_obj){
		this.item = item;
		this.body = body;
		this.tab_obj = tab_obj;
		this.dim=this.tab_obj.options.scroll_orientation=='vertical'?'height':'width';
		if(this.tab_obj.options.scroll_orientation=='vertical')
			this.body_dim =
				(
				this.body.getStyle('height').toInt()
				+ this.body.getStyle('border-bottom-width').toInt()
				+ this.body.getStyle('border-top-width').toInt()
				+ this.body.getStyle('margin-bottom').toInt()
				+ this.body.getStyle('margin-top').toInt()
				+ this.body.getStyle('padding-bottom').toInt()
				+ this.body.getStyle('padding-top').toInt()
				)+'px';
		else{
			this.body_dim =
				(
				this.body.getStyle('width').toInt()
				+ this.body.getStyle('border-right-width').toInt()
				+ this.body.getStyle('border-left-width').toInt()
				+ this.body.getStyle('margin-right').toInt()
				+ this.body.getStyle('margin-left').toInt()
				+ this.body.getStyle('padding-right').toInt()
				+ this.body.getStyle('padding-left').toInt()
				)+'px';
			this.body.setStyle('float','left');
		}
		
		this.item.addEvent(this.tab_obj.options.event,this.on_event.bind(this));
		
		this.container_flow = (
			this.tab_obj.outer_container_dim-
			this.body_dim.toInt()+
			this.tab_obj.options.offset
			)/2;
	},
	on_event:function(e){
		e = new Event(e).stop();
		if($defined(this.tab_obj.active_item))
    		this.tab_obj.active_item.item.removeClass(this.tab_obj.options.active_tab_class);
		this.item.addClass(this.tab_obj.options.active_tab_class);
		
		if(this.tab_obj.options.container_reposition){
			this.tab_obj.container_fx.start(this.tab_obj.scroll_flow,this.container_flow+'px');
		}
		this.tab_obj.body_event_fx.removeEvents('complete');
		this.tab_obj.body_event_fx.addEvent('complete',function(){
				this.tab_obj.body_fx.toElement(this.body);
				this.tab_obj.active_item = this;
			}.bind(this)
		);
		this.tab_obj.body_event_fx.start(this.dim,this.body_dim);
	}
});