var home_banner = new Class({

	/* background images array */
  	_bgs: new Array(),
  	_current_bg:1, //change this to change the first image swap....

	/* Internal variables */
	_column_count:null,
	_column_widths: new Array(), //section column widths
	_active_column:-1, //the current column
	_column_names: new Array("festive","smoked","port","wines","occasions"),
	
	/* Element collections */
	_columns: null,
	
	
	/* Fx Definitions*/
	_fx_ajax_fade:null,
	_fx_column_slide:null,
	_fx_column_fade:null,
	_fx_link_hover:null,
	_fx_link_hide:null,
	_fx_section_desc:null,
	_fx_content_bg:null,
	_fx_show_content:null,
	_fx_mb:null,
	
	/* content height holders */
	_new_article_height:null,
	_old_article_height:null,
	
	/* fx command sets */
	_link_hover_commands: {},
	_section_hover_commands: {},
	_content_p_commands:{},
	
	/**
	* Initialise
	*/
	init: function(){
		
		//panes 
		this.paneInit();
		
		//background
		this.bgInit();
	},
	
	
	/***********************************************************
	* Pane methods
	***********************************************************/
	
	paneInit: function(){
	
		//declare widths
		this._column_widths.push(Array(358,172,172,172,112));
		this._column_widths.push(Array(172,358,172,172,112));
		this._column_widths.push(Array(152,172,358,172,132));
		this._column_widths.push(Array(172,172,172,358,112));
		this._column_widths.push(Array(142,162,152,162,368));
		
		
		
		//declare collections...
		this._columns      = $$('.content-col');
		this._links        = $$('.section-link');
		
		//declare trans
		this._fx_column_slide   = new Fx.Elements(this._columns, {wait: false, duration: 100,transition: Fx.Transitions.linear});
		this._fx_link_hover     = new Fx.Elements(this._links, {wait: false, duration: 100, transition: Fx.Transitions.linear});
		this._fx_link_hide      = new Fx.Elements(this._links, {wait: false, duration: 300, transition: Fx.Transitions.linear});
		this._fx_show_content   = new Fx.Elements(this._links, {wait: false, duration: 300, transition: Fx.Transitions.linear});
		
		//attach pane link actions
		this.paneLinkActions();
	},
	
	/* Do the scolling*/
	paneOpen: function(paneid){},
	
	/*Attach link clicks*/
	paneLinkActions:  function(){
  		
  		this._links.each(function(link,i){
  			
  			//assign mouseout function to each link
  			link.addEvent('mouseout', this.paneLinksReset.bind(this));
  			
  			//assign mouseover function
  			link.addEvent("mouseover", this.paneLinkOver.bind(this).pass(i));
  			
  			//assign click function
  			link.addEvent("click", function(event) { 
  					
  					//stop the regular link activating
  					new Event(event).stop();		
  						
  					//execute the actions for a link click.				
  					this.paneLinkClick(i); 
  					this.paneLinkOver(i);
  					
  				}.bind(this)
  			);
  			
  			
	  		
  		},this);
  	},
  	
  	
  	/* Hover the active link*/
  	paneLinkOver: function(active){
  		
	
		//reset the fx command sets
		this._link_hover_commands    = {};
		this._section_hover_commands = {};
		//console.log(this._active_column + " --- " + active);
		if(this._active_column != active) {
		//set the commands for the active element
			this._link_hover_commands[active]     = {top:352};
			this._section_hover_commands[active]  = {opacity:0.75 , backgroundColor:'#000',top:352,height:96};
		}else{
				this._link_hover_commands[active]     = {top:0};
				this._section_hover_commands[active]  = {top:0};
		
		}
		this._links.each(function(other,j) {
			//ignore the active element
			
			if(active != j) {
				
				this._link_hover_commands[j]  = {top:373};
				this._section_hover_commands[j]  = {opacity: 0, top:373};
				
			}
			
			if(j == this._active_column) {
				this._link_hover_commands[j]  = {top:0};
				this._section_hover_commands[j]  = { top:0};
			}
			
		},this);
		
		//set the hover positions to focus the hovered link
		this._fx_link_hover.start(this._link_hover_commands);
	
				
  	},
  	  	
  	/**
  	* reset the links to their reset positions
  	**/
  	paneLinksReset: function(){
  		//cleanse fx lists
 		this._link_hover_commands    = {};
		this._section_hover_commands = {};
		
		//for each link
		this._links.each(function(link,j){
			//set the commands
			
			if(this._active_column != j) {
				this._link_hover_commands[j]  = {top:373};
				this._section_hover_commands[j]  = {opacity: 0, top:373};
			}
		},this);
		
		//start the animation
		this._fx_link_hover.start(this._link_hover_commands);		
		
		
  	},
  	
  	/**
  	*	Triggers for the clicking of a section link
  	**/
  	paneLinkClick: function(active){
  		
  		//set the active column
  		this._active_column = active;
  		
  		//onpen the pane
  		this.paneAnimate(active);//.chain(////////////console.log('pane animation complete'));
  				
  	},
  	
	paneAnimate: function(pane){
  		
  		//hide all the content
  		$$(".content-col-content").setStyle("display","none");
  		//reset animation commands
  		this._column_commands = {};
		this._link_commands  = {};
		
		var w_from = this._columns[pane].getStyle("width").toInt();
		var w_to   = this._column_widths[pane][pane];
		
		//set params for the active pane
		this._column_commands[pane] = {width: [w_from, w_to]}
			
		//set params for the active panes link and fade
			
		if(this._links[pane]){
		//	this._links[pane].setStyle('position','absolute');
			
		}
			
		//set animation for non active panes
		this._links.each(function(other,j) {
				if(pane != j) {
					//effects for the unselected item
					var w = other.getStyle("width").toInt();
					//console.log("WIDTH OF " + j + " IS " + w);
					if(w != this._column_widths[pane][j]) this._column_commands[j] = {width: [w, this._column_widths[pane][j]]};
					if(w = 0){
						this._columns[j].setStyle('display','none');
						
					}else{
						this._columns[j].setStyle('display','block');
						this._link_commands[j]  = {opacity: 1};
					}
					this._links[j].setStyle('position','relative');
					if(!window.ie6){
							other.setStyle("background", "transparent url(./images/banner/links/" + this._column_names[j] + ".png) no-repeat scroll center");
					}else{
						other.setStyle("background", "transparent url(./ie6/images/banner/links/" + this._column_names[j] + ".jpg) no-repeat scroll center");
					}
				}else{
					//this._column_commands[j] = {width: [w, this._column_widths[pane+1][j]]};
					//this._ajax_commands[j]  = {opacity: 0.5,width:this._column_widths[pane+1][j]};
					//console.log("url(./images/banner/links/" + this._column_names[pane +1] + "-active.png)");
					if(!window.ie6){
							other.setStyle("background", "transparent url(./images/banner/links/" + this._column_names[pane] + "-active.png) no-repeat scroll left");
					}else{
							other.setStyle("background", "transparent url(./ie6/images/banner/links/" + this._column_names[pane] + "-active.jpg) no-repeat scroll left");
					}
					
				}
				
			},this);
			
			//begin the animation
			//console.log(this._column_commands);
			this._fx_column_slide.start(this._column_commands);
			$$("#section-link-" + (pane + 1)).setStyle("top","0px");
			$$("#content-col-" + (pane + 1) + " .content-col-content").setStyle("display","block");
			this.active =pane;
			return true;
			
		
				  	
  	},
	/***********************************************************
	* Background methods
	***********************************************************/
	
	
	bgInit: function(){
		
		//push the file paths into the array
  		this._bgs.push("./images/banner/backgrounds/1.jpg");
  		this._bgs.push("./images/banner/backgrounds/2.jpg");
  		this._bgs.push("./images/banner/backgrounds/3.jpg");
  		this._bgs.push("./images/banner/backgrounds/4.jpg");
  		this._bgs.push("./images/banner/backgrounds/5.jpg");
  		this._bgs.push("./images/banner/backgrounds/6.jpg");
  		this._bgs.push("./images/banner/backgrounds/7.jpg");
		
		//init preloading
		this.bgPreload();
		
		//declare trans
		this._fx_content_bg     = new Fx.Styles('content-background', {fps: 60,wait: false, duration:1300,transition: Fx.Transitions.linear});
		this._fx_white_bg       = new Fx.Styles('content-background-white', {fps: 60,wait: false, duration:1300,transition: Fx.Transitions.linear});
	
		
		//start slide show monitor
		this.bgSlideShow.periodical(10000,this);
	},
	
	/**
  	* PRELOAD ALL THE IMAGES IN THE BACKGROUNDS ARRAY
  	**/
  	bgPreload: function(){
  		
  		this._bgs.each(function(section,i){
  			new Asset.images(section);
  			
  		}, this);
  	
  	},
  	
  	
  	/**
  	* perodically change the background image
  	**/
  	bgSlideShow: function(){
  	
  		//console.log("bgSlideShow");
  	
  		//check current number is in valid range, if not reset to 0
		if(this._current_bg > 7 || !this._current_bg){ this._current_bg = 0;};
	
		//ensure we have a bg
		if(!this._bgs[this._current_bg]){
			this._current_bg = 0;
		}
	
		//call the change command
		this.bgChange(this._bgs[this._current_bg]);
		
		//increment for the next round	
		this._current_bg++;
  		
  	},
  	
  	/**
  	*  changes the background image
  	**/
  	bgChange: function(path){
  		//console.log("CHANGING BG TO: " + path);
  		
  		//change the background if needed
		if($('content-background').getStyle('background-image') != 'url(' + path +')'){
			
			//swap the background to the wipe, before fading
			$('content-background-white').setStyle('background-image',$('content-background').getStyle('background-image'));
			
			$('content-background').setStyle('opacity','0');
			
			$('content-background-white').setStyle('opacity','1');
			
			//set the background to the new image since its covered
			$('content-background').setStyle('background-image','url('+path+')');
			
			//fade the now old background
			this._fx_white_bg.start({opacity: [1,0]});
			
			//fade in the new background		
			this._fx_content_bg.start({opacity: [0,1]});
			
	
		}
 	}
	

});