gBreedte = 162;
oFoto = false;

function ToonPreview(pad) {
	pad = new String(pad);
	
	// check of het een foto is
	/***
	var aPad = new Array();
	aPad = pad.split(".");
	
	tmpPad = aPad[aPad.length - 1].toLowerCase();
	
	if(tmpPad != "jpg" && tmpPad != "gif") {
		alert("Je kan alleen JPEG en GIF afbeeldingen uploaden!");
		document.forms['uploadForm'].elements['foto'].value = "";
		document.forms['uploadForm'].elements['foto'].select();
		return;
	}
	***/
	
	oFoto = document.getElementById('preview-foto');
	if(navigator.platform == "MacPPC") {
		pad = "file://localhost" + pad;
	}
	else if(navigator.appName == "Netscape") {
		pad = pad.replace(/\\/g, "/"); 
		pad = "file:///" + pad;
	}

	oFoto.src = pad;
	oFoto.width = gBreedte;
	
	oFoto.style.display = "block";
	document.getElementById('uploadKnop').style.display = "block";
	
}

function ToonProgress(){
	// BestandsGrootte();
	
	// bUploaded.start('fileprogress');
	document.getElementById('uploadTabel').style.display = "none";
	document.getElementById('iProgFrame').src = "progress.html";
	document.getElementById('iProgFrame').style.display = "block";
	document.getElementById('fileprogress').style.display = "block";
	document.forms['uploadForm'].submit();
}

function BestandsGrootte() {
	var oas = new ActiveXObject("Scripting.FileSystemObject");
	if(oas) {
		var d = document.forms['uploadForm'].elements['foto'].value;
		var e = oas.getFile(d);
		var f = e.size;
		alert(f + " bytes");
	}
}

var gImgH = 0;
var gImgW = 0;
var gMarge = 0;
var gUndo = false;
var gUitleg = "Je ziet nu een vak over jouw foto geplaatst. Verplaats dit vak over de foto tot je de uitsnede van jouw keuze hebt gemaakt. Het vakje is kleiner dan de foto omdat de randen om het canvas gevouwen worden.";
var gKleurModus = "kleur";
var gKleurModusBak = gKleurModus;

function Wazzup(frameW, frameH, imgW, imgH, marge, klaar){
	document.getElementById('iProgFrame').style.display = "none";
	document.getElementById('uitleg2').style.display = "none";
	
	if(klaar){
		gImgW = imgW;
		gImgH = imgH;
		gMarge = marge;
		document.getElementById('selectCanvas').style.display = "none";
		document.getElementById('toolDiv').style.display = "block";
		document.getElementById('buttonStap3').style.display = "inline";
		if(frameW) document.getElementById('iFotoFrame').width = frameW;
		if(frameH) document.getElementById('iFotoFrame').height = frameH;
		document.getElementById('uitleg').innerHTML = "Nu kun je de foto nog spiegelen en/of roteren. Ook kun je je foto omzetten naar zwart-wit. Als je klaar bent klik dan op \"volgende stap\".";
		
	}
	if(klaar > 1){
		document.getElementById('undoDiv').style.display = "block";
		gUndo = klaar;
	}
	else {
		document.getElementById('undoDiv').style.display = "none";
		gUndo = false;
	}
	document.getElementById('iFotoFrame').style.display = "block";
}

function SetKleurModus(kleurModus){
	gKleurModusBak = gKleurModus;
	gKleurModus = kleurModus;
	document.forms["idForm"].elements["kleurModus"].value = kleurModus;
}

function BewerkFoto(actie, uitleg) {
	if(!gCanvas){
		alert("Je moet eerst een canvasformaat kiezen.");
		return;
	}
	if(gImgW && gImgH) actie += "&x=" + gImgW + "&y=" + gImgH + "&marge=" + gMarge;
	if(gUndo) actie += "&undoActie=" + gUndo;
	if(gUndo == 4) SetKleurModus(gKleurModusBak);
	document.getElementById('iProgFrame').style.display = "block";
	document.getElementById('divNavigator').style.display = "none";
	document.getElementById('iFotoFrame').style.display = "none";
	
	if(uitleg == "") uitleg = "Foto wordt bewerkt.";
	uitleg += " Een moment geduld aub...";
	document.getElementById('uitleg2').style.display = "block";
	document.getElementById('uitleg2').innerHTML = "<b>" + uitleg + "</b>";

	document.getElementById('adviesDiv').style.display = "none";
	frames["iFotoFrame"].location.href = document.getElementById("iFotoFrame").src + "?canvas=" + gCanvas + "&" + actie;
}

var toonMelding = true;
aCanvasFormaten = new Array();

