<!--

var container = $('preview');
var l1 = $('line1');
var l2 = $('line2');
var l3 = $('line3');
var l4 = $('line4');
var l5 = $('line5');

function $_GET( name )
{
  name = encodeURIComponent(name);
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1]);
}

function initialize() {
	$("fieldset2").style.display = "none";
	$("fieldset3").style.display = "none";
	$("fieldset4").style.display = "none";
	$("fieldset5").style.display = "none";
	$("loadingimg").style.display = "none";
	$("textart").style.display = "block";
	var num = 1;
	var top = 0;
	var left = 0;
	while(num<6) {
		new Drag.Move('line'+num, {
			container: $('preview'),
			onComplete: function(el){
				setDroppedPosition(el);
				console.log(el.getPosition('preview'));
			}
		});
		element = $("line"+num);
		hbold = $("l"+num+"-bold");
		hital = $("l"+num+"-ital");
		huline = $("l"+num+"-uline");
		align = $("l"+num+"-align");
		pos_x = $("l"+num+"-pos-x");
		pos_y = $("l"+num+"-pos-y");
		writeLine(num);
		setFont(num);
		setFontSize(num);
		setFontColor(num);
		if(hbold.value == 1) { setBold(num); }
		if(hital.value == 1) { setItalic(num); }
		if(huline.value == 1) { setUnderline(num);  }
		if(pos_x.value != null) {
			element.style.left = parseInt(pos_x.value)+"px";
			element.style.top = parseInt(pos_y.value)+"px";
		} else {
			element.style.left = left+"px";
			element.style.top = top+"px";
		}
		element.style.textAlign = align.value;
		top = top+15;
		num++;
	}
	initTitles();
}

function initTitles() {
	var button = new Tips($$('.button'));
}

function $_GET( name )
{
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	if( results == null )
		return "";
	else
		return results[1];
}

function isset(varname) { 
	return eval("typeof(" + varname + ") != \"undefined\""); 
}

function returnValue(field) {
	if($(field).value != undefined) {
	value = "|"+$(field).value;
	} else {
	value = "|";
	}
	return value;
}

function buildImageURL(alrt) { //URL FORMAT: http://www.novavisioninc.com/label/build/image.php?l1=text|font|size|color|x-pos|y-pos|bold|||left,top
	if(skuNumber != "") {
		var imageURL = "/label/build/image.php?image="+skuNumber+"&"
	} else {
		var imageURL = "/label/build/image.php?";
	}
	for (i=1;i<=5;i++) {
		var line = $("line"+i);
		if($("line"+i+"-text").value.length >=1) {
			imageURL += "line["+i+"]="+encodeURIComponent($("line"+i+"-text").value);
			imageURL += returnValue("line"+i+"-font");
			imageURL += returnValue("line"+i+"-size");
			imageURL += returnValue("line"+i+"-color");
			imageURL += returnValue("l"+i+"-pos-x");
			imageURL += returnValue("l"+i+"-pos-y");
			imageURL += returnValue("l"+i+"-bold");
			imageURL += returnValue("l"+i+"-ital");
			imageURL += returnValue("l"+i+"-uline");
			imageURL += returnValue("l"+i+"-align");
			imageURL += "|"+$("line"+i).clientWidth;
			imageURL += "&";
		}
	}
	//imageURL = encodeURI(imageURL);
	//if(alrt == 1) { function() { alert(imageURL); }
	return imageURL;
	//}
}

function updateImage() {
	var URL = buildImageURL();
	$('sample_image').src = URL;
	$('imgurl').value = URL;
//	alert($('sample_image').src);
//	alert(URL);
}

function addLine(num) {
	var element = $("fieldset"+num);
	element.style.display = "table";
}

// Add or update the text from the textarea into the div with that line id
function writeLine(num) {
	var element = $("line"+num);
	setTimeout( function() {
		var text = $("line"+num+"-text").value;
		var text = text.replace(/\n/g,"<br />");
		element.innerHTML = text;
	}, 10);
}

function setFont(num) {
	var element = $("line"+num);
	setTimeout( function() {
		var font = $("line"+num+"-font").value;
		element.style.fontFamily = font;
	}, 10);
}

function setFontSize(num) {
	var element = $("line"+num);
		setTimeout( function() {
		var size = parseInt($("line"+num+"-size").value)+2;
		size = size+"px";
		element.style.fontSize = size;
	}, 10);
}

function setFontColor(num) {
	var element = $("line"+num);
	setTimeout( function() {
		var color = $("line"+num+"-color").value;
		element.style.color = color;
	}, 10);
}

