var opa;
var hoe;

var rules = {
    '.trigger' :function(el) {
    	$$('.trigger').each(function(elem){Element.setOpacity(elem,0.4);});
    	Element.setOpacity($$('.trigger')[7],1);
    	el.style.cursor='pointer';
    	el.onclick = function() {
    		$$('.trigger').each(function(elem){Element.setOpacity(elem,0.4);});
    		Element.setOpacity(el,1);
    		$('bild').src = el.src;
    		setTimeout(function() {
      			Reflection.remove($('bild'));
    			Reflection.add($('bild'), { height: hoe,  opacity: opa });
    		},200);
    	}
    }
}
function init_app(event) {
	Behaviour.register(rules);
	Behaviour.apply(rules); 
	Reflection.add($('bild'),{ height: 3/4, opacity: 2/3 });
 
 (function() {
    new Control.Slider('h_handle',('h_slider'), {
      range: $R(0, 100),
      sliderValue: 50,
      onSlide: function(val) { $('h_out').innerHTML = Math.round(val) + '%';
        hoe= Math.round(val/100)
      },
      onChange: function(value) { 
        
      	Reflection.remove($("bild"));
    	Reflection.add($('bild'),{ height: hoe,  opacity: opa });
   	
      }
    });
    new Control.Slider('s_handle',('s_slider'), {
      range: $R(0, 100),
      sliderValue: 62,
      onSlide: function(val) { $('s_out').innerHTML = Math.round(val) + '%';
       opa = Math.round(val/100);
      },
      onChange: function(val) { 
      	Reflection.remove($("bild"));
    	Reflection.add($('bild'),{ height: hoe,  opacity: opa });


      }
    });

  })();

 
 };



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