function KiesCanvas(val){
	if(!val) return;
	oCanvas = aCanvasFormaten[val - 1];
	oCanvas.SetBorder();
	document.getElementById("theBorder").style.border = "1px solid #ff00ff";
	if(toonMelding){
		toonMelding = false;
		alert(gUitleg);
		document.getElementById('uitleg2').style.display = "block";
	}
	else {
		// document.getElementById('uitleg2').style.display = "none";
	}
	if(oCanvas.advies) {
		document.getElementById('adviesDiv').style.display = "block";
		document.forms['idForm'].elements['waarschuwing'].value = 1;
	}
	else {
		document.getElementById('adviesDiv').style.display = "none";
		document.forms['idForm'].elements['waarschuwing'].value = 0;
	}

	gCanvas = val;
}

//////// CLASS Canvas ///////////

function Canvas (id, breedte, hoogte, advies){
	this.id = id;
	this.breedte = breedte;
	this.hoogte = hoogte;
	this.vierkant = (breedte == hoogte) ? true : false;
	this.advies = advies;
	
	this.SetBorder = SetBorder;
}

// Methods
function SetBorder() {
	// kleinste maat van img ophalen
	this.imgB = document.getElementById('theImage').width - 2;
	this.imgH = document.getElementById('theImage').height - 2;

	if (this.imgH > this.imgB){
		this.staand = true;
		this.minSize = this.imgB;
		this.maxSize = this.imgH;
	}
	else {
		this.staand = false;
		this.minSize = this.imgH;
		this.maxSize = this.imgB;
	}
	// marge is 2,5 cm
	maat = (this.staand) ? this.breedte + 5 : this.hoogte + 5;
	marge = this.minSize * (2/maat);

	if(this.staand){
		// boxWidth = this.minSize * ((maat - 4)/maat);
		// boxHeight = boxWidth * (this.breedte / this.hoogte);
		cropWidth = this.minSize;
		cropHeight = cropWidth * (this.breedte / this.hoogte);
		if(cropHeight > this.imgH) {
			// cropHeight = cropWidth * (this.hoogte / this.breedte);
			cropHeight = this.maxSize;
			cropWidth =  cropHeight * (this.hoogte / this.breedte);
		}
	}
	else {
		// boxHeight = this.minSize * ((maat - 4)/maat);
		// boxWidth = boxHeight * (this.breedte / this.hoogte);
		cropHeight = this.minSize;
		cropWidth = cropHeight * (this.breedte / this.hoogte);
		if(cropWidth > this.imgB) {
			cropWidth = this.maxSize;
			cropHeight =  cropWidth * (this.hoogte / this.breedte);
		}
	}
	boxWidth = cropWidth - (marge * 2);
	boxHeight = cropHeight - (marge * 2);
	
	document.getElementById('theCrop').style.width = cropWidth + "px";
	document.getElementById('theCrop').style.height = cropHeight + "px";
	// spacer grootte geven voor f*cking IE
	document.getElementById('imgNavigator').width = boxWidth - 1;
	document.getElementById('imgNavigator').height = boxHeight - 1;
	
	dd.elements.theCrop.w = cropWidth;
	dd.elements.theCrop.h = cropHeight;
	document.getElementById('theBorder').style.width = boxWidth + "px";
	document.getElementById('theBorder').style.height = boxHeight + "px";
	document.getElementById('theBorder').style.margin = marge + "px";

	// scrollmarges zetten en canvas linksbovenin;
	dd.elements.theCrop.moveTo(dd.elements.theImage.x, dd.elements.theImage.y);
	dd.elements.theCrop.maxoffr = dd.elements.theImage.w - dd.elements.theCrop.w - 2;
	dd.elements.theCrop.maxoffb = dd.elements.theImage.h - dd.elements.theCrop.h - 2;
	dd.elements.theCrop.defw = dd.elements.theCrop.w;
	dd.elements.theCrop.defh = dd.elements.theCrop.h;

}


//////////////

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.

var IE = document.all ? true : false;


// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
var losX = 0;
var losY = 0;


function PlaatsFrame(){

  frames["iFotoFrame"].scrollBy(parseInt(gScrollFactor * (losX - tempX)), parseInt(gScrollFactor * (losY - tempY)));
}


//////////////////// LIJSTKEUZE ///////////////////////

function ToonLijst(val, prijs){
	
	if(val != ""){
		document.getElementById('lijstOutput').innerHTML = val;
		if(gVierkant == 1) {
			val += "-4kant";
		}
		else if(gStaand){
			val += "-staand";
		}
		document.getElementById('preview-lijst').src = "img/lijst-" + val + ".gif";
	}
	else {
		document.getElementById('preview-lijst').src = "img/spacer.gif";
		document.getElementById('lijstOutput').innerHTML = "geen";
	}
	document.getElementById('toonPrijs').innerHTML = prijs;
}