window.addEvent('domready', function() {
	
	var anotherEl = $('logo');
	
	
	// Or we just use Element.morph
	$('m').addEvent('click', function(e) {
		e.stop();
		// Changes the element's style to .myClass defined in the CSS
		anotherEl.morph('.container-form');
		//anotherEl.morph({height: 500, width: 500});
		//anotherEl.load('formmoo.html');
	    var respost = new Request.HTML({ //New Ajax 
	                                method: 'get', 
	                                url:'formmoo.html', 
	                                evalScripts: true, 
	                                onSuccess: function(html) {
		  								    $('logo').empty(); 
	                                        $('logo').adopt(html);
											// note id form
											$('form').fade('hide');
											(function() {$('form').fade('in')}).delay(400); // nice transition
											
											// code for form
											/*var myFx = new Fx.Slide('kiin1span', {
											    duration: 'long',
											    transition: Fx.Transitions.Bounce.easeOut
											});*/
											$('kiin1span').slide('hide');
											$('kiin2span').slide('hide');
											$('kiin1').addEvent('click', function(e) {
												//e.stop();
												// Näyttää teknisen toteuttajan spanin
												$('kiin2span').slide('out');
												$('kiin1span').slide('in');
											});
											$('kiin2').addEvent('click', function(e) {
												//e.stop();
												// Näyttää teknisen toteuttajan spanin
												$('kiin1span').slide('out');
												$('kiin2span').slide('in');
											});
											
											// carousell
												var wrapper = $('wrap'); // The outer wrapper
												var carousel = $('carousel'); // The inner wrapper
												var items = $$('#carousel li'); // The different elements, this is an array
												var item_width = 350; // The full width of a single item (incl. borders, padding, etc ... if there is any)
												var max_margin = items.length * item_width - item_width;

												// Set up the animation
												var animation = new Fx.Tween(carousel, {duration: 500});

												// The function to browse forward
												function next_item(pos){
													if(pos == -max_margin){
														animation.start('left', 0);
													} else { 
														var newposition = pos - item_width;
														animation.start('left', newposition);
													}
												}

												// The function to browse backward
												function previous_item(pos){
													if(pos == 0){
														animation.start('left', -max_margin);
													} else { 
														var newposition = pos + item_width;
														animation.start('left', newposition);
													}
												}

												// Set up the 'next' and 'previous' buttons
												$('next').addEvent('click', function(){
													var position = parseInt(carousel.getStyle('left'));
													next_item(position);
												});

												$('previous').addEvent('click', function(){
													var position = parseInt(carousel.getStyle('left'));
													previous_item(position);
												});
												
												// load css for form
												/*
												var link = document.createElement('link');
												link.setAttribute('rel', 'stylesheet');
												link.type = 'text/css';
												link.href = 'http://example.com/stylesheet.css';
												document.head.appendChild(link);
											    */
											
											 
	                                } 
	                        }).send();
		
		
	});
	
	/*$('resetEffect1').addEvent('click', function(e) {
		e.stop();
		// You need the same selector defined in the CSS-File
		anotherEl.morph('div.demoElement');
	}); */
});