// JavaScript File

var clickItemArea = 'alphabetArea';


	


function AddName()
{
	if (!(document.getElementById('alphabetLayer')))
		alert('Please select the letter first');
	else if (!(document.getElementById('designLayer')))
	{
		alert('Please select a design');
	}
	else
	{
		var text = document.getElementById('nameInput').value;
		if (text == "")
		{
			alert("Please enter child's name or text");
		}
		else
		{
		 	var loadingImage = document.getElementById('loading');
			loadingImage.style.visibility = 'visible';
			
		  	//create new node for letter
		  	var selectedFontFamily = document.getElementById('fontFamily');
			//var selectedFontSize =  document.getElementById('fontSize');
			var selectedFontColor = document.getElementById('fontColor');
			
			var fontFamily = selectedFontFamily[selectedFontFamily.selectedIndex].text;
			//var fontSize = selectedFontSize[selectedFontSize.selectedIndex].text;
			var fontSize = 17;
			var fontColor = selectedFontColor[selectedFontColor.selectedIndex].value;
			
			var xmlobj = false;
			if (window.XMLHttpRequest)
				xmlobj = new XMLHttpRequest();
			else if (window.ActiveXObject)
				xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
			
			xmlobj.open("GET","SweetDesignTool/Service.asmx/getTextImage?text="+encodeURIComponent(text)+"&fontName="+encodeURIComponent(fontFamily)+"&fontSize="+encodeURIComponent(fontSize)+"&fontColor="+encodeURIComponent(fontColor));		  
			xmlobj.onreadystatechange = function()
			{
				if  (xmlobj.readyState == 4){
					if (xmlobj.status == 200){
						loadingImage.style.visibility = 'hidden';
						var returnString = xmlobj.responseXML.documentElement. 
		firstChild.nodeValue;
						returnString = returnString.split(';');
						if (!(document.getElementById('nameImage')))
						{
							var newElement = CreateElement();
							newElement.divArea.id = 'nameLayer';
							newElement.divArea.style.width = '150';
							newElement.divArea.style.height = '40';
							newElement.divArea.style.position = 'absolute';
							//newElement.divArea.style.left = '50';
							newElement.divArea.style.top  = '52';						
							//newElement.divArea.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+imagePath+', sizingMethod=’scale’);'				
							newElement.divArea.style.backgroundRepeat = 'no-repeat';
							newElement.divArea.style.textAlign = 'center';						
							//newElement.divArea.style.backgroundImage = 'url('+imagePath+')';					
							newElement.previewArea.appendChild(newElement.divArea);
													
							var imagePath = returnString[0];
							var imageWidth = returnString[1];
							var imageHeight = returnString[2];
							
							var nameLayer = document.getElementById('nameLayer');						
							newElement = document.createElement('div');
							newElement.id = 'nameImage';
							newElement.style.width = imageWidth;
							newElement.style.height = imageHeight;
							newElement.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+imagePath+', sizingMethod=’scale’);'				
							newElement.style.backgroundRepeat = 'no-repeat';
							//newElement.src = imagePath;
							nameLayer.appendChild(newElement);
						}
						else
						{
							var nameImage = document.getElementById('nameImage');
							var imagePath = returnString[0];
							var imageWidth = returnString[1];
							var imageHeight = returnString[2];
							nameImage.style.width = imageWidth;
							nameImage.style.height = imageHeight;
							nameImage.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+imagePath+', sizingMethod=’scale’);'			
						}	
					}
					else
						alert("Error:"+xmlobj.status+" "+xmlobj.statusText);
				}
			}
			xmlobj.send(null);
			document.getElementById('nameAddButton').value = 'Update';	
		}
	}	
}

