var busy= false;
var effekt;
var imgs = ['21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','50','42'];
var rules= {
	'#big' : function(el) {
 		Effect.Appear(el);
	},
	'.th' : function(el) {
		el.style.cursor='pointer';
		el.onmouseover = function() {
			Element.setOpacity('big',1);
			Element.setOpacity(el,1);
			$$('.th').each(function(th) { th.style.border = '1px solid black'});
			el.style.border = '1px solid yellow';
			Element.hide('big');
			$('big').src = el.src;
			var options = {duration:1.6,queue:{limit:1,position:'end',scope:'mymenue'}};
				switch($F('choise')) {
				case 'Grow':
					effekt = new Effect.Grow('big',options);
				break;
				case 'Appear':
					effekt = new Effect.Appear('big',options);
				break;
				case 'BlindDown':
					effekt = new Effect.BlindDown('big',options);
				break;
			
			}	
 			
			/*effekt = new Effect.Grow('big',{
				duration:0.6,
				afterFinish:function(){window.setTimeout(function(){busy=false;},100);},
				beforeStart:function(){busy=true;}});
			*/
				
		}
	}
};

Event.observe(window, 'load', init_app);

function init_app(event) {
 	for(var i=0;i<imgs.length;i++) {
 		var img = document.createElement("img");
        img.setAttribute('src','./gfx/' + imgs[i] + '.jpg');
        img.setAttribute('alt','[Vorschaubild]');
        Element.addClassName(img,'th');
        Element.addClassName(img,'bb');
    	$('navi').appendChild(img);
  	}
    var select  = document.createElement("select");
    select.id = 'choise';
    var myoptions = ['Grow','Appear','BlindDown'];
    for (var i=0;i<myoptions.length;i++) {
		var option = document.createElement("option")
		option.text = myoptions[i];
		option.value= myoptions[i];
		select.options.add(option)
	}
	$('navi').appendChild(select);
	Behaviour.register(rules);
 	Behaviour.apply(rules);
 
 }