// JavaScript File

function drag(event, whosImage, imageID) 
{
	var temp = "";
	elementToDrag = dId("dragBox");
    var dragXOffset, dragYOffset;
    var startX = event.clientX, startY = event.clientY;
    var draggedImage = dId(whosImage).src;
    var boomNumber = 1;

    dId("dragImage").src = draggedImage;

    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
    var deltaX = startX - origX, deltaY = startY - origY;

    if (document.addEventListener) {  // DOM Level 2 event model
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        elementToDrag.setCapture( );
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event.
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        var oldmovehandler = document.onmousemove; // used by upHandler( )
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.
    if (event.stopPropagation) event.stopPropagation( );  // DOM Level 2
    else event.cancelBubble = true;                      // IE
    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault( );   // DOM Level 2
    else event.returnValue = false;                     // IE

    function moveHandler(e) 
    {
		dCss("dragBox").borderWidth = "1px";
		dCss("dragBox").backgroundColor = "#ffffff";
		if (document.addEventListener) 
		{
		    dCss("dragBox").opacity = 0.5;
	    } 
	    else 
	    {
			dCss("dragBox").filter = "alpha(opacity=50)";
	    }
        
        if (!e) e = window.event;  // IE Event Model

        // Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.
	    if (document.addEventListener) 
	    {
			dragXOffset = window.pageXOffset;
			dragYOffset = window.pageYOffset;
	    } 
	    else 
	    {
			dragXOffset = document.body.scrollLeft;
			dragYOffset = document.body.scrollTop;
	    }

        elementToDrag.style.left = (e.clientX-28+dragXOffset) + "px";
        elementToDrag.style.top = (e.clientY-28+dragYOffset) + "px";
        
        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
        else e.cancelBubble = true;                  // IE
        
        var basketY = (dId("fixedBasket").offsetTop+dragYOffset);
        var dragY = (dId("dragBox").offsetTop+18);
        
        if(dragY > basketY)
        {
            dId("basketActionsTable").className = "bgdHover";
        } else 
        {
            dId("basketActionsTable").className = "bgd";
        }
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture( );
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
        else e.cancelBubble = true;                  // IE
        
        var basketY = (dId("fixedBasket").offsetTop+dragYOffset);
        var dragY = (dId("dragBox").offsetTop+18);
        var itemId = imageID.substring(5,imageID.length);
        var itemType = imageID.substring(0,5);
        //var itemCartId = dId(whosImage).parentNode.parentNode.id.substring(4,whosImage.length);
        
        dId("basketActionsTable").className = "bgd";

        if(itemType == "thumb")
        {
		    if(dragY > basketY)
		    {
	            AddImageToLightBox(itemId);
			}
			resetDragBox();
		} else if (itemType == "baske"){
		    if(dragY < basketY){
		            DeleteImageFromLightBox(itemId);
					boomNumber = 1;
    				doBoom();
			} else {
				resetDragBox();
			}
		}
    }
    
    function resetDragBox(){
    
       
		if (document.addEventListener) {
			dCss("dragBox").opacity = 0;
	    } else {
			dCss("dragBox").filter = "alpha(opacity=0)";
	    }
		dCss("dragBox").top = 0;
		dCss("dragBox").left = 0;
    }
 
    function doBoom(){
		dCss("dragBox").borderWidth = 0;
		dCss("dragBox").backgroundColor = "transparent";
		if (document.addEventListener) {
			dCss("dragBox").opacity = 1;
			tempImage = "siteImages/boom"+boomNumber+".png";
	    } else {
			dCss("dragBox").filter = "alpha(opacity=100)";
			tempImage = "siteImages/boom"+boomNumber+".gif";
	    }
		dCss("dragBox").opacity = 1;
	    dId("dragImage").src = tempImage;
	    if((boomNumber++)<2){
			window.setTimeout(doBoom,150);
	    } else if((boomNumber++)<6){
			window.setTimeout(doBoom,80);
	    } else {
			resetDragBox();
	    }
   }
}


/* catalog update progress scripts */

function CatalogonUpdating()
{
    // get the update progress div
    var updateProgressDiv = $get('updateProgressDiv'); 

    //  get the gridview element        
//    var gridView = $get('<%= this.gvCustomers.ClientID %>');

    // make it visible
    updateProgressDiv.style.display = '';        

    // get the bounds of both the gridview and the progress div
//    var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
    var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

    var x;
    var y;
    var dragXOffset;
    var dragYOffset;

    if (document.addEventListener) 
    {
		dragXOffset = window.pageXOffset;
		dragYOffset = window.pageYOffset;
    } 
    else 
    {
		dragXOffset = document.body.scrollLeft;
		dragYOffset = document.body.scrollTop;
    }

    x = ((screen.width-updateProgressDivBounds.width-40));
    y = (dragYOffset);

    //    do the math to figure out where to position the element
//    if($get('rdoCenter').checked)
//    {
//        //  center of gridview
//        x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
//        y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);        
//    }
//    else if($get('rdoTopLeft').checked)
//    {
//        //  top left of gridview
//        x = gridViewBounds.x;
//        y = gridViewBounds.y;
//    }
//    else
//    {
//        //  top right of gridview
//        x = (gridViewBounds.x + gridViewBounds.width - updateProgressDivBounds.width);
//        y = gridViewBounds.y;
//    }

    //    set the progress element to this position
    Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);           
}

function CatalogonUpdated() 
{
    // get the update progress div
    var updateProgressDiv = $get('updateProgressDiv'); 
    // make it invisible
    updateProgressDiv.style.display = 'none';
}