var drag;
var coordinates;
var curr_folder;
var imagecount = 0;
var images;
var last_image;
var loaded = true;
var selectedobject;

function initialize() {
	
	loadFolder("jackets");
		
	coordinates = ToolMan.coordinates();
	drag = ToolMan.drag();
	
	group = drag.createSimpleGroup(document.getElementById("slider"));
	group.horizontalOnly();

	document.onkeydown = keyListener;

}

function addImage(folder, file, width, height) {
	
	//alert('about to create spacer');

	var spacer  = document.createElement('img');
	spacer.src = "images/spacer.png";
	spacer.height = 1;
	spacer.width = 12;
	document.getElementById("slider").appendChild(spacer);	
	
	//alert('created');
	
	var newImg  = document.createElement('img');
	newImg.src = "get_image.php?dim=100\&folder=" + folder + "\&file=" + file;
	newImg.setAttribute('folder', folder);
	newImg.setAttribute('file', file);
	//newImg.setAttribute('onmouseover', function() { return escape(file); });
	//newImg.setAttribute('onclick', function() { showImage(this.getAttribute('folder'), this.getAttribute('file'), width, height); });
	newImg.onmouseover = function() { return escape(file); };
	newImg.onclick = function() { showImage(this.getAttribute('folder'), this.getAttribute('file'), width, height); };
	document.getElementById("slider").appendChild(newImg);
	
	last_image = newImg;
	
	//alert('done adding image');
	  
}

function showImage(fold, file, new_width, new_height) {
	
	//alert('about to show');
	
	var workspace = document.getElementById("workspace");
	var image;
	var holder = document.getElementById(fold + "_holder");
	
	//document.getElementById("item_name").innerHTML = file;
	//alert(file);
	
	if (holder==null) {
		
		//alert('adding holder');
		
		holder = document.createElement('div');
		holder.id = fold + "_holder";
		setStyle(holder, "z-index", workspace.getElementsByTagName("div").length);
		setStyle(holder, "position", "absolute");
		workspace.appendChild(holder);
		
		image = document.createElement('img');
		image.id = fold + "_image";
		image.setAttribute('scale', 0.5);
		image.setAttribute('folder', fold);
		setStyle(image, "cursor", "move");
		image.onload = function() {
			this.width = this.getAttribute('prescaled_width') * this.getAttribute('scale');
			this.height = this.getAttribute('prescaled_height') * this.getAttribute('scale');
			setStyle(this, "display", "block");
		};
		image.onclick = function() {
			emptySelection();
			loadFolder(fold);
			moveToTop(document.getElementById(fold + "_holder"));
		}
		holder.appendChild(image);
		
		setStyle(holder, "z-index", 1000);
		
		var group = drag.createSimpleGroup(holder);
		group.addTransform(function(coordinate, dragEvent) {
			var image = document.getElementById(fold + "_image");
			var bottom = document.getElementById("bottom");
			var workspace = document.getElementById("workspace");
			var topleft = coordinates.create(
									bottom.offsetLeft + workspace.offsetLeft + 5,
									bottom.offsetTop + workspace.offsetTop + 5);
			var bottright = coordinates.create(
									bottom.offsetLeft + workspace.offsetLeft
										+ workspace.offsetWidth - image.offsetWidth - 5,
									bottom.offsetTop + workspace.offsetTop
										+ workspace.offsetHeight - image.offsetHeight - 5
									);
			return coordinate.constrainTo(topleft, bottright);
		})		
		
	} else {
		
		image = document.getElementById(fold + "_image");
		
	}
	
	image.setAttribute('file', file);
	
	setStyle(image, "display", "none");
	
	moveToTop(holder);
	
	var prescale = 0.6;
	image.src = "get_scaled_image.php?scale=" + prescale + "\&folder=" + fold + "\&file=" + file;
	image.setAttribute('full_width', new_width);
	image.setAttribute('full_height', new_height);
	image.setAttribute('prescaled_width', new_width * prescale);
	image.setAttribute('prescaled_height', new_height * prescale);
	//image.width = image.prescaled_width * image.scale;
	//image.height = image.prescaled_height * image.scale;
	
	
			
}

