var startDragging = false;
var isDragging = false;
var draggedItem = null;

function init()
{
	// grab everything and extend them
	var widgetOne	 	= Element.extend( $("widgetOne") );
	var widgetTwo 		= Element.extend( $("widgetTwo") );
	var widgetThree 		= Element.extend( $("widgetThree") );
	var widgetFour		= Element.extend( $("widgetFour") );
	var shoppingCart	= Element.extend( $("shoppingCart") );
	var checkOut 		= Element.extend( $("checkOut") );
	
	// initialize the draggable areas
	Event.observe( widgetOne, "mousedown", dragStart );
	Event.observe( widgetOne, "mouseup", dragStop );
	Event.observe( widgetOne, "mousemove", drag );
	
	Event.observe( widgetTwo, "mousedown", dragStart );
	Event.observe( widgetTwo, "mouseup", dragStop );
	Event.observe( widgetTwo, "mousemove", drag );
	
	Event.observe( widgetThree, "mousedown", dragStart );
	Event.observe( widgetThree, "mouseup", dragStop );
	Event.observe( widgetThree, "mousemove", drag );
	
	
	Event.observe( widgetFour, "mousedown", dragStart );
	Event.observe( widgetFour, "mouseup", dragStop );
	Event.observe( widgetFour, "mousemove", drag );
	
	// also need to check for mouse release on the window
	Event.observe( window, "mousemove", drag );
	Event.observe( window, "mouseup", dragStop );
	
	// observer the shopping cart
	Event.observe( shoppingCart, "mouseup", release )
	
	// initialize checkOut
	Event.observe( checkOut, "mousedown", buttonDown );
	Event.observe( checkOut, "mouseup", buttonUp );
	Event.observe( checkOut, "click", getCart );
}

/* ========================= */
/* = Button Event Handlers = */
/* ========================= */

function buttonDown( e )
{
	this.className = "buttonDown";
}

function buttonUp( e )
{
	this.className = "buttonUp";
}

function getCart( e )
{
	// make a request
	var cart = new Ajax.Request("drag.php",
		{
			method : "get",
			onSuccess : function( transport )
			{
				var response = transport.responseText;

				if( response )
				{
    						 myHandler( req.responseText );
				}
			},
			parameters : { action : "getCart" }
		}
	);
}

/* ====================== */
/* = Drag Event Handler = */
/* ====================== */

function dragStart( e )
{
	if( !startDragging )
	{
 		draggedItem = document.createElement( "div" );
		draggedItem.id = "draggedItem";
		draggedItem.className = "Widget";
		
		// add a text node to it
		var type = "";
		if( this == $('widgetOne') )
		{
			draggedItem.type = 0;
			type = "One";
		}
		else if( this == $('widgetTwo') )
		{
			draggedItem.type = 1;
			type = "Two";
		}
		else if( this == $('widgetThree') )
		{
			draggedItem.type = 2;
			type = "Three";
		}
		else if( this == $('widgetFour') )
		{
			draggedItem.type = 3;
			type = "Four";
		}
		var itemTitle = document.createTextNode( "Widget " + type );
		draggedItem.appendChild( itemTitle );

		Element.extend( draggedItem );
		
		// position the draggedItem
		var mx = Event.pointerX( e );
		var my = Event.pointerY( e );
		
		// notice we have to coerce the integer into css pixel notation
		draggedItem.style.left = mx + "px";
		draggedItem.style.top = my + "px";

		// add the widget to the page and show it
		document.body.appendChild( draggedItem );
		draggedItem.show(); 
		
		startDragging = true;
	}
}

function dragStop( e )
{
	// mouse was release stop dragging
	startDragging = false;
	
	// remove the dragged item from the page
	if( draggedItem )
	{
		document.body.removeChild( $('draggedItem') );
		draggedItem = null;
	}
}

function drag( e )
{
	if( startDragging )
	{
		startDragging = false;
		isDragging = true;
	}
	
	if( isDragging )
	{
		// update the position of draggedItem
		// position the draggedItem
		var mx = Event.pointerX( e );
		var my = Event.pointerY( e );
		
		// notice we have to coerce the integer into css pixel notation
		draggedItem.style.left = mx + "px";
		draggedItem.style.top = my + "px";
	}
}

function release( e )
{
	// send out the request to add a widget
	if( draggedItem )
	{
		var addItem = new Ajax.Request("drag.php",
			{
				method : "get",
				parameters : { action : "addItem", type : draggedItem.type }
			}
		);

		// remove the item from the page set draggedItem global var to null
		document.body.removeChild( $('draggedItem') );
		draggedItem = null;
		isDragging = false;
		startDragging = false;
	}
}

function myHandler( responseText )
{
    // we going to dynamically update a portion of the page
    
    // get a reference to the dynamic div
    var dynamic = document.getElementById( "dynamic" );
    
    // set the innerHTML property to the reponseText
    dynamic.innerHTML = responseText;
}