/**
 * ImageViewer application class
 */
function myMementoApp() {
	this.images = false;
	this.imageLookup = new Object();
	this.currentImage = false;
	this.previewImage = false;

	this.previewTimer = false;
	this.previewStatus = false;

	this.remotePool = new objectPool();
	this.remotePool.createObject = function() { var cb = new myMementoCB(app); var o = new mymemento(cb); cb.remote = o; return o; };
}

/**
 * Load basic image data in
 */
myMementoApp.prototype.setup = function() {
	this.canvas = document.getElementById('canvas');
	
	//var body = document.getElementsByTagName('body').item(0);
	//this.canvas.style.width = (body.clientWidth - 80)+'px';
	//this.canvas.style.height = (body.clientHeight - 40)+'px';
	this.canvas.style.top = "20px";
	this.canvas.style.left = "20px";
	this.canvas.style.bottom = "20px";
	this.canvas.style.right = "20px";

	var remote = this.remotePool.getObject();
	remote.get_image_data();
}

/**
 * Show the loading div
 */
myMementoApp.prototype.showLoading = function() {
	document.getElementById('loading').style.visibility = "visible";
}

/**
 * hide the loading div
 */
myMementoApp.prototype.hideLoading = function() {
	document.getElementById('loading').style.visibility = "hidden";
}

/**
 * create and position all images we have data for
 */
myMementoApp.prototype.displayImages = function() {
	for(var key in this.images) {
		if (this.images[key].name) {
			this.displayImage(this.images[key]);
		}
	}
}

/**
 * create and position all images we have data for
 */
myMementoApp.prototype.displayImage = function(image) {
	var imageId = this.generateId(image.name);	
	this.imageLookup[imageId] = image.name;

	var imageDiv = document.getElementById(imageId);
	var imageNode = undefined;
	var newDiv = false;

	if (!imageDiv) {
		imageDiv = this.canvas.appendChild(document.createElement('div'));
		innerDiv = this.canvas.appendChild(document.createElement('div'));
		imageDiv.innerHTML = "<div class='alpha-shadow'><div><img></div></div></div>";
		imageDiv.id = imageId;
		imageDiv.className = "image";

		newDiv = true;
	}
	imageNode = imageDiv.getElementsByTagName('img').item(0);
	imageNode.width = image.thumbWidth;
	imageNode.height = image.thumbHeight;
	imageNode.src = image.thumbUrl;

	imageDiv.className = "image"
	imageDiv.style.top = image.position.top;
	imageDiv.style.left = image.position.left;

	var callback = function() { app.handleClick(this); }
	imageDiv.onclick = callback;

	var callback = function() { app.handleMouseOver(this); }
	imageDiv.onmouseover = callback;

	var callback = function() { app.handleMouseOut(this); }
	imageDiv.onmouseout = callback;

	if (newDiv) {
		ADD_DHTML(imageId+TRANSPARENT);
	}
}

/**
 * Show a preview of an image
 */
myMementoApp.prototype.showPreview = function() {
	this.previewTimer = false;
	if (!this.previewStatus || (this.previewStatus && this.currentImage != this.previewImage)) {
		this.previewImage = this.currentImage;
		new Effect.Appear('preview');
		
		var body = document.getElementById('previewBody');
		body.style.filter = "alpha(opacity:"+70+")";
		body.style.opacity = .7;

		var file = this.imageLookup[this.currentImage];

		var remote = this.remotePool.getObject();
		remote.get_preview_data(file,body.clientWidth,body.clientHeight);
		
	}
	this.previewStatus = true;
}

/**
 * Load in preview data
 */
myMementoApp.prototype.loadPreviewData = function(data) {
	var body = document.getElementById('previewBody');
	var images = body.getElementsByTagName('img');
	var img = undefined;
	if (images.length > 0) {
		img = images.item(0);
	}
	else {
		img = document.createElement('img');
	}
	img.width = data.width;
	img.height = data.height;
	img.src = data.url;
	body.appendChild(img);
	
	body.style.filter = "alpha(opacity:"+100+")";
	body.style.opacity = 1;
}

/**
 * Show a preview of an image
 */
myMementoApp.prototype.hidePreview = function() {
	if (this.previewTimer) {
		clearTimeout(this.previewTimer);
		this.previewTimer = false;
	}
	if (this.previewStatus) {
		debug('hide preview',this.currentImage);
		this.previewStatus = false;
	}
}

/**
 * handle a click from an image
 */
myMementoApp.prototype.handleClick = function(imageDiv) {
	//debug('handleClick',imageDiv.id);
	this.currentImage = imageDiv.id;
}

/**
 * handle a mouse on
 */
myMementoApp.prototype.handleMouseOver = function(imageDiv) {
	this.currentImage = imageDiv.id;
	//debug('handleMouseOver',imageDiv.id);

	//if (this.previewTimer == false && this.previewStatus == false) {
	//	this.previewTimer = setTimeout( function() { app.showPreview(); }  ,600);
	//}
}

/**
 * handle a mouse off
 */
myMementoApp.prototype.handleMouseOut = function(imageDiv) {
	//debug('mouse out',imageDiv.id);

	//this.hidePreview();
}


/**
 * Take a file name and generate something usable as an id
 */
myMementoApp.prototype.generateId = function(filename) {
	return filename.replace(/[^a-z0-9]/ig,'_');
}


/**
 * Called by wz_dragdrop at the end of a dragdrop
 */
myMementoApp.prototype.imageMoved = function(imageDiv) {
//	debug('imageMoved',imageDiv.id);

	var store = new Object();
	store.file = this.imageLookup[imageDiv.id];
	store.left = imageDiv.style.left;
	store.top = imageDiv.style.top;

	imageNode = imageDiv.getElementsByTagName('img').item(0);
	store.width = imageNode.width;
	store.height = imageNode.height;

	var remote = this.remotePool.getObject();
	remote.update_thumb(store);
}

/**
 * Image Viewer callback class
 */
function myMementoCB(caller) {
	this.caller = caller;
}

myMementoCB.prototype.get_image_data = function(result) {
	this.caller.remotePool.returnObject(this.remote.poolId);
	this.caller.images = result;
	this.caller.displayImages();
	this.caller.hideLoading();

	
}

myMementoCB.prototype.get_preview_data = function(result) {
	this.caller.remotePool.returnObject(this.remote.poolId);
	this.caller.loadPreviewData(result);
}

myMementoCB.prototype.update_thumb = function(result) {
	this.caller.remotePool.returnObject(this.remote.poolId);
}


var debugCount = 0;
/**
 * Recursive debug function outputs to a element with the id of debug
 */
function debug(name,value) {
	var type = typeof(value);
	if (type == "object" || type == "array") {
		document.getElementById('debug').innerHTML += name + " {<div>";
		for(var prop in value) {
			debugCount++;
			if (debugCount < 3) {
				debug("&nbsp; |- "+prop,value[prop]);
			}
			debugCount--;
		}
		document.getElementById('debug').innerHTML += "</div>}";
	}
	else {
		if (type == "function") {
			value = "";
		}
		document.getElementById('debug').innerHTML += "<div>"+name+": ("+type+") "+value+"</div>";
	}
}

// wz_dragdrop tie in
function my_DropFunc()
{
	app.imageMoved(document.getElementById(dd.obj.id));	
	return true;
}