function loadFolder(fold) {

		if (curr_folder == fold || loaded == false)
			return;
		
		loaded = false;
		
		var slider = document.getElementById("slider");
		setStyle(slider, "left", "0px");
		
		AjaxRequest.get(
			{
				'url':'image.php',
				'folder':fold,
				'onLoading':function(req){ slider.innerHTML =
					"<center><br><br><b>Loading category...</b></center>"; },
				'onSuccess':function(req){ displayFolder(fold, req); },
				'timeout':6000,
				'onTimeout':function(req){ slider.innerHTML =
					"<center><br><br><b>Sorry, we timed out... please " +
						"<a href=\"javascript:loadFolder('" + fold + "');\">retry</a>.</b></center>";
					loaded = true;}
			}
		);
		
	
}

function displayFolder(fold, req) {

	curr_folder = fold;
	xmlDoc = req.responseXML;
	count = xmlDoc.documentElement.getElementsByTagName("total")[0].getAttribute("count");
	images = xmlDoc.documentElement.getElementsByTagName("image");
	document.getElementById("slider").innerHTML = "";
	for (i=0; i<count; i++) {
		addImage(curr_folder,
				 images[i].getAttribute("src"), 
				 images[i].getAttribute("width"),
				 images[i].getAttribute("height"));
	}
	loaded = true;
}

function keyListener(e){
	
	if(!e){ //for IE
		e = window.event;
	}
	
	//alert(e.keyCode);

	if(e.keyCode==46){
		//keyCode 46 is delete
		deleteSelected();
	}

	if(e.keyCode==37){
		//keyCode 37 is left arrow
		left = parseInt(getStyle(document.getElementById("slider"), "left"));
		if (left < 0)
			setStyle(document.getElementById("slider"), 'left', left + 30);
	}
	if(e.keyCode==39){
		//keyCode 39 is right arrow
		left = parseInt(getStyle(document.getElementById("slider"), 'left'));
		if (left > (document.getElementById("slider_holder").offsetWidth
												- last_image.offsetLeft - last_image.width - 15)) {
			setStyle(document.getElementById("slider"), 'left', left - 30);
		}
	}

	if(e.keyCode==35){
		//keyCode 35 is end key
		setStyle(document.getElementById("slider"), 'left',
			document.getElementById("slider_holder").offsetWidth
				- last_image.offsetLeft - last_image.width - 15);
	}

	if(e.keyCode==36){
		//keyCode 36 is home key
		setStyle(document.getElementById("slider"), 'left', 0);
	}

	//alert(e.keyCode);
	
}

function deleteSelected() {
	if (selectedobject==null) return;
	selectedobject.parentNode.parentNode.removeChild(selectedobject.parentNode);
	selectedobject = null;
}

function setStyle(object, attribute, value) {
    if(document.defaultView && document.defaultView.getComputedStyle){
        object.setAttribute('style', object.getAttribute('style') + attribute + ": " + value + "; ");	
    }
    else if(object.currentStyle){
		object.style.cssText += ("; " + attribute + ": " + value + "; ");
    }
}

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

function moveToTop(holder) {
	
	if (holder==null) return;
	
	var workspace = document.getElementById("workspace");
	
	var children = workspace.getElementsByTagName("div");
	//alert(children.length);
	
	//alert("before-list");
	
	for (var iNode = 0; iNode < children.length; iNode++) {
		var node = children[iNode];
		//alert(getStyle(node, 'z-index'));
	}	
	
	for (var iNode = 0; iNode < children.length; iNode++) {
		var node = children[iNode];
		if (getStyle(node, 'z-index') > getStyle(holder, 'z-index')) {
			//alert('setting z-index to ' + getStyle(node, 'z-index') - 1);
			setStyle(node, "z-index", getStyle(node, 'z-index') - 1);
		}
		node.getElementsByTagName("img")[0].border = 0;
	}

	//alert("after-list");
	
	for (var iNode = 0; iNode < children.length; iNode++) {
		var node = children[iNode];
		//alert(getStyle(node, 'z-index'));
	}

	setStyle(holder, "z-index", children.length - 1);
	
	selectedobject = holder.getElementsByTagName("img")[0];
	selectedobject.border = 2;
	
	// show the filename of the currently selected image
	document.getElementById("item_name").innerHTML = selectedobject.getAttribute('file');
	
}

