var curCrop= null;

pic= new Image(); 
pic.src="/images/loading.gif"; 

function xmlhttpPost(strURL, task) {
	// SET LOADING
	//obj = document.getElementsByTagName("div");
	//obj['loading'].style.visibility = 'visible';
	//obj['loading'].style.display = 'block';
	//obj['result'].style.display = 'none';
	
	var xmlHttpReq = false;
	var self = this;
	// Mozilla/Safari
	if (window.XMLHttpRequest) {
		self.xmlHttpReq = new XMLHttpRequest();
	}
	// IE
	else if (window.ActiveXObject) {
		self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	self.xmlHttpReq.open('POST', strURL, true);
	self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	self.xmlHttpReq.onreadystatechange = function() {
		if (self.xmlHttpReq.readyState == 2 || self.xmlHttpReq.readyState == 3 || self.xmlHttpReq.readyState == 1) {
			document.getElementById("foto-container").innerHTML = '<img src="/images/loading.gif" alt="loading" />';
		} else if (self.xmlHttpReq.readyState == 4) {
			if (self.xmlHttpReq.status == 200) {
				if (task == 'rotate') {
					updatepageRotate(self.xmlHttpReq.responseText);
				}
				if (task == 'resize') {
					updatepageResize(self.xmlHttpReq.responseText);
				}
				if (task == 'show_history') {
					updatepageHistory(self.xmlHttpReq.responseText);
				}
				if (task == 'undo') {
					updatepageUndo(self.xmlHttpReq.responseText);
				}
				if (task == 'crop') {
					updatepageCrop(self.xmlHttpReq.responseText);
				}
				if (task == 'effects') {
					updatepageEffects(self.xmlHttpReq.responseText);
				}
				if (task == 'brightness-contrast') {
					updatepageBrightnessContrast(self.xmlHttpReq.responseText);
				}
			} else {
				window.alert('Sorry, er is een fout opgetreden.');
			}
		}
	}
	if (task == 'rotate') {
		self.xmlHttpReq.send(gqsRotate() +'&rand='+ Math.random() );
	}
	if(task == 'resize'){
		self.xmlHttpReq.send(gqsResize() +'&rand='+ Math.random() );
	}
	if(task == 'show_history') {
		self.xmlHttpReq.send(gqsHistory() +'&rand='+ Math.random() );
	}
	if(task == 'undo') {
		self.xmlHttpReq.send('task=undo&rand='+ Math.random() );
	}
	if(task == 'crop') {
		self.xmlHttpReq.send(gqsCrop() +'&task=crop&rand='+ Math.random() );
	}
	if(task == 'effects') {
		self.xmlHttpReq.send('src='+ document.getElementById('current').value +'&task=effects&rand='+ Math.random() );
	}
	if(task == 'brightness-contrast') {
		self.xmlHttpReq.send(gqsBrightnessContrast() +'&rand='+ Math.random() );
	}
}

function showRotate() {
	currentFoto();
		
	var show ='<h2>Roteren</h2>';
	show+='<a class="button" href="';
	show+="javascript:xmlhttpPost(' /process.php?direction=rechtsom','rotate')";
	show+=';">Rechtsom</a>';
	show+='<a class="button" href="';
	show+="javascript:xmlhttpPost(' /process.php?direction=linksom','rotate')";
	show+=';">Linksom</a>';
	show+='<a class="button" href="';
	show+="javascript:xmlhttpPost(' /process.php?direction=spiegelen','rotate')";
	show+=';">Spiegelen</a>';
	
	document.getElementById('editor-menu').innerHTML = show;
}

function showResize() {
	currentFoto();
	
	width = document.getElementById('current_width').value;
	height = document.getElementById('current_height').value;
	factor = width / height;
	
	var show ='<h2>Resize</h2>';
	show+='<div class="horizontal_track">';
	show+='<div class="horizontal_slit" >&nbsp;</div>';
	show+='<div class="horizontal_slider" id="your_slider_id" style="left: 150px;" onmousedown="';
	show+="slide(event, 'horizontal', 150, 0, "+ width +", "+ width+1 +", 0, 'currentWidth')";
	show+=';" >&nbsp;</div>';
	show+='</div>';
	show+='width: <input class="value_display" id="currentWidth" value="'+ width +'" onfocus="blur(this);" type="text">';
	show+='height: <input class="value_display" id="currentHeight" value="'+ height +'" onfocus="blur(this);" type="text">';
	show+='<br /><a class="button" href="';
	show+="javascript:xmlhttpPost(' /process.php?task=resize','resize')";
	show+=';">Verkleinen</a>';
	
	document.getElementById('editor-menu').innerHTML = show;
}

function showCrop() {
	currentFoto();
	document.getElementById('foto-container').innerHTML = '<div id="cropWrap"></div>';
	document.getElementById('cropWrap').innerHTML ='<img src=" /temp/'+ document.getElementById('current').value+'" id="cropImage" />';
	curCrop=new Cropper.Img('cropImage',{onEndCrop:onEndCrop});

	var show=' <form name="crop" action="test.php" method="post" class="frmCrop">';
	show+='<h2>Crop (bijsnijden)</h2>';
	show+='Selecteer het gebied wat uitgesneden dient te worden en klik vervolgens op de button "Crop".<br /><br />';

	show+='<input type="hidden" name="imageWidth" id="imageWidth" value="'+document.getElementById('current_width').value +'" />';
	show+='<input type="hidden" name="imageHeight" id="imageHeight" value="'+ document.getElementById('current_height').value +'" />';
	show+='<input type="hidden" name="imageFileName" id="imageFileName" value="'+ document.getElementById('current').value+'" />';
	show+='<input type="hidden" name="x" id="x" value="0"  />';
	show+='<input type="hidden" name="y" id="y" value="0" />';
	show+='<label for="cropWidth">Breedte</label><input type="text" class="value_display" name="cropWidth" id="cropWidth" value="0" readonly/>';
 	show+='<label for="cropHeight">Hoogte</label><input type="text" class="value_display" name="cropHeight" id="cropHeight" value="0" readonly/>';
 	show+='<br /><br /><a class="button" href="';
	show+="javascript:xmlhttpPost('process.php','crop')";
	show+=';">Crop</a>';

	document.getElementById('editor-menu').innerHTML = show;
}

function showEffects() {
	currentFoto();
	var show ='<h2>Effecten</h2>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=sepia\', \'effects\');">Sepia</a>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=greyscale\', \'effects\');">Zwart/wit</a>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=negative\', \'effects\');">Negatief</a>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=edges\', \'effects\');">Edges</a>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=emboss\', \'effects\');">Emboss</a>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=gaussian\', \'effects\');">Gaussian</a>';
	show+='<a class="button" href="javascript: xmlhttpPost(\'process.php?type=sketch\', \'effects\');">sketch</a>';
	
	document.getElementById('editor-menu').innerHTML = show;
}

function showHistory() {
	currentFoto();
	xmlhttpPost(' /process.php', 'show_history');
	
	document.getElementById('editor-menu').innerHTML = 'loading';
}

function showBrightnessContrast() {
	currentFoto();
	factor = 'no';
	var show ='<h2>Preview</h2>';
	show+='<img src=" /preview.php?src='+ document.getElementById('current').value +'" id="preview" alt="Loading preview" />';
	show+='<h2>Brightness</h2>';
	show+='<div class="horizontal_track">';
	show+='<div class="horizontal_slit" >&nbsp;</div>';
	show+='<div class="horizontal_slider" id="your_slider_id" style="left: 75px;" onmousedown="';
	show+="slide(event, 'horizontal', 150, -255, 255, 511, 0, 'brightness')";
	show+=';" >&nbsp;</div>';
	show+='</div>';
	show+='Value: <input class="value_display" id="brightness" value="0" onfocus="blur(this);" type="text">';
	show+='<h2>Contrast</h2>';
	show+='<div class="horizontal_track">';
	show+='<div class="horizontal_slit" >&nbsp;</div>';
	show+='<div class="horizontal_slider" id="your_slider_id_2" style="left: 75px;" onmousedown="';
	show+="slide(event, 'horizontal', 150, 100, -100, 201, 0, 'contrast')";
	show+=';" >&nbsp;</div>';
	show+='</div>';
	show+='Value: <input class="value_display" id="contrast" value="0" onfocus="blur(this);" type="text">';
	show+='<br /><a class="button" href="';
	show+="javascript:xmlhttpPost(' /process.php','brightness-contrast')";
	show+=';">Aanpassen</a>';
	
	document.getElementById('editor-menu').innerHTML = show;
}

function showSave() {
	currentFoto();
	
	var show ='<h2>Opslaan</h2>';
	show+='<a class="button" href="/download.php?src='+ document.getElementById('current').value +'&type=jpeg">Jpeg</a>';
	show+='<a class="button" href="/download.php?src='+ document.getElementById('current').value +'&type=gif">Gif</a>';
	show+='<a class="button" href="/download.php?src='+ document.getElementById('current').value +'&type=png">Png</a>';
	//show+='<hr /><h2>Online opslaan</h2>';
	//show+='Sla je foto online op met behulp van Foto-Bewaren.nl, zo kan je hem vervolgens op bijvoorbeeld een forum, in een email of op een profielensite gebruiken.';
	//show+='<form action="http://www.foto-bewaren.nl/bewaren.html" target="_blank" method="post" name="upload" enctype="multipart/form-data">';
	//show+='Titel';
	//show+='<input name="titel" id="titel" maxlength="30" type="text"><br>';
	//show+='Omschrijving';
	//show+='<input name="omschrijving" id="omschrijving" maxlength="200" type="text"><br>';
	//show+='<input name="src" type="hidden" value="'+ document.getElementById('current').value +'">';
	//show+='<a class="button" href="javascript:document.upload.submit();">Bewaren</a>';
	//show+='</form>';
	
	document.getElementById('editor-menu').innerHTML = show;
}

function undo(destImage, destWidth, destHeight) {
	currentFoto();
	xmlhttpPost(' /process.php?destImage='+ destImage +'&destWidth='+ destWidth +'&destHeight='+ destHeight, 'undo');
	
	document.getElementById('foto-container').innerHTML = 'loading';
}

function gqsRotate() {
	query = 'src='+ document.getElementById('current').value +'&task=rotate';
	return query;
}

function gqsResize() {
	query = 'src='+ document.getElementById('current').value +'&task=resize&max_width='+ document.getElementById('currentWidth').value +'&max_height='+ document.getElementById('currentHeight').value;
	return query;
}

function gqsHistory() {
	query = 'task=show_history';
	return query;
}

function gqsCrop() {
	query = 'src='+ document.getElementById('current').value +'&task=crop&x='+ document.getElementById('x').value +'&y='+ document.getElementById('y').value +'&width='+ document.getElementById('cropWidth').value +'&height='+ document.getElementById('cropHeight').value;
	return query;
}

function gqsBrightnessContrast() {
	query = 'src='+ document.getElementById('current').value +'&task=brightness-contrast&brightness='+ document.getElementById('brightness').value +'&contrast='+ document.getElementById('contrast').value;
	return query;
}

function updatepageRotate(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		response = response.split(',');
		newFilename = response[0];
		direction = response[1];
		document.getElementById("previous").value = document.getElementById("current").value;
		document.getElementById("current").value = newFilename;
		if(direction == 'rechtsom' || direction == 'linksom'){
			height = document.getElementById('current_height').value;
			document.getElementById('current_height').value = document.getElementById('current_width').value;
			document.getElementById('current_width').value = height;
		}
		document.getElementById("editor-menu").innerHTML = 'De foto is geroteert, om deze bewerking ongedaan te maken kan je de "undo" knop gebruiken.';
		currentFoto();
	}
}

