function init() {
		 var selectedTemplate = document.getElementById('templateSelect');
		 selectedTemplate.value = 'template1';
	}

	function alterSaveTheDay(decide, object) {
		
		var element = document.getElementById('save-the-day-card');
		var selectedTemplate = document.getElementById('templateSelect');
		var targets = document.getElementById('target');
		
		
		/* INITIALIZE ALL VARIABLES ######################### */
		// update target information
		targets.templateSelect.value = selectedTemplate.value;
		
		initWording = 'Try your wording here';
		initImgWording = 'Type Internet image path e.g.(http://www.website-name.com/imageName.jpg)';
		
		path1='';
		
		resolveValue1 = initWording;
		resolveValue2 = initWording;
		resolveImageValue1 = initImgWording;
		resolveImageValue2 = initImgWording;
		resolveInput1 = '';
		resolveInput2 = '';
		
		decideImage1 = '';
		decideImage2 = '';

		textAreaHeight = 0;
		textAreaWidth = 0;
		inpHeight = 0;
		inpWidth = 0;
		paragraphHeight = 0;
		paragraphWidth = 0; 
		/* ############################################### */
		
		
		// DEFAULT SETTINGS FOR VARIABLES IN TEMPLATES
		if(selectedTemplate.value == 'template1') {	
			textAreaHeight = 90;
			textAreaWidth = 190;
			paragraphHeight = 92;
			paragraphWidth = 200;
			inpWidth = 120;
			resolveImgClass = 'template1Img';
			decideImage1 = '<input type="text" value="' + initImgWording + '" name="ref" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
			decideImage2 = '<input type="text" value="' + initImgWording + '" name="ref2" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
			resolveInput1 = '';
			resolveInput2 = '';
			
		}else if(selectedTemplate.value == 'template2') {
			textAreaHeight = 200;
			textAreaWidth = 132;
			paragraphHeight = 200;
			paragraphWidth = 180;
			inpWidth = 178;
			resolveImgClass = 'template2Img';
			decideImage1 = '<input type="text" value="' + initImgWording + '" name="ref" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
			
		}else if(selectedTemplate.value == 'template3') {
			textAreaHeight = 200;
			textAreaWidth = 140;
			paragraphHeight = 200;
			paragraphWidth = 180;
			inpWidth = 178;
			resolveImgClass = 'template3Img';
			decideImage1 = '<input type="text" value="' + initImgWording + '" name="ref" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
			
		}else if(selectedTemplate.value == 'template4') {
			decideImage1 = '<input type="text" value="' + initImgWording + '" name="ref" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
		}
		
		
		
		
		
		
		// FILTER THE VARIABLES (UPDATE, CHANGE, RESET) ############################
		resolveInput1 = '<textarea type="text" name="inp1" style="width : ' + textAreaWidth + 'px; height : ' + textAreaHeight + 'px;" onfocus="focusTextarea(this);" onblur="loseTextareaFocus(this);">' + resolveValue1 + '</textarea>';
		resolveInput2 = '<textarea type="text" name="inp2" style="width : ' + textAreaWidth + 'px; height : ' + textAreaHeight + 'px; float : left;" onfocus="focusTextarea(this);" onblur="loseTextareaFocus(this);">' + resolveValue2 + '</textarea>';
		
		if(document.getElementById('formSave')) {
			var formElement = document.getElementById('formSave'); 
			
			if(formElement.inp1) {
				resolveValue1 = formElement.inp1.value;
			}
			if(formElement.inp2) {
				resolveValue2 = formElement.inp2.value;
			}
			
			
			
			if(decide == 'reset') {
				// DECIDE PICTURE REFERENCE 1 AREA
				if(formElement.ref) {
					resolveImageValue1 = formElement.ref.value;
					decideImage1 = '<input type="text" value="' + resolveImageValue1 + '" name="ref" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
				}
				if(formElement.ref2) {
					resolveImageValue2 = formElement.ref2.value;
					decideImage2 = '<input type="text" value="' + resolveImageValue2 + '" name="ref2" style="width:' + inpWidth + 'px;float:left;" class="inpExpand" onfocus="focusInput(this, ' + inpWidth + ');" onblur="loseInputFocus(this, ' + inpWidth + ');" />';
				}
			}
			
			resolveInput1 = '<textarea type="text" name="inp1" style="width : ' + textAreaWidth + 'px; height : ' + textAreaHeight + 'px;" onfocus="focusTextarea(this);" onblur="loseTextareaFocus(this);">' + resolveValue1 + '</textarea>';
			resolveInput2 = '<textarea type="text" name="inp2" style="width : ' + textAreaWidth + 'px; height : ' + textAreaHeight + 'px; float : left;" onfocus="focusTextarea(this);" onblur="loseTextareaFocus(this);">' + resolveValue2 + '</textarea>';
			
			if(decide == 'update') {
				if(formElement.ref) {
					if(formElement.ref.value != initImgWording) {
						path1 = formElement.ref.value;
						decideImage1 = '<img class="' + resolveImgClass + '" src="' + path1 + '" alt="' + path1 + '" /><input type="hidden" name="ref" value="' + path1 + '" />';
						
						// update target information
						targets.ref.value = formElement.ref.value;
					}
				}
				if(formElement.ref2) {
					if(formElement.ref2.value != initImgWording) {
						path1 = formElement.ref2.value;
						decideImage2 = '<img class="' + resolveImgClass + '" src="' + path1 + '" alt="' + path1 + '" /><input type="hidden" name="ref2" value="' + path1 + '" />';
						
						// update target information
						targets.ref2.value = formElement.ref2.value;
					}
				}
				
				if(formElement.inp1) {
					resolveInput1 = formElement.inp1.value + '<input type="hidden" name="inp1" value="' + formElement.inp1.value + '" />';
					
					// update target information
					targets.inp1.value = formElement.inp1.value;
				}else{
					resolveInput1 = '<textarea type="text" name="inp1" style="width : ' + textAreaWidth + 'px; height : ' + textAreaHeight + 'px;" onfocus="focusTextarea(this);" onblur="loseTextareaFocus(this);">' + resolveValue1 + '</textarea>';
				}
				if(formElement.inp2) {
					resolveInput2 = formElement.inp2.value + '<input type="hidden" name="inp2" value="' + formElement.inp2.value + '" />';
					
					// update target information
					targets.inp2.value = formElement.inp2.value;
				}else{
					resolveInput2 = '<textarea type="text" name="inp2" style="width : ' + textAreaWidth + 'px; height : ' + textAreaHeight + 'px; float : left;" onfocus="focusTextarea(this);" onblur="loseTextareaFocus(this);">' + resolveValue2 + '</textarea>';
				}
			}
		}
		// #################################################
		
		
		
		
		
		
		// CREATE THE HTML #################################
		if(selectedTemplate.value == 'template1') {	
			html = '<form action="#" name="save-form" id="formSave">' +
				'<p style="height : ' + paragraphHeight + 'px;background-color : #ccc;width : 122px;float : left;">' + decideImage1 + '</p><p style="float:right;width : ' + paragraphWidth + 'px;height : 110px;">' + resolveInput1 + '</p>'+
				'<div class="clear"></div>' +
				'<p style="float:left; width:' + paragraphWidth + 'px;">' + resolveInput2 + '</p><p style="height : ' + paragraphHeight + 'px;background-color : #ccc;width : 122px;float : left;">' + decideImage2 + '</p>' +
			'</form>';
			
			
		}else if(selectedTemplate.value == 'template2') {
			html = '<form action="#" name="save-form" id="formSave">' +
				'<p style="height : 202px;background-color : #ccc;width : ' + paragraphWidth + 'px;float : left;">' + decideImage1 + '</p><p style="float:right;width : 142px;height : ' + paragraphHeight + 'px;">' + resolveInput1 + '</p>'+
				   '</form>';
			
			
		}else if(selectedTemplate.value == 'template3') {	
			html = '<form action="#" name="save-form" id="formSave">' +
				'<p style="float:left;width : 140px;height : ' + paragraphHeight + 'px;">' + resolveInput1 + '</p><p style="height : 202px;background-color : #ccc;width : ' + paragraphWidth + 'px;float : right;">' + decideImage1 + '</p>'+
				   '</form>';	
		}
		// ##################################################
		element.innerHTML = html;
	}



	// ONFOCUS AND BLUR EVENTS FOR TEXT FIELD AND AREAS
	function focusTextarea(element, width) {
		if(element.value == initWording) {
			element.value = '';	
		}
		element.style.color = 'black';
	}
	function loseTextareaFocus(element, width) {
		if(element.value == '') {
			element.value = 'Try your wording here';
			element.style.color = '#707070';
		}
	}
	
	function focusInput(element, width) {
		element.style.width = width + 50 + 'px';
		element.style.position = 'absolute';
		element.style.backgroundColor = '#fff';
		element.style.padding = '2px 4px';
		element.style.borderWidth = '2px';
		element.style.marginLeft = '-4px';
		element.style.marginTop = '-2px';
	}
	function loseInputFocus(element, width) {
		element.style.width = width + 'px';
		element.style.padding = '0px';
		element.style.borderWidth = '1px';
		element.style.marginLeft = '0px';
		element.style.marginTop = '0px';
	}
	
	function resetTargetValues() {
		var targets = document.getElementById('target');
		
		// Clear all target values
		targets.inp1.value = '';
		targets.ref.value = '';
		targets.ref2.value = '';
	}