AGUAClass.implement({

	SwatchMatchCompareInit : function() {
		
		this.SampleRequestSwatchesContain = $('sample_request_swatches');
		var SampleRequestSwatchesContain = this.SampleRequestSwatchesContain;
		this.SampleRequestSwatches = $$('#sample_request_swatches li div.swatch_drag');
		this.SampleRequestTotalSpan = $('sample_request_total');
		
		var SamplesBasketForm = $('frmpurchasesamples');
		var SamplesOrderForm = $('frmordersamples');
		
		if (this.SampleRequestSwatches.length > 0) {
		
			var SampleRequestDragArea = $('sample_request_dragarea');
			var SampleRequestTrash = $('sample_request_trash_can');
			var SampleRequestTrashImg = SampleRequestTrash.getElement('img');
			
			var SampleTrashEmpty = new Element('img', { 'src' : '/img/sample_request/trash.png' });
			var SampleTrashHalfEmpty = new Element('img', { 'src' : '/img/sample_request/trash_halfempty.png' });
								
			SampleRequestTrash.store('total', 0);
			
			this.SampleRequestSwatches.each(function(Swatch, i) {
			
				var LastKnowPosition = null;
				var SwatchImage = Swatch.getFirst();
				var SwatchImageSrc = SwatchImage.getStyle('background-image');
				var SwatchName = SwatchImage.getFirst();
				
				//console.log(SwatchImageSrc);
				
				SwatchImageSrc = SwatchImageSrc.replace("url(", "");
				SwatchImageSrc = SwatchImageSrc.replace(")", "");
				
				// Get swatch ID
				SwatchImageSrcSplit = SwatchImageSrc.split('/');
								
				var SwatchVersionID = SwatchImageSrcSplit[SwatchImageSrcSplit.length-1];
				SwatchVersionID = SwatchVersionID.replace(/.jpg/ig, "");
				
				// Add inputs to the add samples to basket form //basket?Q1=1&V1=20&strAction=add&numLineCount=1
				var NewQuantityInput = new Element('input', {'type':'hidden','name':'Q'+[i+1],'value':'1'});				
				var NewVersionInput = new Element('input', {'type':'hidden','name':'V'+[i+1],'value':SwatchVersionID});	
				
				NewQuantityInput.injectInside(SamplesBasketForm);
				NewVersionInput.injectInside(SamplesBasketForm);
				
				var NewVersionSampInput = new Element('input', {'type':'hidden','name':'V','value':SwatchVersionID});	
				NewVersionSampInput.injectInside(SamplesOrderForm);
								
				// Add swatch drag events			
				var SwatchDrag = new Drag.Move(Swatch, {
		 		    droppables: '.swatch_droppable',
					onStart : function() {
						LastKnowPosition = Swatch.getPosition();
						Swatch.setStyle('opacity', 0.6);
						
						//console.log(LastKnowPosition);
					},
		 		    onDrop: function(element, droppable){
		        		if (!droppable) {
							
							Swatch.setStyle('opacity', 1);
							Swatch.setStyle('top', LastKnowPosition.y);
							Swatch.setStyle('left', LastKnowPosition.x);
							//console.log(LastKnowPosition);
							
						} else {
		
				        	if(SampleRequestDragArea==droppable) {
								var ParentLi = Swatch.getParent();
								Swatch.injectInside(SampleRequestDragArea);
								if(ParentLi.tagName=='LI') {
									ParentLi.dispose();
								}
								//console.log(ParentLi.tagName);
								
								Swatch.setStyles({
									'width' : 200,
									'height' : 200,
									'cursor' : 'move'
								});
								
								//console.log(SwatchVersionID);
								
								if (Browser.Engine.trident) {
									SwatchImage.setStyle('background', 'url(/img/swatches/200/'+SwatchVersionID+'.jpg)');
									SwatchImage.setStyle('background-color', '#ffffff');
								} else {
									Swatch.setStyle('background', 'url(/img/noswatch_sample_bk.gif)');
									SwatchImage.setStyle('background', 'url(/img/swatches/200/'+SwatchVersionID+'.jpg)');
								}
								
								SwatchImage.setStyles({
									'width' : 200,
									'height' : 200
								});
								
								Swatch.setStyle('opacity', 1);
								SwatchName.setStyle('display', 'block');
								
							}
							
							// Dropped in trash, dispose and total up
							if(SampleRequestTrash==droppable) {
								Swatch.injectInside(SampleRequestTrash);
								Swatch.setStyle('display', 'none');
								
								SampleRequestTrashImg.src= SampleTrashHalfEmpty.src;
								SampleRequestTrash.store('total', SampleRequestTrash.retrieve('total')+1);
								
								// Send a ajax request to the backend to delete the swatch from the cookie
								var jsonRequest = new Request.JSON({url: "/samplerequests?trash="+SwatchVersionID, onComplete: function(response){
									this.SampleRequestTotalSpan.innerHTML = '('+response.Total+')';							
								}.bind(this)}).get();
								
								this.SampleRequestTotalSpan.innerHTML = '('+SampleRequestTrash.retrieve('total')+')';
								
							}
							
							// Dropped back into swatches list
							if(this.SampleRequestSwatchesContain==droppable) {
								//alert(this.SampleRequestSwatchesContain.innerHTML);
								//Swatch.injectInside(SampleRequestDragArea);
								var NewLi = new Element('li');
								Swatch.injectInside(NewLi);
								NewLi.injectInside(this.SampleRequestSwatchesContain.getElement('ul'));
								
								if (Browser.Engine.trident) {
									SwatchImage.setStyle('background', 'url(/img/swatches/56/'+SwatchVersionID+'.jpg)');
									SwatchImage.setStyle('background-color', '#ffffff');
								} else {
									Swatch.setStyle('background', 'url(/img/noswatch_sample_bk.gif)');
									SwatchImage.setStyle('background', 'url(/img/swatches/56/'+SwatchVersionID+'.jpg)');
								}
								
								Swatch.setStyles({
									'width' : 56,
									'height' : 56
								});
								
								SwatchImage.setStyles({
									'width' : 56,
									'height' : 56
								});
																
								Swatch.setStyle('opacity', 1);
								//SwatchName.setStyle('display', 'none');
							}
							
						}
						
						this.SwatchesReorder();
						
				    }.bind(this),
		 		
				    onEnter: function(element, droppable, ev){
					
						// Enter trash, change image
		        		if(SampleRequestTrash==droppable) {
							if(SampleRequestTrash.retrieve('total')==0) {
								SampleRequestTrashImg.src= SampleTrashHalfEmpty.src;
							}
						}
						
						//console.log(droppable);
						//console.log(this.SampleRequestSwatchesContain);
						
						// Resize if going into the drag mix and match area
						if(SampleRequestDragArea==droppable) {
							Swatch.setStyles({
								'width' : 200,
								'height' : 200
							});
							SwatchImage.setStyles({
								'width' : 200,
								'height' : 200
							});					
						}
						
						// Resize if going back into the watches list
						if(SampleRequestSwatchesContain==droppable) {
						
							/*Swatch.setStyles({
								'width' : 56,
								'height' : 56
							});
							SwatchImage.setStyles({
								'width' : 56,
								'height' : 56
							});*/
						
												
						}
				    }.bind(this),
		 		
				    onLeave: function(element, droppable){
	
						// Leaving trash change image
						if(SampleRequestTrash==droppable) {
							if(SampleRequestTrash.retrieve('total')==0) {
								SampleRequestTrashImg.src= SampleTrashEmpty.src;
							}
						}
	
				    }
				});
		
				Swatch.addEvent('mousedown', function(ev){
					var eva = new Event(ev);
					this.SwatchMouseClickPosX = eva.event.clientX;
					this.SwatchMouseClickPosY = eva.event.clientY;
				}.bind(this));
				
			}.bind(this));
			
			this.SwatchesReorder();
			this.SwatchesMouseWatch();
			
			window.addEvent('resize', function() {
				this.SwatchesReorder();
			}.bind(this));
			
			// Trash empty back 
			/*
			SampleRequestTrash.addEvent('click', function() {
				
				SampleRequestTrash.getElements('div').each(function(TrashedSwatch) {
					var NewLi = new Element('li');
					TrashedSwatch.injectInside(NewLi);
					NewLi.injectInside(this.SampleRequestSwatchesContain.getElement('ul'));
					TrashedSwatch.setStyles({
						'display' : 'block',
						'opacity' : 1,
						'width' : 56,
						'height' : 56
					});
					TrashedSwatch.getElement('img').setStyles({
						'width' : 56,
						'height' : 56
					});	
				
				}.bind(this));
				
				this.SwatchesReorder();
				
				SampleRequestTrashImg.src= SampleTrashEmpty.src;
				SampleRequestTrash.store('total', 0);
				SampleRequestTrash.setStyle('cursor', 'default');
			
			}.bind(this));
			*/
			
		} else {
			
			SamplesBasketForm.dispose();
		
		}
	
	},
	
	SwatchesReorder : function() {
	
		var SampleRequestSwatchesReord = $$('#sample_request_swatches li div.swatch_drag');

		SampleRequestSwatchesReord.each(function(Swatch, i) {
			Swatch.setStyle('left', this.SampleRequestSwatchesContain.getPosition().x);
			Swatch.setStyle('top', 310);
			Swatch.setStyle('left', Swatch.getPosition().x + (i*64));
		}.bind(this));
	
	},
	
	SwatchesMouseWatch : function() {
	
		this.SwatchMouseposX = 0;
		this.SwatchMouseposY = 0;
		
		$$('body')[0].addEvent('mousemove', function(ev){
			var eva = new Event(ev);
			this.SwatchMouseposX = eva.event.clientX;
			this.SwatchMouseposY = eva.event.clientY;
		}.bind(this));
		
	}	
	
});