$(function() {
		   
	// define default colour  
	var colour = $('input[name="custom_color"]').val();
	
	if($('div.review_cat img:visible').length != 0){
		$('div.review_cat img').ifixpng();	
	}
	
	// append message containers	
	if($('div#message_container').length == 0) {
		$('div#album_holder').append('<div id="message_container"><div id="line1"></div><div id="line2"></div><div id="line3"></div></div>');
	}
	
	// repopulate the editor message	
	var inputs = $('input[name^="line"]');	
	
	
	for(var x = 0; x < inputs.length; x++) {
	
		if($(inputs[x]).val() != '') {
			
			var lineNumber = x + 1,
				lineMessage = $(inputs[x]).val(),
				character = '',
				images = '';
					
			$('div#line' + lineNumber).css('height','30px').html('<img src="/templates/default/images/fonts/'+colour+'/left_cap_'+colour+'.png" alt="left cap" /><div id="line'+lineNumber+'message"></div><img src="/templates/default/images/fonts/'+colour+'/right_cap_'+colour+'.png" alt="right cap" />');
			
			for(var i = 0; i < lineMessage.length; i++) {
				character = lineMessage.charCodeAt(i);					
				images += '<img src="/templates/default/images/fonts/'+colour+'/'+character+'_'+colour+'.jpg">';	
			}		
			
			document.getElementById('line'+lineNumber+'message').innerHTML = images;
			$('div#message_container img').ifixpng();
			
		}
		
	}
	
	// get details of the input the user has blurred/focused
	function getInputDetails(e) {
	
		var selectedInput = e.currentTarget,
			inputName = selectedInput.name,
			line = inputName.charAt(inputName.length - 1),
			lineName = "line" + line,
			details = {			
				selectedInput: selectedInput,
				lineName: lineName			
			}
			
		return details;
		
	}
				
	$('input').focus(function(e) {
							  							  
		var details = getInputDetails(e);
		
		if(details.lineName === 'line1' || details.lineName === 'line2' || details.lineName === 'line3') {

			if($('div#'+details.lineName+'message').length == 0) {	
	
				$('div#message_container div#'+details.lineName+'').append('<img src="/templates/default/images/fonts/'+colour+'/left_cap_'+colour+'.png" alt="left cap" /><div id="'+details.lineName+'message" /><img src="/templates/default/images/fonts/'+colour+'/right_cap_'+colour+'.png" alt="right cap" />');
				$('div#'+details.lineName+'').css('height','30px');
				$('div#message_container img').ifixpng();
			
			}	
			
			$(details.selectedInput).keyup(function() {	
											
				var character = '',
					images = '',
					message = details.selectedInput.value;			
				
				for(var x = 0; x < message.length; x++) {		
					character = message.charCodeAt(x);					
					images += '<img src="/templates/default/images/fonts/'+colour+'/'+character+'_'+colour+'.jpg">';
				}
				
				if(message.length != 0) {
					document.getElementById(details.lineName+'message').innerHTML = images;
				} else {	
					document.getElementById(details.lineName + 'message').innerHTML = '';		
				}	
				
			});
			
		}
		
	});	
	
	$('input').blur(function(e) {
		
		var details = getInputDetails(e);
		
		if(details.lineName === 'line1' || details.lineName === 'line2' || details.lineName === 'line3') {
			
			if(!e.currentTarget.value) {		
				document.getElementById(details.lineName).innerHTML = '';
				document.getElementById(details.lineName).style.height = '0px';		
			}
				
		}
		
	});
	
	$('div#colourPicker img').click(function() {

		$('div#message_container img').iunfixpng();

		var new_colour = $(this).attr('alt');	

		var messageImages = $('div#message_container img');

		for(x=0; x < messageImages.length; x++) {
			
			var src = $(messageImages[x]).attr('src'),
				sRegExInput = new RegExp(colour, "g"),
				new_src = src.replace(sRegExInput, new_colour);

			$(messageImages[x]).attr('src', new_src);
		}			

		colour = new_colour;

		$('input[name="custom_color"]').val(new_colour);
		
		$('div#message_container img').ifixpng();
		
		return false;

	});

});