var Front = {

	start: function( _w ){
		//$("ciid_frontbox").setStyles({'opacity':0, 'visibility':'visible'});
		
		Front.setup( _w );
		
		$("ciid_frontbox").fireEvent("mouseleave");
		//$("ciid_frontbox").effects({wait: false, duration: 250, transition: Fx.Transitions.Circ.easeOut}).start({'opacity':0}).chain(function(){ this.start.delay(100, this, {'opacity': 1})});
	},
	
	setup: function( _ciid_conf_frontwidth ){
		

		// Values for the "Doors" (Chapter entries)
		var w					= 950;
		var margin				= 10;
		
		var large				= _ciid_conf_frontwidth; //420;
		var door_sizedNormal	= (w-(3*margin))/4;
		var door_sizedSmall		= (w-(large+(3*margin)))/3;
		var door_sizedFull		= large;

		var door_opacityNormal	= 0.5;
		var door_opacityFull	= 1.0;
		var subclasses			= ["con", "edu", "src", "msc"];
		
		// Values for the "Matts" (Latest News)
		var rows				= $$("#ciid_frontbox .matte_ul").length;
		var cols				= $$("#matte_1 .matt").length;
		var large				= Math.ceil(w/2.2);
		var matt_sizedNormal	= (w-((cols-1)*margin))/cols;
		var matt_sizedSmall		= (w-(large+((cols-1)*margin)))/(cols-1);
		var matt_sizedFull		= large;		
		
		// Runtime caches
		var mfxg				= {};
		var relmap				= {};
		var pfx 				= {};
		var actives				= [];
		var activedoor			= -1;

		var doors				= $$("#ciid_frontbox .door");
		var matts				= $$("#ciid_frontbox .matt");
		var dfx					= new Fx.Elements(doors, {wait: false, duration: 500, transition: Fx.Transitions.Circ.easeOut} );
		var mfx					= new Fx.Elements(matts, {wait: false, duration: 500, transition: Fx.Transitions.Circ.easeOut} );
		

		
		// Setup relation map - what news (mattes) belong to what section (door) :
		subclasses.each( function(s, i){ relmap[i] = $$(".matte_ul ."+s) });
		

		// Setup relation map - what door belong to what news (matt) :
		matts.each( function(m){
			subclasses.each( function(cls, i){
				if( m.hasClass(cls) ) m.idx = i;
			});
		});

		
		for(var i=1; i<=rows; i++){
			var e   = $$("#matte_"+i+" .matt");
			mfxg[i] = new Fx.Elements(e, {wait: false, duration: 500, transition: Fx.Transitions.Circ.easeOut} );
			
			var p	= $$("#matte_"+i+" .matt_content");
			pfx[i]  = new Fx.Elements(p, {wait: false, duration: 500, transition: Fx.Transitions.Circ.easeOut} );
		}
		
		//
		// Setup Doors
		doors.each(function(door, i) {
			door.sfx = door.effects({wait: false, duration: 2000, transition: Fx.Transitions.Quart.easeOut});
			
			var dp = $E("p", door);
			dp.setStyle("opacity", 0);
			door.pfx = dp.effects({wait: false, duration: 500, transition: Fx.Transitions.Quart.easeOut});			
			
			// map each door to it's matts:
			subclasses.each( function(s, i){
				if( door.hasClass(s) ){
					door.rels = relmap[i];
				}
			});
			door.doorindex = i;
			
			door.addEvent("mouseenter", function(event) {
				this.sfx.start({'opacity':door_opacityFull});
				this.pfx.start({'opacity':1});
				var o = {};
				var w = door.getStyle("width").toInt();
				o[i] = {width: [w, door_sizedFull]};
				doors.each(function(other, j) {
					if(i != j) {
						var w = other.getStyle("width").toInt();
						if(w != door_sizedSmall){
							o[j] = {width: [w, door_sizedSmall]};
							other.sfx.start({'opacity':door_opacityNormal});
							other.pfx.start({'opacity':0});
						}
					}
				});
				dfx.start(o);
				
				// normalize all Matts, Hilite corresponding Matts:
				o = {};
				matts.each(function(matt, i) {
					var w = matt.getStyle("width").toInt();
					o[i] = door.rels.contains(matt) ? {width: [w, matt_sizedNormal], 'opacity': 1.0} : {width: [w, matt_sizedNormal], 'opacity': 0.5};				
				});
				mfx.start(o);
				actives = door.rels;
				activedoor = door.doorindex;
			});
		});
		
		//
		// Setup Mattes (n amount of rows)
		for(var k=1; k<=rows; k++){
			var e = $$("#matte_"+k+" .matt");
			e.each(function(matt, i) {
				matt.k = k;
				matt.e = e;	
				matt.addEvent("mouseenter", function(event) {
					var o = {};
					var p = {};
					var w = matt.getStyle("width").toInt();
					o[i]  = {width: [w, matt_sizedFull], 'opacity': 1.0};
					p[i]  = {'opacity':1.0};
					this.e.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != matt_sizedSmall){
								o[j] = actives.contains(other) ? {width: [w, matt_sizedSmall], 'opacity': 1} : {width: [w, matt_sizedSmall], 'opacity': 0.5};
								p[j] = {'opacity':0};
							}
						}
					});
					mfxg[matt.k].start(o);
					pfx[matt.k].start(p);
					/* */
					var o = {}
					doors.each(function(doo, i) {
						var w = doo.getStyle("width").toInt();
						if(i == matt.idx) {	
							o[i] = {width: [w, door_sizedFull]};
							doo.sfx.start({'opacity':door_opacityFull});
							doo.pfx.start({'opacity':1});
						}else{
							o[i] = {width: [w, door_sizedSmall]};
							doo.sfx.start({'opacity':door_opacityNormal});
							doo.pfx.start({'opacity':0});
						}
					});
					dfx.start(o);
				});
			});

			// Collapse when leaving this row
			$("matte_m_"+ k).k = k;
			$("matte_m_"+ k).addEvent("mouseleave", function(event) {
				var o = {};
				var p = {};
				e = $$("#matte_"+ this.k +" .matt");				
				e.each(function(matt, i) {
					var w = matt.getStyle("width").toInt();
					o[i] = actives.contains(matt) ? {width: [w, matt_sizedNormal], 'opacity': 1} : {width: [w, matt_sizedNormal], 'opacity': 0.5};
					p[i] = {'opacity':0};
				});
				mfxg[this.k].start(o);
				pfx[this.k].start(p);
				
				/* refocus initial door */
				// console.log("Refocus Door: "+ activedoor);
				
				if( activedoor > -1 ){
					var o = {}
					doors.each(function(doo, i) {
						var w = doo.getStyle("width").toInt();
						if(i == activedoor) {	
							o[i] = {width: [w, door_sizedFull]};
							doo.sfx.start({'opacity':door_opacityFull});
							doo.pfx.start({'opacity':1});
						}else{
							o[i] = {width: [w, door_sizedSmall]};
							doo.sfx.start({'opacity':door_opacityNormal});
							doo.pfx.start({'opacity':0});
						}
					});
					dfx.start(o);
				}
				
			});

		};

		//
		// Setup rolloff
		$("frontbox_area").addEvent("mouseleave", function(event) {
			actives = [];
			activedoor = -1;
			var o = {};
			doors.each(function(door, i) {
				var w = door.getStyle("width").toInt();
				o[i] = {width: [w, door_sizedNormal]}
				door.sfx.start({'opacity':door_opacityNormal});
				door.pfx.start({'opacity':0});
			});
			dfx.start(o);
			
			o = {};
			matts.each(function(matt, i) {
				var w = matt.getStyle("width").toInt();
				o[i] = {width: [w, matt_sizedNormal], 'opacity':0.5};
			});
			mfx.start(o);
			
		});
	}
}