// vars
var x=0,y=0,stat=false,debug=false;
var iniX=0, iniY=0;
var scrollLeft=0,scrollTop=0,movementFactor=5;
var cursorHeight=16, cursorWidth=16, useCustomCursor=true;

// when the user clicks the image
function ClickImage()
{
	stat = true;
	iniX = x;
	iniY = y;
	var dragBox = document.getElementById("dragBox");
	dragBox.className = "dragBoxClick";
	if(useCustomCursor)
	{
		var dragCursor = document.getElementById("grab");
		dragCursor.className = "dragit";
	}
}

// when the user is dragging
function DragImage()
{	
	if(stat)
	{
		var directionX = "", directionY = "";
		if(x > iniX)
			directionX = "right";
		else if(x < iniX)
			directionX = "left";
		else if(x == iniX)
			directionX = "same";
		
		if(y > iniY)
			directionY = "down";
		else if(y < iniY)
			directionY = "up";
		else if(y == iniY)
			directionY = "same";
		
		var dragBox = document.getElementById("dragBox");	
		switch(directionX)
		{
			case 'right':
			scrollLeft-=movementFactor;
			//dragBox.scrollLeft=scrollLeft;
			break;
			case 'left':
			scrollLeft+=movementFactor;			
			break;
		}
		switch(directionY)
		{
			case 'up':
			scrollTop+=movementFactor;
			break;			
			case 'down':
			scrollTop-=movementFactor;
			break;
		}
		//dragBox.scrollLeft = scrollLeft;
		dragBox.scrollTop = scrollTop;
		
		// debug
		var debugString = "x: " + x + "<br/>y: " + y + "<br/>stat: " + stat;
		debugString+= "<br/>iniX: " + iniX + "<br/>iniY: " + iniY;
		debugString+= "<br/>direction x: Going: " + directionX + "<br/>direction y: Going: " + directionY;
		Debug(debugString);
		iniX = x;
		iniY = y;
	}
	
}

// when the user leaves the area or lift the mouse button to stop dragging.
function DropImage()
{
	if(stat)
	{
		stat = false;
		if (useCustomCursor) {
			var dragCursor = document.getElementById("grab");
			dragCursor.className = "dropit";
		}
		var dragBox = document.getElementById("dragBox");
		dragBox.className = "dragBoxOver";
	}
	
}

// records the location of the mouse.
function RecordMouseLocation(e)
{
	if (!e) var e = window.event;
	
	if (e.pageX || e.pageY) // mozilla
	{
		x = e.pageX;
		y = e.pageY;
	}
	else if (e.clientX || e.clientY) // ie
	{
		x = e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
		y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	// temp
	var t = document.getElementById("temp");
	if(t)
	{
		t.style.left = x+"px";
		t.style.top = y+"px";
	}
	
	// place the grab handle on the cursor
	if (useCustomCursor) {
		var dragCursor = document.getElementById("grab");
		dragCursor.style.left = (x - (cursorWidth / 2)) + "px";
		dragCursor.style.top = (y - (cursorHeight / 2)) + "px";
	}
	if(stat)
		DragImage();
}


// debug
function Debug(s)
{
	if(debug)
	{
		var o = document.getElementById("out");
		o.innerHTML = s;
	}
}

function OpenImageInWindow()
{
    var dobj = document.getElementById("dragItem");
	var imageToShow = dobj.style.backgroundImage;
	
	imageToShow = imageToShow.substr(4);
	imageToShow = imageToShow.replace(")", "");
    imageWindow = window.open(imageToShow, "imageWin", "width=1024,height=768");
	imageWindow.focus();
}

// initial setup.
function SetupImageViewer(imagePath)
{
	/* Code from http://www.javascriptkit.com/javatutors/navigator.shtml */
	/* Many thanks */
	if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
		var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
		if (ieversion >= 6 || ieversion >= 5)
			useCustomCursor = false;
	}
	if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { //test for Opera/x.x or Opera x.x (ignoring remaining decimal places);
		useCustomCursor = false;
	}
	/* Code use end */
	r=0;
	var image = new Image();
	image.src = imagePath;
	LoadImage(imagePath, image);
}

function LoadImage(imagePath, image)
{   
    if(image.complete)
    {
        AssignImageAttr(image, imagePath);
        return;
    }
    else
    {
        r++;
        setTimeout(function timeFunction(){LoadImage(imagePath, image)}, 500);
    }
}

function AssignImageAttr(image, imagePath)
{
    var height = image.height;
	    
    var item = document.getElementById("dragItem");
    if(item)
    {
	    item.style.backgroundImage = "url("+imagePath+")";
	    if(height!=null && height!="")
	        item.style.height = height + "px";
	    else
	        item.style.height = 2315+"px";
    }
    else
	    alert("element: 'dragItem' : not found");
	
    document.onmousemove = RecordMouseLocation;
    document.onmouseup = DropImage;
    /*window.onmousemove = RecordMouseLocation;*/

    var dragBox = document.getElementById("dragBox");
    // assign the viewport to the middle of the image
    dragBox.scrollLeft = (dragBox.scrollWidth/2);
    dragBox.scrollTop = 0;
	
    // assign the initial scroll values
    scrollLeft = dragBox.scrollLeft;
    scrollTop = dragBox.scrollTop;
}