window.addEvent('domready', function() {
	
	var subAppear = [];
	var subScroll = [];
	var sub_status = false;
	
	var icons = $$('li.tile_icon_trigger');
	var tiles = $$('div.tile');
	var sub_tiles = $$('div.tile_sub');
	
	sub_tiles.each(function(sub_tile, index){
		// Add Slide-Out-FX for dropdown tiles
		subAppear[index] = new Fx.Morph(sub_tile, {duration: 700, transition: Fx.Transitions.Bounce.easeOut, wait: false});
		// Add Scroll-FX for dropdown content
		subScroll[index] = new Fx.Scroll(sub_tile, {duration: 400, transition: Fx.Transitions.Quad.easeInOut, wait: true});
		// Add center and right classes for positioning the dropdowns correctly
		switch (Math.floor(index%3)){
			case 0: sub_tile.addClass('');
					break;
			case 1: sub_tile.addClass('tile_sub_center');
					break;
			case 2: sub_tile.addClass('tile_sub_right');
					break;
		}
	});
	
	icons.each(function(icon, index){
		// Add hover-FX: red border for icons
		var borderFX = new Fx.Tween(icon,{property: 'border-color', duration: 'short', wait: false});
		icon.addEvents({
				'mouseenter':  function(){ borderFX.start('#f00'); },
				'mouseleave': function(){ borderFX.start('#fff'); },
				'click': function(){
					current_index = Math.floor(index/3);
					
					// Add actions for trigger-icons (set, slideout, scroll and slidein)
					if(icon.hasClass('trigger_0')){
							if(!sub_status){
								sub_status = true; pos_1 = true; pos_2 = false; pos_3 = false;
								subScroll[current_index].set(0,0); // set to center and 
								subAppear[current_index].start({'height': [190],'opacity': 1}); // slide out
							} else if(!pos_1) {
								pos_1 = true; pos_2 = false; pos_3 = false;
								subScroll[current_index].start(0, 0); // scroll to the left
							} else {
								sub_status = false;
								subAppear[current_index].start({'height': [0], 'opacity': 0 }); // slide back in
							}
					} else if(icon.hasClass('trigger_1')){	
							if(!sub_status){
								sub_status = true; pos_1 = false; pos_2 = true; pos_3 = false;
								subScroll[current_index].set(498,0); // set center and
								subAppear[current_index].start({'height': [190],'opacity': 1});// slide out
							} else if(!pos_2) {
								pos_1 = false; pos_2 = true; pos_3 = false;
								subScroll[current_index].start(498, 0);  // scroll to center
							} else {
								sub_status = false;
								subAppear[current_index].start({'height': [0], 'opacity': 0 }); // slide back in
							}
					} else if(icon.hasClass('trigger_2')){
							if(!sub_status){
								sub_status = true; pos_1 = false; pos_2 = false; pos_3 = true;
								subScroll[current_index].set(996,0); // set right and 
								subAppear[current_index].start({'height': [190],'opacity': 1}); // slide out
							} else if(!pos_3) {
								pos_1 = false; pos_2 = false; pos_3 = true;
								subScroll[current_index].start(996, 0); // scroll to the right
							} else {
								sub_status = false;
								subAppear[current_index].start({'height': [0], 'opacity': 0 }); // slide back in
							}
					}
					
				} // end 'click'-event

			});	
	});
	
	tiles.each(function(tile, index){
		// Add mouseover-FX for big tiles
		var hoverFx = new Fx.Morph(tile,{duration: 'normal',transition: Fx.Transitions.Sine.easeOut, wait: false});
		tile.addEvents({
			'mouseenter':  function(){ 
				hoverFx.start({
					'border-color': '#aaa',
					'background-color': '#e5e5e5',
					'background-image': 'url(images/tile_bkg.gif) repeat-x' 
				});
				$$('div.tile_icons')[index].fade('in');
			},
			'mouseleave': function(){
				hoverFx.start({
					'border-color': '#fff',
					'background-color': '#fff',
					'background-image': 'none' 
				});
				// hide everything
				$$('div.tile_icons')[index].fade('out');
				if(sub_status){							 
					subAppear[index].start({'height': [0], 'opacity': 0 });
				}
				sub_status = false;
			}
		});
	});

});