// JavaScript Document

var myColors = Array(Array(0, 0, 0), Array(255, 255, 255), Array(138, 61, 51), Array(124, 41, 52), Array(214, 52, 57),
					 Array(229, 60, 59), Array(255, 115, 0), Array(255, 103, 67), Array(254, 192, 10), Array(254, 216, 0),
					 Array(254, 231, 0), Array(99, 181, 1), Array(38, 115, 74), Array(30, 39, 67), Array(3, 45, 113),
					 Array(1, 77, 159), Array(71, 181, 234), Array(8, 141, 161), Array(15, 85, 132), Array(113, 82, 145),
					 Array(212, 25, 82), Array(245, 133, 162), Array(78, 54, 40), Array(80, 53, 45), Array(189, 153, 94),
					 Array(253, 222, 166), Array(254, 237, 208), Array(214, 216, 214), Array(157, 160, 155), Array(101, 107, 109),
					 Array(39, 39, 37), Array(241, 241, 233), Array(68, 72, 73), Array(124, 130, 132), Array(154, 126, 79));

var myNames = Array("Black (801PF)", "White (800PF)", "Burgandy Red (802PF)", "Dark Red (858PF)", "Geranium Red (849PF)",
					"Medium Red (826PF)", "Orange (805PF)", "Bright Orange (848PF)", "Dark Yellow (856PF)", "Sunflower Yellow (806PF)",
					"Bright Yellow (839PF)", "Grass Green (813PF)", "Kelly Green (834PF)", "Cobalt Blue (824PF)", "Royal Blue (853PF)",
					"Cosmos Blue (808PF)", "Light Blue (832PF)", "Turquoise (831PF)", "Blue (833PF)", "Violet (817PF)",
					"Cyclamen (815PF)", "Pink (816PF)", "Chocolate Brown (818PF)", "Brown (880PF)", "Tan (827PF)",
					"Beige (819PF)", "Ivory (857PF)", "Light Grey (859PF)", "Dove Grey (844PF)", "Grey (820PF)",
					"Black Matt (821PF)", "White Matt (830PF)", "Grey Metallic (846PF)", "Silver Metallic (835PF)", "Gold Metallic (836PF)");

window.onload = init;
function init() {
	initializeColorPalette();
	initializeFormElements();
}

function initializeColorPalette() {
	var colorPanel = document.getElementById("color_container");
	var numRows = 5;
	var numCols = 7;
	
	for(var row = 0;row < numRows;row++)
	{
		var colorRow = document.createElement("div");
		for(var col = 0;col < numCols;col++)
		{
			var colorDiv = document.createElement("div");
			var index = (row * numCols) + col;
			var color = myColors[index];
			
			colorDiv.id = "color_" + index;
			colorDiv.className = "color_option";
			colorDiv.style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")";
			
			colorDiv.onmouseover = updateColorInfo;
			colorDiv.onmouseout = clearColorInfo;
			colorDiv.onclick = applyColor;
			
			switch(index)
			{
				case myColors.length -3:
					colorDiv.style.backgroundImage = "url(img/home/grey_metallic.gif)";
					break;
				case myColors.length -2:
					colorDiv.style.backgroundImage = "url(img/home/silver_metallic.gif)";
					break;
				case myColors.length -1:
					colorDiv.style.backgroundImage = "url(img/home/gold_metallic.gif)";
					break;
			}
			
			colorRow.appendChild(colorDiv);
		}
		
		colorPanel.appendChild(colorRow);
	}
}

function initializeFormElements()
{
	var button = document.getElementById("preview_button");
	var categories = document.getElementById("LabelOptionCategories");
	
	button.onclick = generatePreview;
	categories.onchange = generatePreview;
	
	var form = document.getElementById("LabelOptionIndexForm");
	form.onsubmit = function() {
		return false;
	}
}

function clearField(element)
{
	var text = element.value;	
	if(text == "plakletters.nl")
		element.value = "";
}

function checkField(element)
{
	var text = element.value;
	if(text == "")
		element.value = "plakletters.nl";
}

function updateColorInfo(evt)
{
	if(!evt)
		var evt = window.event;
	
	var index = this.id.substring(6, this.id.length) * 1;
	var descriptionDiv = document.getElementById("color_description");
	
	descriptionDiv.innerHTML = myNames[index];
}

function clearColorInfo(evt)
{
	var descriptionDiv = document.getElementById("color_description");	
	descriptionDiv.innerHTML = "";
}

function applyColor(evt)
{
	var color = document.getElementById("LabelOptionColor");
	var index = this.id.substring(6, this.id.length) * 1.0;
	var colorValue = "["+myColors[index][0]+","+myColors[index][1]+","+myColors[index][2]+"]"+myNames[index];
	color.value = colorValue;
	
	generatePreview();
	
	return false;
}

function setCategory(id)
{
	var categories = document.getElementById("LabelOptionCategories");
	for(var i = 0;i < categories.length;i++)
	{
		if(categories.options[i].value == id)
		{
			categories.selectedIndex = i;
			break;
		}
	}
	
	generatePreview();
	
	return false;
}

function generatePreview()
{
	var valid = checkLines();
	if (valid) {
		var form = document.getElementById("LabelOptionIndexForm");
		form.submit();
	}
}

function startWorkflow()
{
	if(workflow != "")
		window.open(workflow,"Workflow","menubar=no,width=939,height=630,toolbar=no,resizable=no,directories=no,location=no");
	else
		window.open("../logistics/index","Workflow","menubar=no,width=939,height=630,toolbar=no,resizable=no,directories=no,location=no");
}

function selectLabel(id)
{
	var valid = checkLines();
	if(valid){
		var myForm = document.getElementById("LabelOptionIndexForm");
		var myLink = window.location.toString();
		var newLink = myLink.substring(0, myLink.indexOf("label_options"));
	
		myForm.action = newLink+"labels/view/"+id;
		myForm.submit();
	}
}

function checkValue(element)
{
	if(element.value < 9)
		element.value = 9;
}

function toPage(pageNumber)
{
	var page = document.getElementById('LabelOptionPageNumber');
	page.value = pageNumber;
	
	document.getElementById("LabelOptionIndexForm").submit();
}

function checkLines(){
	var stickerText = document.getElementById('stickerText');
	var inputHeight = document.getElementById('getSizes');
	var enter = stickerText.value.match(/\n+/g);
	var allenter = 	enter?enter.length:0;
	var min = 0;
	switch(allenter){
		case 1:
			min = 60;
			
			break;
		case 2:
			min = 90;
			
			break;
		case 3:
			min = 120;
			
			break;
		case 4:
			min = 150;
			
			break;
		case 5:
			min = 180;
			
			break;
	}
		if(inputHeight.value < min){
			alert('Combinatie bxh niet mogelijk. Minimale hoogte ' + min +'mm.');
			inputHeight.value = min;
			return false;
	};
	return true;	
}

/*
function checkWidth(){
	var stickerText = document.getElementById('stickerText');
	var inputWidth = document.getElementById('getSizes');
	var enter = stickerText.value.match(/\n+/g);
	var allenter = 	enter?enter.length:0;
	var radioSelected = document.getElementById("LabelOptionMeasureoptionWidth");
	if(radioSelected.checked == true){
		if(allenter > 0){
			if(inputWidth.value < 156){
				alert("Minimale breedte is 156 mm");
				inputWidth.value = 156;
			}
		}
	}
}
*/