function toggleStyles(object, attribute, on, off) {
	if (object.style[attribute] !== on) {
		object.style[attribute] = on;
		return 1;
	} else {
		object.style[attribute] = off;
		return 0;
	}
}

function setBold(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-bold");
	hfield.value = toggleStyles(element,"fontWeight","bold","normal"); 
}

function setItalic(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-ital");
	hfield.value = toggleStyles(element,"fontStyle","italic","normal")
}

function setUnderline(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-uline");
	hfield.value = toggleStyles(element,"textDecoration","underline","none")
}

function alignLeft(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-align");
	element.style.textAlign = "left";
	hfield.value = element.style.textAlign;
}

function alignCenter(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-align");
	element.style.textAlign = "center"
	hfield.value = element.style.textAlign;
}

function alignRight(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-align");
	element.style.textAlign = "right";
	hfield.value = element.style.textAlign;
}

function moveCenter(num) {
	//horizontal
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-x");
	var pos_x = ($("preview").clientWidth-element.offsetWidth)/2;
	pos_x = Math.round(pos_x); //function() { alert(pos_x+" & "+pos_X%2); };
	if((pos_x%2) == 0) { //number is even
	element.style.left = pos_x+"px";
	} else {
	element.style.left = pos_x-1+"px";
	}
	hfield.value = element.style.left;
	//vertical
	var hfield = $("l"+num+"-pos-y");
	var pos_y = ($("preview").clientHeight-element.offsetHeight)/2;
	pos_y = Math.round(pos_y);
	if((pos_y%2) == 0) { //number is even
	element.style.top = pos_y+"px";
	} else {
	element.style.top = pos_y-1+"px";
	}
	hfield.value = element.style.top;
}

function moveTop(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-y");
	element.style.top = 0+"px";
	hfield.value = element.style.top;
}

function moveBottom(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-y");
	var pos_y = ($("preview").clientHeight-element.clientHeight);
	pos_y = Math.round(pos_y);
	element.style.top = pos_y+"px";
	hfield.value = element.style.top;
}

function moveLeftSide(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-x");
	element.style.left = 0+"px";
	hfield.value = element.style.left;
}

function moveRightSide(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-x");
	var pos_y = ($("preview").clientWidth-element.clientWidth);
	pos_y = Math.round(pos_y);
	element.style.left = pos_y+"px";
	hfield.value = element.style.left;
}

function moveUp(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-y");
	var pos_y = parseInt(element.style.top, 10);
	element.style.top = pos_y-1+"px";
	hfield.value = element.style.top;
}

function moveDown(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-y");
	var pos_y = parseInt(element.style.top, 10);
	element.style.top = pos_y+1+"px";
	hfield.value = element.style.top;
}

function moveLeft(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-x");
	var pos_x = parseInt(element.style.left, 10);
	element.style.left = pos_x-1+"px";
	hfield.value = element.style.left;
}

function moveRight(num) {
	var element = $("line"+num);
	var hfield = $("l"+num+"-pos-x");
	var pos_x = parseInt(element.style.left, 10);
	pos_x = pos_x+1+"px";
	element.style.left = pos_x;
	hfield.value = element.style.left;
}

function setPosition(el, pos_x, pos_y) {
	el.style.left = pos_x+"px";
	hfield.value = el.style.left;
	el.style.top = pos_y+"px";
	hfield.value = el.style.top;
}


function setDroppedPosition(el) {
	//horizontal
	var container = $('preview');
	var lfield = $(el.getProperty('class')+"-pos-x");
	var tfield = $(el.getProperty('class')+"-pos-y");
	var pos = (el.getPosition('preview'));
	el.style.left = pos['x']+"px";
	lfield.value = el.style.left;
	el.style.top = pos['y']+"px";
	tfield.value = el.style.top;
}

//DEBUGGING TOOLS

function getPosition(num, alrt) {
	var element = $("line"+num);
	if(alrt == 1) {
		alert("Top: "+element.style.top+"; Left: "+element.style.left+"; Width: "+element.offsetWidth+"; Height: "+element.offsetHeight); 
		return false;
	}
}

