window.addEvent('domready', function() {
	
	//check if this is really a typeshow page to prevent error if typeshow.js is included on other pages
	if ($('ts_text') != null) { 
		
		var ts_directory = '/_plugins/';
		
		
// ------------------	 Functions	------------------
				
		var reload_ts_image = function() 
		{
			//reload image using these parameters
			$('ts_image').src = ts_directory 
			+ 'typeshow/typeshow.php?s=' + encodeURIComponent($('ts_text').value) 
			+ "&font=" + encodeURIComponent($('ts_dropdown_fonts').value) 
			+ "&style=" + encodeURIComponent($('ts_dropdown_styles').value) 
			+ "&theme=" + $('ts_dropdown_themes').value; //encodeURIComponent = unicode-enabled JS URL-encode
			$('ts_text').highlight('#eeeeee', '#fff'); //provide interface feedback when loading is triggered
			$('ts_text').setStyle('background-image', 'none')
		};


		var createFontDropdown = function(fonts) 
		{
			fonts.each(function(font) {
				var el = new Element('option', {'value': font.name});
				el.set({'html': font.name});
				if (font.name.toLowerCase() == ts_font.toLowerCase()) {
					el.set({'selected': 'selected'});
				}
				el.inject($('ts_dropdown_fonts'));
			});
			$('ts_dropdown_fonts').style.width='auto';
		};


		var createStyleDropdown = function(fonts) 
		{
			 $('ts_dropdown_styles').empty();
			fonts.each(function(font) 
			{
				
				if(font.name == $('ts_dropdown_fonts').value) 
				{
					font.styles.each(function(style) 
					{
						var el = new Element('option', {'value': style.name});
						el.set({'html': style.name});
						if (style.name.toLowerCase() == ts_style.toLowerCase()) {
							el.set({'selected': 'selected'});
							ts_style = ''; //reset style so it doesn't matter after init
						}
						
						el.inject($('ts_dropdown_styles'));
			
						//generate link to font product page:
				 		$('ts_font_link').setProperty('href', font.url);
						$('ts_font_link').set('html', font.name);
					});
					
					$('ts_dropdown_styles').style.width='auto';
				};
			});
		};


		var createThemesDropdown = function(themes) 
		{
			themes.each(function(theme) 
			{
				var el = new Element('option', {'value': theme.name});
				el.set({'html':theme.name});
				if (theme.name.toLowerCase() == ts_theme.toLowerCase()) {
					el.set({'selected': 'selected'});
					ts_theme = ''; //reset style so it doesn't matter after init
				}				
				el.inject($('ts_dropdown_themes'));
			});

			$('ts_dropdown_themes').setStyle('width', 'auto');
		};


		var getPangram = function()
		{
			return pangrams_array.pangrams[Math.floor(Math.random() * (pangrams_array.pangrams.length - 1))];
		}


// TEXT ------------------  Initialize Text   ------------------


		if (Cookie.read('typeshow-text') == null) //if no cookie can be found, use standard text
		{
			$('ts_text').value = 'TypeShow'; //should read settings from backend
		} else {
			$('ts_text').value = Cookie.read('typeshow-text');
		}
		
		$('ts_text').focus(); //focus text field
		$('ts_text').select(); //select all text
		
		//Replace error hint for disabled JS with this useful text
		$('ts_image').setProperty('alt', 'TypeShow font sample'); 
 		



// URL ------------------------------ Get fonts and style parameters from URL ------------------------------

		function gup( name ) //parse URL, taken from http://www.netlobo.com/url_query_string_javascript.html
		{
		  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];
		}



		//  Allow ?ts_font=Consolas&ts_style=Italic
			var ts_font = decodeURIComponent(gup("ts-font"));
			var ts_style = decodeURIComponent(gup("ts-style"));
			var ts_theme = decodeURIComponent(gup("ts-theme"));


// AJAX / FILL INTERFACE ------------------  Make Requests, fill dropdowns, load sample for the first time  ------------------
		
		
		var requested_fonts_array;
		
		
		//Load fonts to dropdown
		var requested_fonts = new Request.JSON(
		{
			url: ts_directory + 'typeshow/json/fonts.json',
			onComplete: function(jsonObj) {
				//save array:
				requested_fonts_array = jsonObj;
				createFontDropdown(requested_fonts_array.fonts);
				createStyleDropdown(requested_fonts_array.fonts);
				reload_ts_image(); //load font image for the first time
			}
		}).send();


	   //Load themes to dropdown
		var requested_themes = new Request.JSON(
		{
			url: ts_directory + 'typeshow/json/themes.json',
			onComplete: function(jsonObj) {
				createThemesDropdown(jsonObj.themes);
				reload_ts_image(); //load font image for the first time
			}
		}).send();


		var pangrams_array;
	   //Load themes to dropdown
		var requested_pangrams = new Request.JSON(
		{
			url: ts_directory + 'typeshow/json/pangrams.json',
			onComplete: function(jsonObj) {
				pangrams_array = jsonObj;
			}
		}).send();



// EVENTS ------------------------
		
		var ts_is_busy = false;
		var ts_last_requested_string = "";
		
		//reload font image on keyup in text field
		$('ts_text').addEvent('keyup', function(event)
		{
			if (!(ts_last_requested_string == $('ts_text').value)) 
			{	
				ts_last_requested_string = $('ts_text').value;
				
				$('ts_text').setStyle('background-image', 
				'url(' + ts_directory + 'typeshow/graphics/ts_loading_01.gif)');
				
				$('ts_text').setStyle('background-color', '#eeeeee');
				if (!ts_is_busy) {
					ts_is_busy = true;
							(function()
							{
								if ($('ts_text').value =="") 
								{
									//if empty, fill with pangram (but not on iPhone -> select all doesn't work there)
									if (!Browser.Platform.ipod)
									{
										$('ts_text').value = getPangram();
										$('ts_text').focus();
										$('ts_text').select(); //select all text
									}
								} else {
									Cookie.write('typeshow-text',$('ts_text').value, {duration: 1});  //write a cookie with the text, valid for 1 day
								}

								reload_ts_image();
								ts_is_busy = false;
						 	}
							).delay(1800, this);
				}
			}		
			
		});
		
		
		//reload font image on change in font dropdown
		$('ts_dropdown_fonts').addEvent('change', function() {
			ts_style = $('ts_dropdown_styles').value; //set current style so it is preserved when font family is changed
			createStyleDropdown(requested_fonts_array.fonts);  
			reload_ts_image();
		});
		
		//reload font image on change in styles dropdown
		$('ts_dropdown_styles').addEvent('change', function() {
			reload_ts_image();
		});
	
		//reload font image on change in themes dropdown
		$('ts_dropdown_themes').addEvent('change', function() {
			reload_ts_image();
		});
	
// --------------------------------------------------------------
	}
});