//@Author Nemesh Singh
//Company XtremeHeights.Com
//Development Type : Web2.0
//Functionality : This code makes the absolutely positioned Layer draggable. 
//Usage : Include dragwindow.js in your file and just add id="drag-header" to make it draggable
//Use : Can be used to open a dynamic window and then the visitor can drag the window to the location he wants :)
//Remember that mainContainer should be absolute in order to make it working.

//Check for the browser and set variable names for later use.
if (parseInt(navigator.appVersion.charAt(0)) >= 4) {
  isFireFox = (navigator.appName == "Netscape") ? true : false
  isIE  = (navigator.appName.indexOf("Microsoft") != -1) ? true : false
  isMac = (navigator.platform.indexOf("Mac") != -1) ? true : false
}

//Set some Global Variables
var movingStatus = "";
var mainContainer = "addITS";
var oldX, oldY, movingStatus, mainContainer;

function doMouseDown(e) {
	
	// Calculate the position of the mouse
	  if (isFireFox) { //For Netscape 
		theTarget = e.target;
		if (theTarget.id != "drag-header"){ //Only drag if the header id is drag-header
				return false;	
			}
		xWin = e.pageX;
		yWin = e.pageY;
	  }
	  else { //For Internet Explorer
		theTarget = window.event.srcElement;
		
		if (theTarget.id != "drag-header"){ //Only drag if the header is drag-header
				return false;	
			}
		xWin = window.event.clientX;
		yWin = window.event.clientY + document.body.scrollTop;    //IE is Screen Specific and cannot understand the top and left from 0,0 position if page has scrolling. Hence added document.body.scrollTop
	  }
	
		if (movingStatus == "drag") { //Check moving status, if drag mode is set dont drag again
				//alert("You are already dragging an object.");	
			}
//				  itemName = "";
//				  itemCartSlot = "";
//				  mainContainer = "";
//				  theLayer = "";
	  
				//mainContainer = "addITS"; //Set which layer to move
				
				 if (isFireFox) { 
       				 theLayer = document.getElementById(mainContainer); //Get Div Layer
        			// alert("Layer: " + mainContainer + " Object: " + theLayer + " Left: " + theLayer.style.left);
     			 }
				
				if (isFireFox)
				{
				  // px should be used because it would give error Parse Error in parsing value for property 'left'. Declaration dropped. Line: 0".
				 /* theLayer.style.left = xWin+350+'px';
				  theLayer.style.top = yWin+205+'px';*/
				}
			
		
				movingStatus = "drag"; //Set the moving status to drag mode
				
				// Now initialize mouse tracking, and set the first position for dragging
        		
				if (isFireFox) { 
				  document.captureEvents(Event.MOUSEMOVE);
				  oldX = e.clientX;
				  oldY = e.clientY;
				  startX = parseInt(theLayer.style.left);
				  startY = parseInt(theLayer.style.top);
				} else {
				  oldX = window.event.offsetX;
				  oldY = window.event.offsetY;
				}
				//alert(oldX)
				document.onmousemove = startDrag; //Start Drag
				 
				return false;

}

function startDrag(e) {
if (movingStatus == "drag") {
		
		// Start Dragging from this point
    
    if (isFireFox) {
      // Track the difference, and add the starting position to it  
      theLayer.style.left = startX + e.clientX - oldX + 'px';
      theLayer.style.top = startY + e.clientY - oldY + 'px';
    }
    else {
      if (isMac) {
        document.all[mainContainer].style.pixelLeft = window.event.clientX ;
        document.all[mainContainer].style.pixelTop  = (window.event.clientY) + document.body.scrollTop ;
      }
      else {
        // On windows, the Y is fixed not relative to page scroll, so compensate
        document.all[mainContainer].style.left = window.event.clientX + document.body.scrollLeft- oldX-380 ;
        document.all[mainContainer].style.pixelTop  = (window.event.clientY) + document.body.scrollTop- oldY;
      }
    }
	   return false;
	   
	}
}

function doMouseUp(e){
	window.status = "MouseUp";
	if (movingStatus == "drag") { //Stop Drag Mode if moving status is set to Drag Mode.
		movingStatus = ""; 
	}
}

document.onmousedown=doMouseDown;
document.onmouseup=doMouseUp;