window.addEvent('domready', function() {
	initialize();
	var tooltips = new Tips($$('.btn'));
	$("line1-text").onkeypress = function() { writeLine("1"); };
	$("line1-font").onchange = function() { setFont("1"); return false; } ;
	$("line1-size").onchange = function() { setFontSize("1"); return false; } ;
	$("line1-color").onchange = function() { setFontColor("1"); return false; } ;
	$("line1-bold").onclick = function() { setBold("1"); return false; } ;
	$("line1-italic").onclick = function() { setItalic("1"); return false; } ;
	$("line1-align-left").onclick = function() { alignLeft("1"); return false; } ;
	$("line1-align-center").onclick = function() { alignCenter("1"); return false; } ;
	$("line1-align-right").onclick = function() { alignRight("1"); return false; } ;
	$("line1-move-center").onclick = function() { moveCenter("1"); return false; } ;
	$("line1-move-top").onclick = function() { moveTop("1"); return false; } ;
	$("line1-move-bottom").onclick = function() { moveBottom("1"); return false; } ;
	$("line1-move-left-side").onclick = function() { moveLeftSide("1"); return false; } ;
	$("line1-move-right-side").onclick = function() { moveRightSide("1"); return false; } ;
	$("line1-move-up").onclick = function() { moveUp("1"); return false; } ;
	$("line1-move-down").onclick = function() { moveDown("1"); return false; } ;
	$("line1-move-left").onclick = function() { moveLeft("1"); return false; } ;
	$("line1-move-right").onclick = function() { moveRight("1"); return false; } ;
	$("addline1").onclick = function() { addLine("2"); return false; } ;

	$("line2-text").onkeypress = function() { writeLine("2"); };
	$("line2-font").onchange = function() { setFont("2"); return false; } ;
	$("line2-size").onchange = function() { setFontSize("2"); return false; } ;
	$("line2-color").onchange = function() { setFontColor("2"); return false; } ;
	$("line2-bold").onclick = function() { setBold("2"); return false; } ;
	$("line2-italic").onclick = function() { setItalic("2"); return false; } ;
	$("line2-align-left").onclick = function() { alignLeft("2"); return false; } ;
	$("line2-align-center").onclick = function() { alignCenter("2"); return false; } ;
	$("line2-align-right").onclick = function() { alignRight("2"); return false; } ;
	$("line2-move-center").onclick = function() { moveCenter("2"); return false; } ;
	$("line2-move-top").onclick = function() { moveTop("2"); return false; } ;
	$("line2-move-bottom").onclick = function() { moveBottom("2"); return false; } ;
	$("line2-move-left-side").onclick = function() { moveLeftSide("2"); return false; } ;
	$("line2-move-right-side").onclick = function() { moveRightSide("2"); return false; } ;
	$("line2-move-up").onclick = function() { moveUp("2"); return false; } ;
	$("line2-move-down").onclick = function() { moveDown("2"); return false; } ;
	$("line2-move-left").onclick = function() { moveLeft("2"); return false; } ;
	$("line2-move-right").onclick = function() { moveRight("2"); return false; } ;
	$("addline2").onclick = function() { addLine("3"); return false; } ;

	$("line3-text").onkeypress = function() { writeLine("3"); };
	$("line3-font").onchange = function() { setFont("3"); return false; } ;
	$("line3-size").onchange = function() { setFontSize("3"); return false; } ;
	$("line3-color").onchange = function() { setFontColor("3"); return false; } ;
	$("line3-bold").onclick = function() { setBold("3"); return false; } ;
	$("line3-italic").onclick = function() { setItalic("3"); return false; } ;
	$("line3-align-left").onclick = function() { alignLeft("3"); return false; } ;
	$("line3-align-center").onclick = function() { alignCenter("3"); return false; } ;
	$("line3-align-right").onclick = function() { alignRight("3"); return false; } ;
	$("line3-move-center").onclick = function() { moveCenter("3"); return false; } ;
	$("line3-move-top").onclick = function() { moveTop("3"); return false; } ;
	$("line3-move-bottom").onclick = function() { moveBottom("3"); return false; } ;
	$("line3-move-left-side").onclick = function() { moveLeftSide("3"); return false; } ;
	$("line3-move-right-side").onclick = function() { moveRightSide("3"); return false; } ;
	$("line3-move-up").onclick = function() { moveUp("3"); return false; } ;
	$("line3-move-down").onclick = function() { moveDown("3"); return false; } ;
	$("line3-move-left").onclick = function() { moveLeft("3"); return false; } ;
	$("line3-move-right").onclick = function() { moveRight("3"); return false; } ;
	$("addline3").onclick = function() { addLine("4"); return false; } ;

	$("line4-text").onkeypress = function() { writeLine("4"); };
	$("line4-font").onchange = function() { setFont("4"); return false; } ;
	$("line4-size").onchange = function() { setFontSize("4"); return false; } ;
	$("line4-color").onchange = function() { setFontColor("4"); return false; } ;
	$("line4-bold").onclick = function() { setBold("4"); return false; } ;
	$("line4-italic").onclick = function() { setItalic("4"); return false; } ;
	$("line4-align-left").onclick = function() { alignLeft("4"); return false; } ;
	$("line4-align-center").onclick = function() { alignCenter("4"); return false; } ;
	$("line4-align-right").onclick = function() { alignRight("4"); return false; } ;
	$("line4-move-center").onclick = function() { moveCenter("4"); return false; } ;
	$("line4-move-top").onclick = function() { moveTop("4"); return false; } ;
	$("line4-move-bottom").onclick = function() { moveBottom("4"); return false; } ;
	$("line4-move-left-side").onclick = function() { moveLeftSide("4"); return false; } ;
	$("line4-move-right-side").onclick = function() { moveRightSide("4"); return false; } ;
	$("line4-move-up").onclick = function() { moveUp("4"); return false; } ;
	$("line4-move-down").onclick = function() { moveDown("4"); return false; } ;
	$("line4-move-left").onclick = function() { moveLeft("4"); return false; } ;
	$("line4-move-right").onclick = function() { moveRight("4"); return false; } ;
	$("addline4").onclick = function() { addLine("5"); return false; } ;

	$("line5-text").onkeypress = function() { writeLine("5"); };
	$("line5-font").onchange = function() { setFont("5"); return false; } ;
	$("line5-size").onchange = function() { setFontSize("5"); return false; } ;
	$("line5-color").onchange = function() { setFontColor("5"); return false; } ;
	$("line5-bold").onclick = function() { setBold("5"); return false; } ;
	$("line5-italic").onclick = function() { setItalic("5"); return false; } ;
	$("line5-align-left").onclick = function() { alignLeft("5"); return false; } ;
	$("line5-align-center").onclick = function() { alignCenter("5"); return false; } ;
	$("line5-align-right").onclick = function() { alignRight("5"); return false; } ;
	$("line5-move-center").onclick = function() { moveCenter("5"); return false; } ;
	$("line5-move-top").onclick = function() { moveTop("5"); return false; } ;
	$("line5-move-bottom").onclick = function() { moveBottom("5"); return false; } ;
	$("line5-move-left-side").onclick = function() { moveLeftSide("5"); return false; } ;
	$("line5-move-right-side").onclick = function() { moveRightSide("5"); return false; } ;
	$("line5-move-up").onclick = function() { moveUp("5"); return false; } ;
	$("line5-move-down").onclick = function() { moveDown("5"); return false; } ;
	$("line5-move-left").onclick = function() { moveLeft("5"); return false; } ;
	$("line5-move-right").onclick = function() { moveRight("5"); return false; } ;

//	for(var i=1;i<=5;i++) {
//		$("line"+i+"-text").onkeypress = function() { writeLine(i); };
//		$("line"+i+"-font").onchange = function() { setFont(i); return false; } ;
//		$("line"+i+"-size").onchange = function() { setFontSize(i); return false; } ;
//		$("line"+i+"-color").onchange = function() { setFontColor(i); return false; } ;
//		$("line"+i+"-bold").onclick = function() { setBold(i); return false; } ;
//		$("line"+i+"-italic").onclick = function() { setItalic(i); return false; } ;
//		$("line"+i+"-align-left").onclick = function() { alignLeft(i); return false; } ;
//		$("line"+i+"-align-center").onclick = function() { alignCenter(i); return false; } ;
//		$("line"+i+"-align-right").onclick = function() { alignRight(i); return false; } ;
//		$("line"+i+"-move-center").onclick = function() { moveCenter(i); return false; } ;
//		$("line"+i+"-move-top").onclick = function() { moveTop(i); return false; } ;
//		$("line"+i+"-move-bottom").onclick = function() { moveBottom(i); return false; } ;
//		//$("line"+i+"-move-left-side").onclick = function() { moveLeftSide(i); return false; } ;
//		//$("line"+i+"-move-right-side").onclick = function() { moveRightSide(i); return false; } ;
//		$("line"+i+"-move-up").onclick = function() { moveUp(i); return false; } ;
//		$("line"+i+"-move-down").onclick = function() { moveDown(i); return false; } ;
//		$("line"+i+"-move-left").onclick = function() { moveLeft(i); return false; } ;
//		$("line"+i+"-move-right").onclick = function() { moveRight(i); return false; } ;
//	}
//
//	$("addline1").onclick = function() { addLine("2"); return false; } ;
//	$("addline2").onclick = function() { addLine("3"); return false; } ;
//	$("addline3").onclick = function() { addLine("4"); return false; } ;
//	$("addline4").onclick = function() { addLine("5"); return false; } ;
});
//-->
