function initDragging(el){
	var dragContainerOptions = {
		onStart: function(){
			el.setOpacity(.5);
			el.style.zIndex = "100";
		},
		

		onComplete: function(){
			el.setOpacity(1);
			el.style.left = "";
			el.style.top = "";
			el.style.zIndex = "";
		}
	}
	var droppableOptions = {
		onDrop:function(el){
			var newImg = document.createElement("img");
			newImg.src = el.src;
			newImg.buttonName = el.name;
			newImg.className = "droppedImage";
			if(this.childNodes.length > 0 ){
				clearDropZone(this, true);
				}
			this.appendChild(newImg);
			this.title = el.id;
			var myColorFx = new Fx.Color(this, 'background-color', {duration: 500});
			myColorFx.custom('ffff9c', 'FFFFFF');
			checkForCompleteSet();
			}
		}
		
	var dropitems = document.getElementsBySelector('.dropZone');
	dropitems.each(function(drop){ 
			drop.extend(droppableOptions)  
			drop.addEvent('click', function(){clearDropZone(this, false);});
			});
	
	dragContainerOptions.droppables = dropitems;
	el.makeDraggable(dragContainerOptions);
	}//initDragging
	
	
// =========================
function clickObserver(event){
	clearDropZone(event.client);
	}
	
// =========================

function addToSet(href){
	
	
	var element = href.split("#")[1];
	element = $(element);
	var newImg = document.createElement("img");
	newImg.src = element.src;
	newImg.buttonName = element.name;
	newImg.className = "droppedImage";
	var added = false;
	
	var dropZones = $('dropContainer').getElementsBySelector(".dropZone");
	dropZones.each(function(drop){
		if(drop.getElementsByTagName('img').length == 0 && added == false){
			drop.innerHTML = '';
			drop.appendChild(newImg);
			added = true;
			}
	});
	
	if(!added){
		var theDropZone = dropZones[dropZones.length-1];
		theDropZone.innerHTML = '';
		theDropZone.appendChild(newImg);
		}
	checkForCompleteSet();
	
	}

// =========================
function checkForCompleteSet(){
		var buttons = $('dropContainer').getElementsBySelector(".droppedImage");
		if (buttons.length < 4){
			$('submitButton').src = "assets/imgs/addset.gif";
		}
		else{
			$('submitButton').src = "assets/imgs/addset_on.gif";
			observeCheckout()
			};
	
	}	
	
	
// =========================
function clearDropZone(element, withButton){
		
		if(withButton){
			var ps = element.getElementsBySelector('p');
			ps.each(function(aP){element.removeChild(aP);});
			}
		var imgs = element.getElementsBySelector('img');
		imgs.each(function(anImg){element.removeChild(anImg);});
		if(!withButton){
			element.innerHTML = "<p>Drag Button Here</p>";
						$('submitButton').src = "assets/imgs/addset.gif";

			}
	}

// =========================
function observeAddButtons(){
	var addButtons = $('buttons').getElementsBySelector("a");
	addButtons.each(function(add){
			add.onclick = function(){return false;};
			add.addEvent('click',function(){
					addToSet(this.href);					  
					
				});			 
		}); //end each
	
	}	
// =========================

function observeCheckout(){

	var buttons = $('dropContainer').getElementsBySelector(".droppedImage");
	var inputs = document.getElementsBySelector(".hiddenButton");
	
	
	for (var i=0,c=buttons.length;i<c;i++){
	  	inputs[i].value = buttons[i].buttonName;
		}
	
	
	}



// =========================
Window.onDomReady(function(){
							   
	//$('submitButton').addEvent('click',function(){needMoreButtons();});
	
	observeAddButtons();
	var draggables = document.getElementsBySelector(".draggable");
	draggables.each(function(el){
		el.onclick = function (){return false;}
		initDragging(el);
		});
		
	$('submitButton').addEvent('click',function(e){
		var buttons = $('dropContainer').getElementsBySelector(".droppedImage");
		if (buttons.length < 4){
			alert("Hey, you need to pick four game buttons!")
			var e = new Event(e);
			e.stop();
		}
		
		else{
			document.dsButtonCart.submit;
			}
		
		})
	});
	


var Event = function(e) {
    this._event = e || window.event;
}
Object.extend(Event.prototype, {
    event: function() {
        return this._event;
    },
       
    stop: function() {
        this.stopPropagation();
        this.preventDefault();
    },
    stopPropagation: function() {
        if (this._event.stopPropagation) this._event.stopPropagation();
        else this._event.cancelBubble = true;
    },
    preventDefault: function() {
        if (this._event.preventDefault) this._event.preventDefault();
        else this._event.returnValue = false;
    }
    
});