function emptySelection(){
	var sel;
	if(window.getSelection)
		sel = window.getSelection();
	else if(typeof document.selection!="undefined")
		sel = document.selection;
	if(sel) {
		if(sel.empty)
			sel.empty();
		else if(sel.removeAllRanges)
			sel.removeAllRanges();
	}
}

function showfull() {
			if (selectedobject==null) return;
	window.open(selectedobject.src + "&scale=1", "fullWin", "toolbar=no, directories=no, location=no, menubar=no, scrollbars=no, width=" + (parseInt(selectedobject.getAttribute('full_width'))+20) + ", height=" + (parseInt(selectedobject.getAttribute('full_height'))+25));
}

function showhelp() {
	window.open("help.php", "helpWin", "toolbar=no, directories=no, location=no, menubar=no, scrollbars=yes, width=500, height=333");
}

function resize() {

	  var myWidth = 0, myHeight = 0;
	  if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	  } else if( document.documentElement &&
		  ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	  }


	//do stuff here

}

function scale(object_to_scale, factor) {

	if (object_to_scale==null) return;
	
	var old_width = object_to_scale.width;
	var old_height = object_to_scale.height;
	
	object_to_scale.setAttribute('scale', object_to_scale.getAttribute('scale') * factor);
	object_to_scale.width = object_to_scale.getAttribute('prescaled_width')
										* object_to_scale.getAttribute('scale');
	object_to_scale.height = object_to_scale.getAttribute('prescaled_height')
										* object_to_scale.getAttribute('scale');
	
	setStyle(object_to_scale.parentNode, "left", parseInt(getStyle(object_to_scale.parentNode, 'left')
											+ (old_width - object_to_scale.width) / 2));
	setStyle(object_to_scale.parentNode, "top", parseInt(getStyle(object_to_scale.parentNode, 'top')
											+ (old_height - object_to_scale.height) / 2));

}

function setWorkspace(html) {
	
	var workspace = document.getElementById("workspace");
	var workspace_width = parseInt(getStyle(workspace, "width"));
	var workspace_height = parseInt(getStyle(workspace, "height"));
	var children = workspace.getElementsByTagName("div");
	
	workspace.innerHTML = html;

	for (var iNode = 0; iNode < children.length; iNode++) {
		var node = children[iNode];
		var img = node.getElementsByTagName("img")[0];
		
		var group = drag.createSimpleGroup(node);
		img.onload = function() {
			this.width = this.getAttribute('prescaled_width') * this.getAttribute('scale');
			this.height = this.getAttribute('prescaled_height') * this.getAttribute('scale');
			setStyle(this, "display", "block");
		};
		img.onclick = function() {
			emptySelection();
			loadFolder(this.getAttribute('folder'));
			moveToTop(document.getElementById(this.getAttribute('folder') + "_holder"));
		}

		group.addTransform(function(coordinate, dragEvent) {
			var image = document.getElementById(node.id);
			var bottom = document.getElementById("bottom");
			var workspace = document.getElementById("workspace");
			var topleft = coordinates.create(
									bottom.offsetLeft + workspace.offsetLeft + 5,
									bottom.offsetTop + workspace.offsetTop + 5);
			var bottright = coordinates.create(
									bottom.offsetLeft + workspace.offsetLeft
										+ workspace.offsetWidth - image.offsetWidth - 5,
									bottom.offsetTop + workspace.offsetTop
										+ workspace.offsetHeight - image.offsetHeight - 5
									);
			return coordinate.constrainTo(topleft, bottright);
		})

		setStyle(node, "left", (node.getAttribute("left_fraction") * workspace_width) + "px");
		setStyle(node, "top", (node.getAttribute("top_fraction") * workspace_height) + "px");

}

		


}

function getWorkspace() {
	
	var workspace = document.getElementById("workspace");	
	var children = workspace.getElementsByTagName("div");

	for (var iNode = 0; iNode < children.length; iNode++) {
		var node = children[iNode];
		var img = node.getElementsByTagName("img")[0];
		node.setAttribute("top_fraction",
					parseInt(getStyle(node, "top")) / parseInt(getStyle(workspace, "height")));
		node.setAttribute("left_fraction",
					parseInt(getStyle(node, "left")) / parseInt(getStyle(workspace, "width")));
	}

	return workspace.innerHTML;
	
}