var Panels=Sortables.extend({options:{columns:false,panels:false,ghost:true,onStart:function(panel){panel.setStyle('opacity',0.7);},onComplete:function(panel){panel.setStyle('opacity',1);panel.getElement('.handle').setProperty('src','img/move.gif');},onDragStart:function(placeholder,ghost){ghost.setStyle('opacity',0.7);},onDragComplete:function(ghost){ghost.remove();this.trash.remove();},onToggleStart:function(panel){var toggle=panel.getElement('.toggle');if(toggle.hasClass('minimise')){toggle.removeClass('minimise');toggle.addClass('maximise');toggle.setProperty('src','img/maximise.gif');}else if(toggle.hasClass('maximise')){toggle.removeClass('maximise');toggle.addClass('minimise');toggle.setProperty('src','img/minimise.gif');}else{toggle.removeClass('minimise');toggle.addClass('maximise');toggle.setProperty('src','img/maximise.gif');}var body=panel.getElement('.panelBody');if(body.getStyle('display')=='none'){body.setStyle('display','block');}else{body.setStyle('display','none');}},onToggleComplete:function(panel){},onCloseStart:function(panel){},onCloseComplete:function(panel){panel.remove();},onOver:function(control){if(control.hasClass('linked')){control.setProperty('src','img/linked_hover.gif');}else if(control.hasClass('help')){control.setProperty('src','img/help_hover.gif');}else if(control.hasClass('toggle')){if(control.hasClass('minimise')){control.setProperty('src','img/minimise_hover.gif');}else if(control.hasClass('maximise')){control.setProperty('src','img/maximise_hover.gif');}else{control.setProperty('src','img/minimise_hover.gif');}}else if(control.hasClass('handle')){control.setProperty('src','img/move_hover.gif');}else if(control.hasClass('close')){control.setProperty('src','img/close_hover.gif');}},onOut:function(control){if(control.hasClass('linked')){control.setProperty('src','img/linked.gif');}else if(control.hasClass('help')){control.setProperty('src','img/help.gif');}else if(control.hasClass('toggle')){if(control.hasClass('minimise')){control.setProperty('src','img/minimise.gif');}else if(control.hasClass('maximise')){control.setProperty('src','img/maximise.gif');}else{control.setProperty('src','img/minimise.gif');}}else if(control.hasClass('handle')){control.setProperty('src','img/move.gif');}else if(control.hasClass('close')){control.setProperty('src','img/close.gif');}}},initialize:function(container,options){this.setOptions(options);this.container=$(container);this.columns =(this.options.columns)? $$(this.options.columns):this.container.getElements('.panelColumn');this.panels =(this.options.panels)? $$(this.options.panels):this.container.getElements('.panel');this.bound ={'start':[],'move':this.move.bindWithEvent(this),'moveGhost':this.moveGhost.bindWithEvent(this),'toggle':[],'close':[],'end':this.end.bind(this),'over':this.over.bindWithEvent(this),'out':this.out.bindWithEvent(this)};for(var i=0,l=this.panels.length;i<l;i++){this.bound.start[i]=this.start.bindWithEvent(this,this.panels[i]);this.bound.toggle[i]=this.toggle.bindWithEvent(this,this.panels[i]);this.bound.close[i]=this.close.bindWithEvent(this,this.panels[i]);}this.attach();if(this.options.initialize)this.options.initialize.call(this);},attach:function(){this.panels.each(function(panel,i){var help=panel.getElement('.help');var linked=panel.getElement('.linked');var handle=panel.getElement('.handle');var toggle=panel.getElement('.toggle');var close=panel.getElement('.close');if(help){help.addEvent('mouseenter',this.bound.over);help.addEvent('mouseleave',this.bound.out);}if(linked){linked.addEvent('mouseenter',this.bound.over);linked.addEvent('mouseleave',this.bound.out);}if(handle){handle.addEvent('mousedown',this.bound.start[i]);handle.getParent().addEvent('keypress',this.bound.start[i]);handle.addEvent('mouseenter',this.bound.over);handle.addEvent('mouseleave',this.bound.out);}if(toggle){toggle.addEvent('mousedown',this.bound.toggle[i]);toggle.getParent().addEvent('keypress',this.bound.toggle[i]);toggle.addEvent('mouseenter',this.bound.over);toggle.addEvent('mouseleave',this.bound.out);}if(close){close.addEvent('mousedown',this.bound.close[i]);close.getParent().addEvent('keypress',this.bound.close[i]);close.addEvent('mouseenter',this.bound.over);close.addEvent('mouseleave',this.bound.out);}},this);},detach:function(){this.panels.each(function(panel,i){var help=panel.getElement('.help');var linked=panel.getElement('.linked');var handle=panel.getElement('.handle');var toggle=panel.getElement('.toggle');var close=panel.getElement('.close');if(help){help.removeEvent('mouseenter',this.bound.over);help.removeEvent('mouseleave',this.bound.out);}if(linked){linked.removeEvent('mouseenter',this.bound.over);linked.removeEvent('mouseleave',this.bound.out);}if(handle){handle.removeEvent('mousedown',this.bound.start[i]);handle.getParent().removeEvent('keypress',this.bound.start[i]);handle.removeEvent('mouseenter',this.bound.over);handle.removeEvent('mouseleave',this.bound.out);}if(toggle){toggle.removeEvent('mousedown',this.bound.toggle[i]);toggle.getParent().removeEvent('keypress',this.bound.toggle[i]);toggle.removeEvent('mouseenter',this.bound.over);toggle.removeEvent('mouseleave',this.bound.out);}if(close){close.removeEvent('mousedown',this.bound.close[i]);close.getParent().addEvent('keypress',this.bound.close[i]);close.removeEvent('mouseenter',this.bound.over);close.removeEvent('mouseleave',this.bound.out);}},this);},over:function(event){this.fireEvent('onOver',event.target);event.stop();},out:function(event){this.fireEvent('onOut',event.target);event.stop();},start:function(event,el){if(event.key=='enter'){alert('You need a mouse to drag these panels into different positions');}else{if(this.options.ghost){var position=el.getPosition();this.offsetX=event.page.x-position.x;this.offsetY=event.page.y-position.y;this.trash=new Element('div').inject(document.body);this.ghost=el.clone().inject(this.trash).setStyles({'position':'absolute','z-index':'138','left':(event.page.x-this.offsetX)+ 'px','top':(event.page.y-this.offsetY)+ 'px','width':(el.getCoordinates().width)+ 'px'});this.active=new Element('div');this.active.setStyles({'height':(el.getCoordinates().height-4)+ 'px'});this.active.addClass('panelPlaceholder');this.original=el;el.replaceWith(this.active);document.addListener('mousemove',this.bound.moveGhost);this.fireEvent('onDragStart',[this.active,this.ghost]);}else{this.active=el;}document.addListener('mousemove',this.bound.move);document.addListener('mouseup',this.bound.end);this.fireEvent('onStart',el);}event.stop();},toggle:function(event,el){if(!event.key||event.key=='enter'){this.fireEvent('onToggleStart',el);var columnId=el.getParent().getProperty('id');var panelId=el.getProperty('id');var action =(el.getElement('.toggle').hasClass('minimise'))? 'maximise':'minimise';var debug=$$('#debug');debug.empty();debug.setHTML('column:'+columnId+'<br />panel:'+panelId+'<br />action:'+action);this.fireEvent('onToggleComplete',el);}},close:function(event,el){if(!event.key||event.key=='enter'){this.fireEvent('onCloseStart',el);var columnId=el.getParent().getProperty('id');var panelId=el.getProperty('id');var debug=$$('#debug');debug.empty();debug.setHTML('column:'+columnId+'<br />panel:'+panelId+'<br />action:close');this.fireEvent('onCloseComplete',el);}},moveGhost:function(event){this.ghost.setStyles({'top':(event.page.y-this.offsetY)+ 'px','left':(event.page.x-this.offsetX)+ 'px'});event.stop();},move:function(event){var x=event.page.x;var y=event.page.y;var col=null;for(var i=0,l=this.columns.length;i<l;i++){if(this.within(x,y,this.columns[i].getCoordinates())==true){col=this.columns[i];break;}}this.previousY=this.previousY||y;this.previousCol=this.previousCol||col;var up =((this.previousY-y)> 0);if(col!=null){var prev=null;var next=null;if(col==this.previousCol){prev=this.active.getPrevious();next=this.active.getNext();if(prev&&up&&y<prev.getCoordinates().bottom)this.active.injectBefore(prev);if(next&&!up&&y>next.getCoordinates().top)this.active.injectAfter(next);}else{if((y-col.getCoordinates().top)<(col.getCoordinates().bottom-y)){this.active.injectTop(col);}else{this.active.injectInside(col);}}this.previousY=y;this.previousCol=col;}event.stop();},within:function(x,y,coordinates){if(x>=coordinates.left&&x <=(coordinates.left+coordinates.width)){if(y>=coordinates.top&&y <=(coordinates.top+coordinates.height)){return true;}}return false;},serialize:function(converter){},end:function(){this.previousY=null;document.removeListener('mousemove',this.bound.move);document.removeListener('mouseup',this.bound.end);if(this.options.ghost){document.removeListener('mousemove',this.bound.moveGhost);this.active= this.active.replaceWith(this.original);this.fireEvent('onDragComplete',[this.ghost]);}var column=this.active.getParent();var panels=column.getChildren();var order=0;while(order<=panels.length){if(panels[order]==this.active){break;}order++;}var columnId=column.getProperty('id');var panelId=this.active.getProperty('id');var debug=$$('#debug');debug.empty();debug.setHTML('column:'+columnId+'<br />panel:'+panelId+'<br />order:'+order+'<br />action:move');this.fireEvent('onComplete',this.active);}});window.addEvent('domready',function(){new Panels($('container1'));});