function updatepageResize(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		response = response.split(',');
		newFilename = response[0];
		newWidth = response[1];
		newHeight = response[2];
		document.getElementById("previous").value = document.getElementById("current").value;
		document.getElementById("current").value = newFilename;
		document.getElementById('current_width').value = newWidth;
		document.getElementById('current_height').value = newHeight;
		document.getElementById("editor-menu").innerHTML = 'De foto is verkleint, om deze bewerking ongedaan te maken kan je de "undo" knop gebruiken.';
		currentFoto();
	}
}

function updatepageHistory(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		currentFoto();
		var show='<h2>Geschiedenis</h2>';
		show+=response;
		document.getElementById("editor-menu").innerHTML = '<div id="history">'+ show +'</div>';
	}
}

function updatepageUndo(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		response = response.split(',');
		newFilename = response[0];
		newWidth = response[1];
		newHeight = response[2];
		var show='<h2>Geschiedenis</h2>';
		show+='De afbeelding is hersteld.';
		document.getElementById("editor-menu").innerHTML = show;
		document.getElementById("current").value = newFilename;
		document.getElementById("current_height").value = newHeight;
		document.getElementById("current_width").value = newWidth;
		currentFoto();
	}
}

function updatepageCrop(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		response = response.split(',');
		newFilename = response[0];
		newWidth = response[1];
		newHeight = response[2];
		var show='<h2>Crop</h2>';
		show+='De afbeelding is bijgesneden naar '+ newWidth +'x'+ newHeight +'.';
		document.getElementById("editor-menu").innerHTML = show;
		document.getElementById("current").value = newFilename;
		document.getElementById("current_height").value = newHeight;
		document.getElementById("current_width").value = newWidth;
		currentFoto();
	}
}

function updatepageEffects(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		var show='<h2>Effecten</h2>';
		show+='De bewerking is uitgevoerd.';
		document.getElementById("editor-menu").innerHTML = show;
		document.getElementById("current").value = response;
		currentFoto();
	}
}

function updatepageBrightnessContrast(response) {
	if(response == 'error') {
		window.alert('Sorry, er is iets foutgegaan bij het uitvoeren van deze bewerking.');
	} else {
		var show='<h2>Brightness/contrast</h2>';
		show+='De brightness/contrast zijn aangepast.';
		document.getElementById("editor-menu").innerHTML = show;
		document.getElementById("current").value = response;
		currentFoto();
	}
}

function currentFoto() {
	document.getElementById('foto-container').innerHTML = '<img src="/temp/'+ document.getElementById('current').value +'" id="foto" width="'+ document.getElementById('current_width').value +'" height="'+ document.getElementById('current_height').value +'" />';
}