// max height
mh = 100;
// max width
mw = 200;

// create current menu variable
currentmen = false;

// if the document is clicked close the current menu
document.onclick = closemen;
//document.onclick = alert('test');

// global variable for image count
imgc = 0;


function resize(img){
	// check if it needs resizing
	
	if(!img.resized && ((img.height > mh && mh > 0) || (img.width > mw && mw > 0))){
		// record that it has been resized
		img.resized = true;
		img.style.cursor = "url(http://saurdo.com/gallery/images/zoomin.cur), pointer";
		// resizing algorithm (copied from thumbnail script)
		per_w = mw > 0 ? img.ow / mw : 0;
		per_h = mh > 0 ? img.oh / mh : 0;
		if (per_h > per_w) {
			img.width = img.ow / per_h;
			img.height = img.oh / per_h;
		}
		else{
			img.height = img.oh / per_w;
			img.width = img.ow / per_w;
		}
	}
	else if(img.resized){
		img.height = img.oh;
		img.width = img.ow;
		img.resized = false;
		img.style.cursor = "url(http://saurdo.com/gallery/images/zoomout.cur), pointer"
	}
	return 1;
}

function poo(img){
	//imgc++;
	// default resized to false
	img.resized = false;
	// record original width and height
	img.ow = img.width;
	img.oh = img.height;
	
	if(mh > 0 || mw > 0){
		resize(img);
		
		
		if(img.resized){
			//document.getElementById('sizebox').value += ' '+img.src+': '+img.width +'x'+ img.height;
			img.title = "Click to resize";
			img.link = false;
			
			// check if the image is linked
			if(img.parentNode && img.parentNode.nodeName == "A"){
				anchor = img.parentNode;
				img.link = anchor.href;
				//alert(img.parentNode.nodeName);
				// one parenentNode is the href, two parent nodes is the container div
				if(anchor.parentNode){
					anchor.parentNode.insertBefore(img, anchor);
					// delete the old anchor containing the old image
					anchor.parentNode.removeChild(anchor);
				}				
			}
			
			
			img.style.cursor = "url(http://saurdo.com/gallery/images/zoomin.cur)"
			// increase image count
			imgc++;
			// set the image id
			img.id = 'img'+imgc;
			// create the onclick function
			img.onclick = function(event){ context(this, event); }
				
		}
	}
}


// close context menu function
function closemen(e){
	
	if(!e) e = window.event;
	//document.getElementById('test').value = window.event.clientY;
	// test if any menus are open
	if(currentmen){
		//alert(currentmen);
		// get the object that is the context menu div
		div = document.getElementById(currentmen);
		// get the image that the context menu is for
		img = document.getElementById(div.imgid);
		//alert(time);
		// test if the current mouse pos is the same as that stored in image.
		// neccessary so we don't active the document.onclick event while
		// activating the image onclick event, 
		curpos = e.clientY * e.clientX;
		if(curpos != div.mousepos){
			//document.getElementById('test').value += curpos +' = '+div.mousepos+'\n';
			// hide our context menu
			div.style.display = "none";
			// set its value to hidden
			div.hidden = true; 
			//alert(img);
			// let it be known that no context menus are currently open
			currentmen = false;
		}
		else{
			//alert(time +' = '+div.time);
		}
	}
}

// our context menu function. image = image object, e = event for onclick
function context(img, e){

	if(!e) e = window.event;

	// test if our image has been clicked before so we create only one context menu
	if(!img.clicked){
		// our image has now been clicked
		img.clicked = true;
		
		// create a div element that will be our context menu
		mdiv = document.createElement('DIV');
		// create a div button for a resize link
		cdiv_resize = document.createElement('DIV');
		// create more buttons

		cdiv_link2 = document.createElement('DIV');

		// create our text
		resize_text = document.createTextNode('Resize Image');
		link2_text = document.createTextNode('Custom Resize');
		

		// assign our text nodes
		mdiv.textNode = resize_text;
		mdiv.textNode = link2_text;
		
		// create an anchor - will only be neccessary for images that are linked
		if(img.link){
			cdiv_link = document.createElement('DIV');
			ca_link = document.createElement('A');
			link_text = document.createTextNode('Follow Link');
			ca_link.textNode = link_text;
			cdiv_link.onmouseover = function(){ this.style.background = "#666"; }
			cdiv_link.onmouseout = function(){ this.style.background = "#222"; }
			// set the link
			ca_link.href = img.link;
		}
		
		// make hover over effects
		cdiv_resize.onmouseover = function(){ this.style.background = "#666"; }
		cdiv_resize.onmouseout = function(){ this.style.background = "#222"; }
		cdiv_link2.onmouseover = function(){ this.style.background = "#666"; }
		cdiv_link2.onmouseout = function(){ this.style.background = "#222"; }
		
		// test functions for the moment
		// resize will active our resize function using the image object as a parameter
		cdiv_resize.onclick = function(){ resize(document.getElementById(this.parentNode.imgid)); }
		// perhaps make a custom resize function where you can set the width and height
		cdiv_link2.onclick = function(){ alert(this.parentNode.imgid); }
		
		// set our buttons to have pointer style cursors
		cdiv_resize.style.cursor = "pointer";
		cdiv_link2.style.cursor = "pointer";
		
		// put the resize button in our context menu
		mdiv.appendChild(cdiv_resize);
		// put our resize text in our resize button
		cdiv_resize.appendChild(resize_text);
		if(img.link){
			// put our link in our context menu
			mdiv.appendChild(cdiv_link);
			// put our link anchor in our link
			cdiv_link.appendChild(ca_link);
			// put our link text in our link anchor
			ca_link.appendChild(link_text);
		}
		// put our custom resize button in our menu
		mdiv.appendChild(cdiv_link2);
		// put text in our resize button
		cdiv_link2.appendChild(link2_text);

		// set the context menu to have a style class
		mdiv.className = 'test';
		
		// give our image an id - might be done in the resize function
		// set our context menu div to have an id
		mdiv.id = 'div_'+img.id;
		// let our div know what image it belongs to
		mdiv.imgid = img.id;
		// let our image know what div it belongs to
		img.divid = mdiv.id;
		
		// put context menu in our window
		document.body.appendChild(mdiv);
	}
	
	// test if another menu is open, if it is close it
	if(currentmen){ closemen(e); }
	
	//img.href = "test";
	// set current menu to this images menu
	currentmen = img.divid;
	// get our div object using the id stored in the image
	div = document.getElementById(img.divid);
	// test if menu is currently hidden
	if(div.hidden){
		// make menu visible
		div.style.display = "block";
		// let others know it's visible
		div.hidden = false;
	}
	//alert(div.style.display);
	// same as the closemen function
	div.mousepos = e.clientY * e.clientX;
	// set menu position to where mouse is
	div.style.top = /*@cc_on!@*/false ? (document.documentElement.scrollTop+e.clientY)+'px' : (window.pageYOffset+e.clientY)+'px';
	div.style.left = /*@cc_on!@*/false ? (document.documentElement.scrollLeft+e.clientX + 15)+'px' : (window.pageXOffset+e.clientX + 15)+'px';

}