/*#################################################

Tabbed Viewer | v1.2
Max Felker | max@bigroomstudios.com
Brian Leighton | brian@bigroomstudios.com

Tabbed image viewer with slider

#################################################*/

// START Class
var TabbedViewer = Class.create(Tabs,{

	initialize: function($super,config) {
		
		$super(config);
		
		// CONFIG
		config.direction ? this.direction = config.direction : this.direction = 'x';
		this.distance = config.distance;
		config.tabs_visible ? this.tabs_visible = config.tabs_visible : this.tabs_visible = 3;
		
		if(config.controls) {
			
			this.controls = { 
				next: $(config.controls.next),
				previous: $(config.controls.previous)
			}
			
			this.controls.next.observe('click',this.next_tab.bind(this));
			this.controls.previous.observe('click',this.previous_tab.bind(this));
			
		}
		
		this.tabs_wrapper = $(config.tabs_wrapper);
		this.tabs_container = $(config.tabs_container);
		
		if(this.direction=="y") {
			container_dimensions = "height:"+this.tabs_visible*this.distance+"px;";
		} else {
			container_dimensions = "width:"+this.tabs_visible*this.distance+"px;";
		}
		
		this.tabs_container.setStyle('overflow:hidden;'+container_dimensions);
		
		this.tabs.each(function(tab,index) {
	
			new_position = this.distance*index;
		
			tab.setStyle({position:'absolute'});
		
			if(this.direction=="y") {
				tab.setStyle({top:new_position+'px'});
			} else {
				tab.setStyle({left:new_position+'px'});
			}
			
			tab.setOpacity(0.7);
			
			tab.observe('click',function() {
										 
				this.tabs_current_index = tab.index-1;
						
				this.next_tab();		
	
			}.bind(this));
			
			tab.observe('mouseenter',function() {
											  
				if(this.tabs_current_index!=tab.index) {
						tab.setOpacity(1.0); 
				}
				
			}.bind(this));
			
			tab.observe('mouseleave',function() {
											  
				if(this.tabs_current_index!=tab.index) {
						tab.setOpacity(0.7); 
				}
				
			}.bind(this));
		
		}.bind(this));
		// END this.tabs.each
		
		this.current_tab.setOpacity(1.0);
		
		//this.tabs_current_index = 0;
		new Effect.Move(this.tabs_wrapper, { y: 0, x: 0, mode: 'absolute', duration:0.1 });
		
	}, // END init
	
	next_tab: function($super) {
		
		if(this.tabs_current_index<this.tabs_count-this.tabs_visible) {
			
			this.current_tab.setOpacity(0.7); 
	
			$super();
			
			this.current_tab.setOpacity(1.0); 
			
			this.current_tab.panel.hide();
			
			Effect.Appear(this.current_tab.panel,{duration:0.5});
	
			new_position = this.tabs_current_index*-this.distance;
		
			if(this.direction=="y") {
				new Effect.Move(this.tabs_wrapper, { y: new_position, x: 0, mode: 'absolute', duration:0.5 });
			} else {
				new Effect.Move(this.tabs_wrapper, { y: 0, x: new_position, mode: 'absolute', duration:0.5 });
			}
			
		} else {
		
			this.current_tab.setOpacity(0.7); 
	
			$super();
			
			this.current_tab.setOpacity(1.0); 
			
			this.current_tab.panel.hide();
			
			Effect.Appear(this.current_tab.panel,{duration:0.5});
			
			if(this.tabs_current_index==0) {
				new Effect.Move(this.tabs_wrapper, { y: 0, x: 0, mode: 'absolute', duration:0.5 });
			}
			
		}
		
		
	},
	
	previous_tab: function($super) {
		
		if(this.tabs_current_index>=this.tabs_count-(this.tabs_count-1)) {
		
			this.current_tab.setOpacity(0.7); 
	
			$super();
			
			this.current_tab.setOpacity(1.0); 
			
			this.current_tab.panel.hide();
			
			Effect.Appear(this.current_tab.panel,{duration:0.5});
		
			if(this.tabs_current_index<this.tabs_count-(this.tabs_visible-1)) {
				
				new_position = this.tabs_current_index*-this.distance;
	
				if(this.direction=="y") {
					new Effect.Move(this.tabs_wrapper, { y: new_position, x: 0, mode: 'absolute', duration:0.5 });
				} else {
					new Effect.Move(this.tabs_wrapper, { y: 0, x: new_position, mode: 'absolute', duration:0.5 });
				}
	
			}
			
		} else {
		
			this.current_tab.setOpacity(0.7); 
	
			$super();
			
			this.current_tab.setOpacity(1.0); 
		
			this.current_tab.panel.hide();
			
			Effect.Appear(this.current_tab.panel,{duration:0.5});
			
			if(this.tabs_current_index==this.tabs_count-1) {
				
				new_position = (this.tabs_count-this.tabs_visible)*-this.distance;
				
				if(this.direction=="y") {
					new Effect.Move(this.tabs_wrapper, { y: new_position, x: 0, mode: 'absolute', duration:0.5 });
				} else {
					new Effect.Move(this.tabs_wrapper, { y: 0, x: new_position, mode: 'absolute', duration:0.5 });
				}
			}	
		}
	}
});