// Home features
// add methods to TabbedSlideshow
TabbedSlideshow.addMethods({

	// sliding panel
	slidePanelLeft: function() {
	
		// next tab
		this.nextTab();
	
		// position each panel
		this.tabbed.tabs.each(function(tab) {
			tab.panel.setStyle({left:'0px'});
		});

		// define previous tab, position
		var previous_tab = this.tabbed.tabs[this.tabbed.tab_last];
		previous_tab.panel.setStyle({left:'0px'});
		
		// show the previous panel
		previous_tab.panel.show();
		
		// define the next tab
		var next_tab = this.tabbed.tabs[this.tabbed.tab_current];

		// if theres more than one tab
		if(this.tabbed.tabs_count>1) {		

			// position next tab panel
			next_tab.panel.setStyle({ left:'634px'});
			
			// move panels in parallel
			new Effect.Parallel([
				new Effect.Move(next_tab.panel, { sync:true, x: 1, y: 17, mode: 'absolute'}),
				new Effect.Move(previous_tab.panel, { sync:true, x: -634, y: 17, mode: 'absolute'})
				
			], { 
				duration: 0.8
			});
			
			// position and append arrow
			var tab_dimensions = next_tab.getDimensions();
			var tab_w = Math.floor(tab_dimensions.width*0.5)-7;
			tabs.arrow.setStyle({ left:tab_w+"px" });
			next_tab.appendChild(tabs.arrow);
		
		}

		// active class name
		this.tabbed.tabs.each(function(tab) {
			tab.removeClassName('active');	
		});
		next_tab.addClassName('active');
	
	},
	
	// replace startStatusCheck
	startStatusCheck: function() {
	
		// periodical executer
		this.executer = new PeriodicalExecuter(function() {
			
			// if the current tab slideshow has completed
			if(this.tabbed.tabs[this.tabbed.tab_current].slideshow.completed) {
			
				// set has looped
				this.has_looped = false;
			
				if(this.tabbed.tab_current==this.tabbed.tabs_count-1) {
					this.has_looped = true;
				} 

				// set slideshow completed to false
				this.tabbed.tabs[this.tabbed.tab_current].slideshow.completed = false;
				
				// move panel left and set status check
				this.slidePanelLeft();
				this.stopStatusCheck();
				
			}
			
		}.bind(this),this.tab_slide_duration);
			
	}

});

// DOM LOAD
document.observe('dom:loaded', function() {

	// define container
	var container = $('page-column-features');
	
	// create tabs container
	var tabs_container_element = Builder.node('div', { id:'tabs-container', className:'tabs' });
	container.insert( { top: tabs_container_element } );
	
	// define tabs container
	var tabs_container = $('tabs-container');

	// append tabs
	$$('.tab').each(function(tab) {
		tabs_container.appendChild(tab);
	});

	// remove deeplinking
	SWFAddress.setHistory(0);
	
	// new tabs
	tabs = new Tabs({container:'page-column-features'});
	
	// define tab width
	tabs.tab_width = Math.floor(635/tabs.tabs_count)-1;
	
	// build arrow
	tabs.arrow = Builder.node('img', { id:'arrow', src: '/images/public/features_arrow.png', style: 'width:15px; height:8px; position:absolute;top:-2px;left:0px;z-index:100;' });
	
	// set arrow on first tab
	if(tabs.tabs_count>1) {
		var tab_dimensions = tabs.tabs[0].getDimensions();
		var tab_w = Math.floor(tab_dimensions.width*0.75);
	} else {
		var tab_w = Math.floor(634/2);
	}
	tabs.arrow.setStyle({ left:tab_w+"px" });
	tabs.tabs[0].appendChild(tabs.arrow);
	tabs.tabs[0].addClassName('active');
	
	
	// create tabbed slideshow
	tabbed_slideshow = new TabbedSlideshow({
		tabbed_object: tabs
	});
	
	// each tab
	tabbed_slideshow.tabbed.tabs.each(function(tab) {
	
		// position tab
		tab.setStyle({width: tabs.tab_width+'px'});
				
		// on click
		Event.observe(tab,'click', function() {
		
			// position panel
			tab.panel.setStyle({left:'0px'});
			
			// remove all active classes
			tabbed_slideshow.tabbed.tabs.each(function(tab) {
				tab.removeClassName('active');	
			});
			
			//add active class
			tab.addClassName('active');
	
			// make the panel appear
			tab.panel.hide();
			Effect.Appear(tab.panel,{duration:0.5});
				
			// position and append arrow
			var tab_dimensions = tab.getDimensions();
			var tab_w = Math.floor(tab_dimensions.width*0.5)-7;
			tabs.arrow.setStyle({ left:tab_w+"px" });
			tab.appendChild(tabs.arrow);
					
		});
	
	});
	
	
	
});