function showCat(catEl){
	$$('.appControl').each(function(el,i){
		el.addClass('hide');
	});
	catEl.removeClass('hide');
}

function activateCatSelector(el){
	$$('#appControllCats li').each(function(el,i){
		el.removeClass('active');
	});
	el.addClass('active');
}

function clearAreaEvents(area){
	var areas = area.getChildren();
	areas.each(function(el,i){
		el.addEvent('click',function(e){
			e.stop();
		});
	});
}

function addUpAndDownEvent(area,applet,cmd){
	area.addEvent('mousedown',function(e){
		applet.send(cmd,'1');
		if(op) console.log('mouse down: ' + area.get('id') + ' - ' + cmd);
	});
	area.addEvent('mouseup',function(e){
		applet.send(cmd,'0');
		if(op) console.log('mouse up: ' + area.get('id') + ' - ' + cmd);
	});


}

function toggleTourStart(status,applet){
	tour_running = !tour_running;
	if(tour_running) {
		status.addClass('running');
		applet.send('turStart','1');
	} else {
		status.removeClass('running');
		applet.send('turStop','1');
	}
	if(op) console.log('Guided tour status: '+tour_running);
}

function updateApp(act,param,applet){
	var tmp = param.split(' ');
	applet.send(tmp[0],tmp[1]);
	if(op) console.log(param);
}

var tour_running = false;
var op = true; // turn on/off console output on events;

window.addEvent('domready', function(){
	
	/* setting cat1 selector as active on page load */
	showCat($('appCC_1'));

	/* adding events to all cat selectors */
	$$(".cat_selector").each(function(el,i){
			el.addEvent('click',function(e){
				e.stop();
				activateCatSelector(this.getParent());
				showCat($(this.get('href')));
			});
	});

	/* clearing link event on all area maps */
	$$('map').each(function(el,i){
		clearAreaEvents(el);
	});
	
	var applet = document.MH_Karita_1_3;
	
	/* adding events to "sendtoapp" marked links */
	$$('a.sendtoapp').each(function(el,i){
		el.addEvent('click',function(e){
			e.stop();
			updateApp('',el.get('rel'),applet);
		});
	});
	
	
	/* adding only desired events on area maps */
	/* cat 1 */
	addUpAndDownEvent($('rotate_down'),applet,'roterNed');
	addUpAndDownEvent($('rotate_right'),applet,'roterHoyre');
	addUpAndDownEvent($('rotate_up'),applet,'roterOpp');
	addUpAndDownEvent($('rotate_left'),applet,'roterVenstre');
	
	addUpAndDownEvent($('move_down'),applet,'panNed');
	addUpAndDownEvent($('move_right'),applet,'panHoyre');
	addUpAndDownEvent($('move_up'),applet,'panOpp');
	addUpAndDownEvent($('move_left'),applet,'panVenstre');
	
	addUpAndDownEvent($('zoom_in'),applet,'zoomInn');
	addUpAndDownEvent($('zoom_out'),applet,'zoomUt');
	
	$('tour_start').addEvent('click',function(e){
		toggleTourStart($('tour_start_status'),applet);
	});

	/* cat 2 */
	addUpAndDownEvent($('direction_down'),applet,'camSelect1');
	addUpAndDownEvent($('direction_right'),applet,'camSelect2');
	addUpAndDownEvent($('direction_up'),applet,'camSelect3');
	addUpAndDownEvent($('direction_left'),applet,'camSelect4');
	$$('.radio_floor').each(function(el,i){
		el.addEvent('click',function(e){
			updateApp('floor',this.get('value'),applet);
		});
	});	
	/* zoom already defined cat 1 */
	$$('.radio_background').each(function(el,i){
		el.addEvent('click',function(e){
			updateApp('background',this.get('value'),applet);
		});
	});
	$('largeview').addEvent('click',function(e){
		e.stop();
		applet.die(); // <-- insert correct code to kill the applet.
		window.open('http://www.mesterhus.no/','large_view','width=800,height=600'); // <-- insert URL to large view applet page.
	});
	
	
	/* cat 3 */
	addUpAndDownEvent($('brightness_down'),applet,'brightnessDown');
	addUpAndDownEvent($('brightness_up'),applet,'brightnessUp');
	$$('.tile a').each(function(el,i){
		el.addEvent('click',function(e){
			e.stop();
			updateApp('new_property',el.get('rel'),applet);
		});
	});
	

});
