function adjust(item){
	item.each(function(element,index){
		$$('.content')[index].setStyle('height',element.getHeight()-30);
	});
}

window.addEvent('domready',function(){


	var draggable = $$('.draggable');
	var handle = $$('.draggable .handle');
	var focus;
	var focus_id;
	var max_width = $$('html').getWidth();
	var max_height = $$('html').getHeight();
	var taskbar_height = $('taskbar').getHeight();
	
	/*
	adjust(draggable);
	*/
	$('canvas-wrapper').setStyles({
		'height':max_height-2,
	});
	$('canvas').setStyles({
		'height':max_height-taskbar_height-2,
		
	});
	

	/*
	draggable.addEvent('mouseover',function(){
		adjust(draggable);
	});
	draggable.addEvent('mouseout',function(){
		
	});
	*/
	draggable.addEvent('mousedown',function(){
		focus = this;
		draggable.each(function(element,index){
			if(element == focus){
				focus_id = index;
			}
		});
		
		
		
		
		draggable.setStyles({
			'z-index':'10'
		});
		
		draggable.each(function(element,index){
			if(focus_id != index){
				var draggable_morph = new Fx.Morph(element, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
				draggable_morph.start({
					'background-color':'#ddd',
					'opacity':0.8
				});
			}
		});
		
		var focus_morph = new Fx.Morph(focus, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});		
		focus.setStyles({
			'z-index':'11'
			
		});
		
		focus_morph.start({
			'background-color':'#FFF',
			'opacity':1.0
		});
		
		
		handle.setStyles({
			'background':'#666'
		});
		handle[focus_id].setStyles({
			'background':'#444'
		});
		
	});
	
	var maximize = $$('.max');
	maximize.addEvent('mousedown',function(element){
		focus = this;
		maximize.each(function(element,index){
			if(element == focus){
				focus_id = index;
			}
		});
		
		draggable[focus_id].setStyles({
			'width':max_width-2,
			'height':max_height-33,
			'top':'0',
			'left':'0'
		});
		
		$$('.content')[focus_id].setStyle('height',draggable[focus_id].getHeight()-29);
		$$('.content')[focus_id].setStyle('width',draggable[focus_id].getWidth()-6);
	});
	
	var close = $$('.close');
	close.addEvent('mousedown',function(element){
		focus = this;
		close.each(function(element,index){
			if(element == focus){
				focus_id = index;
			}
		});
		draggable[focus_id].setStyles({
			display: 'none'
		});
	});	
	
	
	
	draggable.each(function(drag,index){
		$$('.content')[index].setStyle('height',$$('.draggable>div')[index].getHeight()-30);
		drag.makeDraggable({
			container: $('canvas'),
			handle: $$('.handle')[index]
		});
		drag.makeResizable({
			container: $('canvas'),
			handle: $$('.resize_sw')[index],
			limit: {x:[200,],y:[100,]}
		});
		$$('.content')[index].makeResizable({
			container: $$('.draggable>div')[index],
			handle: $$('.resize_sw')[index],
			limit: {x:[194,],y:[70,]}
		});
		drag.makeResizable({
			container: $('canvas'),
			handle: $$('.resize_e')[index],
			modifiers: {x:'width',y:false},
			limit: {x:[200,]}
		});
		$$('.content')[index].makeResizable({
			container: $$('.draggable>div')[index],
			handle: $$('.resize_e')[index],
			modifiers: {x:'width',y:false},
			limit: {x:[194,]}
		});
		drag.makeResizable({
			container: $('canvas'),
			handle: $$('.resize_s')[index],
			modifiers: {x:false,y:'height'},
			limit: {y:[100,]}
		});
		$$('.content')[index].makeResizable({
			container: $$('.draggable>div')[index],
			handle: $$('.resize_s')[index],
			modifiers: {x:false,y:'height'},
			limit: {y:[70,]}
		});
	});
});