/**
 * Custom DragBoxes Class
 * @author 58062 Florian Collot
 * 
 * 
 */

var DragBoxes = new Class ({
	Implements: [Events, Options],
	options : {
		'container' : null,
		'droppables' : null,
		'classes' : {
			'fix' : 'box',
			'move' : 'box_move'
		},
		'slideShow' : false
	},
	
	initialize:function(element, options){
		this.constructBox(element, options);
	},
	
	constructBox : function(element, options) {
		this.setOptions(options);
		this.element = element;
		if (this.element.get('id') == null)
			this.element.set('id', 'box_'+uniqid.get());
		
		
		this.id = this.element.get('id');
		this.parent = this.element.getParent('div.droppable_zone');
		this.parent.set('id', 'parent_'+this.id);
		
		this.position = null;
		
		DragBoxes.order = [];
		this.options.container.getElements('div.droppable_zone').each(function(element, index){
			DragBoxes.order.push(element.get('id'));
		}.bind(this));
			
		this.initDrag(this.options.droppables);
		this.remove = this.element.getElements('div.overflow div.over_shape a.remove_box')[0];
		this.remove.addEvent('click', function(e){
			this.removeBox();
			e.stop();
		}.bindWithEvent(this));
		
		this.play = this.element.getElements('div.overflow div.over_shape a.play_box')[0];
		
		this.play.addEvent('click', function(e) {
			this.playBox();
			e.stop();
		}.bindWithEvent(this));
		
		this.title = this.element.getElements('div.overflow h2 a')[0];
		this.title.addEvent('click', function(e) {
			this.playBox();
			e.stop();
		}.bindWithEvent(this));
		
		this.element.addEvent('mouseenter', function(e){
			this.element.set('class', 'box_selected');
		}.bindWithEvent(this));
		this.element.addEvent('mouseleave', function(e){
			this.element.set('class', 'box');
		}.bindWithEvent(this));
		DragBoxes.elements[this.element.get('id')] = this;
		
		this.fireEvent('buit');
	},
	
	moveOtherElements : function(el, dr) {
		var other = $(dr.get('id').substr(7));
		this.nextPosition = {
			'top' : other.getStyle('top'),
			'left' : other.getStyle('left')
		};
		this.elementMoved = other;
		other.setStyles({
			'top' : this.initialPosition.top,
			'left': this.initialPosition.left
		});
		
	},
	
	restoreOtherElements : function(el, dr) {
		var other = $(dr.get('id').substr(7));
		other.setStyles({
			'top' : this.nextPosition.top,
			'left': this.nextPosition.left
		});
		
	},
	
	handleDrop : function(el, dr) {
		if (dr.get('id') == 'parent_'+this.id) {
			var morph = new Fx.Morph(el, {
				'duration' : 'short',
				onStart : function(){
					this.disableDragBoxes();
				}.bind(this),
				onComplete:function(){
					this.enableDragBoxes();
				}.bind(this)
			}).start({
				'top' : this.initialPosition.top,
				'left': this.initialPosition.left
			});
		}
		else {
			var morph = new Fx.Morph(el, {
				'duration' : 'short',
				onStart : function(){
					this.disableDragBoxes();
				}.bind(this),
				onComplete:function(){
					this.enableDragBoxes();
				}.bind(this)
			}).start({
				'top' : this.nextPosition.top,
				'left': this.nextPosition.left
			});
			var newContainer = dr.get('id');
			var oldContainer = $('parent_'+this.id);
			dr.set('id', 'parent_'+this.id);
			oldContainer.set('id', newContainer);
			
		}
	},
	
	disableDragBoxes : function(){
		for (var id in DragBoxes.elements){
			DragBoxes.elements[id].drag.detach();
		}
	},
	
	enableDragBoxes : function(){
		for (var id in DragBoxes.elements){
			DragBoxes.elements[id].drag.attach();
		}
	},
	
	saveBoxes : function(redirection){
		var droppables = this.options.container.getElements('div.droppable_zone');
		var wrappers = '';
		DragBoxes.order = [];
		for (var i=0;i<droppables.length;i++) {
			wrappers += (i == 0) ? droppables[i].get('id').substr(11) : '||'+droppables[i].get('id').substr(11);
			DragBoxes.order.push(droppables[i].get('id'));
		}
		var request = new Request.JSON({
			'url' : slsBuild.site.protocol+"://"+slsBuild.site.domainName+'/User/SaveWrappers.sls',
			'protocol' : 'post', 
			onComplete: function(){
				if (redirection == true)
					window.location = '/';
			}.bind(this)
		}).send('wrappers='+wrappers);
	},
	
	removeBox : function() {
		
		for (var id in DragBoxes.elements){
			DragBoxes.elements[id].transformPosition('float');
		}
		
		if (this.element.getParent('div.droppable_zone').get('id') == 'parent_'+this.id)
			$('parent_'+this.id).destroy();
		else {
			this.element.getParent('div.droppable_zone').destroy();
			this.element.destroy();
		}
		var droppables = this.options.container.getElements('div.droppable_zone');
		var orderTmp = DragBoxes.order;
		DragBoxes.order = [];
		for (var i=0;i<orderTmp.length;i++) {
			if (orderTmp[i] != 'parent_'+this.id)
				DragBoxes.order.push(orderTmp[i]);
		} 
		
		for (var i=0;i<droppables.length;i++) {
			droppables[i].set('id', DragBoxes.order[i]);
			$(droppables[i].get('id').substr(7)).inject(droppables[i]);
		}
		
		var tmpElements = DragBoxes.elements;
		DragBoxes.elements = {};
		
		
		this.saveBoxes(true);
		
		
		for (var id in tmpElements){
			if (id != this.id) {
				DragBoxes.elements[id] = tmpElements[id];
				DragBoxes.elements[id].transformPosition('abs');
			}
		}
		
	},
	
	transformPosition: function(type){
		if (type == 'float') {
			this.element.setStyles({
				'position' : 'relative',
				'float' : 'left',
				'left' : 0,
				'top' : 0
			});
		}
		else {
			this.element.set('style', '');
			this.initDrag();
		}
	},
	
	initDrag : function(drop){
		if (!$chk(drop))
			var drop = this.options.container.getElements('div.droppable_zone');
		
		
		this.drag = null;
		this.drag =  new Drag.Move(this.element , {
	        // Drag.Move Options
			container: this.options.container,
			droppables : drop,
		        // Drag.Move Options
                // the Drag.Move functions will pass the draggable element ('el' in this case)
                // and the droppable element the draggable is interacting with ('dr' here)
			onDrop: function(el, dr) {
				if (!dr) { 
					var morph = new Fx.Morph(el, {
						'duration' : 'short',
						onStart : function(){
							this.disableDragBoxes();
						}.bind(this),
						onComplete:function(){
							this.enableDragBoxes();
						}.bind(this)
					}).start({
						'top' : this.initialPosition.top,
						'left': this.initialPosition.left
					});
				}
				else {
					this.handleDrop(el, dr);	
				}
			}.bind(this),
			onLeave: function(el, dr) {
				var actualEl = $(dr.get('id').substr(7));
				if (actualEl == el){
					
				}
				else {
					this.restoreOtherElements(el, dr);
				}
			}.bind(this),
			onEnter: function(el, dr) {
				var actualEl = $(dr.get('id').substr(7));
				if (actualEl == el){
					this.nextPosition = {
						'top' : this.initialPosition.top,
						'left' : this.initialPosition.left
					};
				}
				else {
					this.moveOtherElements(el, dr);
				}
			}.bind(this),	
			// Drag Events
			onStart: function(el) {
				this.initialPosition = {
					'top' : el.getStyle('top'),
					'left': el.getStyle('left')
				};
				el.set('class', this.options.classes.move);
				el.setStyles({
					'opacity': 0.5,
					'zIndex' : 10
				});
				
			}.bind(this),
			onDrag: function(el) {
				
			}.bind(this),
			onComplete: function(el) {
				el.set('class', this.options.classes.fix);
				el.setStyles({
					'opacity': 1,
					'zIndex' : 1
				});
				this.saveBoxes();
			}.bind(this)
		});
	},
	
	swfHackIe : function(media) {
		var params = media.getElements('param')[0];
		
		var values = [];
		for (var i=0;i<params.length;i++) {
			values.push(params[i].value);
		}
		var object = document.createElement('object');
		var objID = uniqid.get();
	
		
		var names = [
			'allowScriptAccess',
			'allowFullScreen',
			'FlashVars',
			'movie',
			'quality',
			'bgcolor',
			'WMODE'
		];
		for (var i=0;i<values.length;i++) {
			var param = document.createElement('param');
			param.setAttribute("name", names[i]);
			param.setAttribute("value", values[i]);
			object.appendChild(param);
			/*new Element('param', {
				'name' : names[i],
				'value' : values[i]
			}).inject($(objID));*/
		}
		document.getElementById("highlight").appendChild(object);
		object.setAttribute('id', objID);
		object.setAttribute('classid', "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
		object.setAttribute('codebase', "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0");
		object.setAttribute('width', '955');
		object.setAttribute('height', '415');
		object.setAttribute('align', "middle");		
		object.setAttribute('type', "application/x-shockwave-flash");		
		
		
	},
	
	playBox : function(noScroll){
		var media = this.element.getElements('pre.full_content').getFirst('a');
		var morphout = new Fx.Morph($('highlight').getParent(), {
			onComplete:function(){
				DragBoxes.current = 'parent_'+this.id;
				if (media.get('class') == 'swf') {
					$('highlight').empty();
					$('highlight').removeEvents("click");
					if (!Browser.Engine.trident)
						$('highlight').set('html', media.get('html'));
					else 
						this.swfHackIe(media);
					$('highlight').setStyle('background','none');
				}
				else {
					$('highlight').setStyle('background','url('+media.get('html')+') top left no-repeat');
					$('highlight').empty();
					$('highlight').removeEvents("click");
					$('highlight').addEvent('click', function(e, href){
						window.location = href;
					}.bindWithEvent(this, media.get('href')));
				}
					
				var morphin = new Fx.Morph($('highlight').getParent(), {
					onComplete:function(){
						if (noScroll != true)
							var myFx = new Fx.Scroll(window).toElement($('highlight'));
					}.bind(this)
				});
				morphin.start({'opacity':1});
			}.bind(this)
		});
		morphout.start({'opacity':0});
	}
});
DragBoxes.elements = {};
DragBoxes.order = [];
DragBoxes.current = null;



var BoxNoDrag = new Class({
	Implements: [DragBoxes],
	options : {
	},
	
	initialize : function(element, options) {
		this.constructBox(element, options);
		this.constructBoxNoDrag();
		
	},
	
	constructBoxNoDrag : function() {
		this.disableDragBoxes();
		if ($chk(this.element.getElements('div.overflow div.over_shape a.remove_box')[0]))
			this.element.getElements('div.overflow div.over_shape a.remove_box')[0].setStyle('display', 'none');
		if ($chk(this.element.getElements('div.overflow div.over_shape a.add_box')[0]))
			this.element.getElements('div.overflow div.over_shape a.add_box')[0].setStyle('display', 'none');
		this.element.setStyle('cursor', 'auto');
		this.play.removeEvents('click');
	},
	
	enablePlay : function() {
		if ($chk(this.element.getElements('div.overflow div.over_shape a.play_box')[0])) {
			this.play.addEvent('click', function(e) {
				this.playBox();
				e.stop();
			}.bindWithEvent(this));
		}
	},
	
	enableRemove : function() {
		if ($chk(this.element.getElements('div.overflow div.over_shape a.remove_box')[0]))
			this.element.getElements('div.overflow div.over_shape a.remove_box')[0].setStyle('display', 'block');
	}
});