function AddAlphabet()
{
 	var loadingImage = document.getElementById('loading');
	loadingImage.style.visibility = 'visible';
  	//create new node for letter
	
	var selectedLetter =  document.getElementById('letters');
	var selectedColor =  document.getElementById('letterColor');
	
	var letter = selectedLetter[selectedLetter.selectedIndex].text;
	var lColor = selectedColor[selectedColor.selectedIndex].text;
	
	var xmlobj = false;
	if (window.XMLHttpRequest)
		xmlobj = new XMLHttpRequest();
	else if (window.ActiveXObject)
		xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
	
	xmlobj.open("GET","SweetDesignTool/Service.asmx/getLetter?letter="+encodeURIComponent(letter)+"&color="+encodeURIComponent(lColor));		  
	xmlobj.onreadystatechange = function()
	{
		if  (xmlobj.readyState == 4){
			if (xmlobj.status == 200){
				loadingImage.style.visibility = 'hidden';
				var letterPath = xmlobj.responseXML.documentElement. 
firstChild.nodeValue;
				if (!(document.getElementById('alphabetLayer')))
				{
					var newElement = CreateElement();
					newElement.divArea.id = 'alphabetLayer';
					newElement.divArea.style.width = '150';
					newElement.divArea.style.height = '200';
					newElement.divArea.style.position = 'absolute';
					newElement.divArea.style.backgroundImage = 'url('+letterPath+')';
					newElement.previewArea.appendChild(newElement.divArea);
				}
				else
					document.getElementById('alphabetLayer').style.backgroundImage = 'url('+letterPath+')';
			}
			else
				alert("Error:"+xmlobj.status+" "+xmlobj.statusText);
		}
	}
	xmlobj.send(null);
	document.getElementById('alphabetAddButton').value = 'Update';		
}

function AddDesign()
{
  	//var errorLabel = document.getElementById('errorLabel');
	
	if (!(document.getElementById('alphabetLayer')))
		//errorLabel.style.visibility = 'visible';
		alert('Please select the letter first');
	else
	{	
		var loadingImage = document.getElementById('loading');	
		loadingImage.style.visibility = 'visible';
			
		//create new node for letter		
		var selectedDesign =  document.getElementById('designs');
		var selectedColor =  document.getElementById('designColor');
		
		var designName = selectedDesign[selectedDesign.selectedIndex].text;
		var colorSet = selectedColor[selectedColor.selectedIndex].text;
		
		var xmlobj = false;
		if (window.XMLHttpRequest)
			xmlobj = new XMLHttpRequest();
		else if (window.ActiveXObject)
			xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
		
		xmlobj.open("GET","SweetDesignTool/Service.asmx/getDesign?designName="+encodeURIComponent(designName)+"&colorSet="+encodeURIComponent(colorSet));		  
		xmlobj.onreadystatechange = function()
		{
			if  (xmlobj.readyState == 4){
				if (xmlobj.status == 200){
					loadingImage.style.visibility = 'hidden';
					var designPath = xmlobj.responseXML.documentElement. 
	firstChild.nodeValue;
					if (!(document.getElementById('designLayer')))
					{
						var newElement = CreateElement();
						newElement.divArea.id = 'designLayer';		
						newElement.divArea.style.width = '150';
						newElement.divArea.style.height = '200';
						newElement.divArea.style.position = 'absolute';
						newElement.divArea.style.backgroundImage = 'url('+designPath+')';
						newElement.previewArea.appendChild(newElement.divArea);
					}
					else
						document.getElementById('designLayer').style.backgroundImage = 'url('+designPath+')';
				}
				else
					alert("Error:"+xmlobj.status+" "+xmlobj.statusText);
			}
		}
		xmlobj.send(null);
		document.getElementById('designAddButton').value = 'Update';
	}		
}

function CloseArea()
{
    //debugger;
    //document.getElementById(clickItemArea).style.height = 'auto';
    document.getElementById(clickItemArea).style.visibility = 'hidden';
    
    if (clickItemArea == 'nameArea')
        document.getElementById(clickItemArea).style.marginBottom = -134;
    if (clickItemArea == 'designArea')
        document.getElementById(clickItemArea).style.marginBottom = -136;
    if (clickItemArea == 'alphabetArea')
        document.getElementById(clickItemArea).style.marginBottom = -136; 
               
}

function OpenNameArea()
{      
    CloseArea();
    clickItemArea  = 'nameArea';
    
    document.getElementById('nameArea').style.marginBottom = 0;     
    document.getElementById('nameArea').style.height = 135;
    document.getElementById('nameArea').style.visibility = 'visible';
}

function OpenAlphabetArea()
{    
    CloseArea();
    clickItemArea  = 'alphabetArea';
    
    document.getElementById('alphabetArea').style.marginBottom = 0;
    document.getElementById('alphabetArea').style.height = 136;
    document.getElementById('alphabetArea').style.visibility = 'visible';
}

function OpenDesignArea()
{
    CloseArea();
    clickItemArea  = 'designArea';
    
    document.getElementById('designArea').style.marginBottom = 0;
	document.getElementById('designArea').style.height = 135;
    document.getElementById('designArea').style.visibility = 'visible';    
}

function CreateElement()
{
	return {
		previewArea:document.getElementById('previewArea'), 
		divArea:document.createElement('div')
	};
}