var testcssurl="css/test.css";
var typeinfo="Type the URL of your CSS here";

var gui ={
	errormessage: "",
	
	calcheight: function(parent, child){
		var h=parseFloat(parent.css("marginTop"))+parseFloat(parent.css("marginBottom"))+parseFloat(child.height());
		parent.css("height", h).css("overflow", "hidden");
		return h;
	},
	
	startcontent: {
		name: "startcontent",
		
		html: "<div id='startcontent'><form><ol><li>"+
				"<input name='startcontent' readonly ='readonly' id='securcode' type='text' value='"+verificationCode+
				"' size='100' maxlength='100'/></li>"+
				"<li><input name='url' id='url' type='text' value='Type the URL of your CSS here' size='100' maxlength='1000' />"+
				"<a href='javascript:void(0);' id='loadtestfile' title='load test-file'>...or play with our test-file</a></li>"+
				"<li><input id='start' name='bake' type='button'></li>"+
				"</ol></form></div>",
				
		setup: function(){
			$("#appcontent").append(this.html);
			$('#url').click(function(e) {  
				var val=$('#url').val();
				if(val.indexOf(typeinfo)>-1){
					$('#url').val("").css("textAlign", "left");
				}
			});
			
			$('#url').blur(function(e) {
				var val=$('#url').val();
				if(val.length<1){
					$('#url').val(typeinfo).css("textAlign", "left");
				}
			});
			
			$("#securcode").click(function(e){
			    this.select();
			});
			$("#loadtestfile").click(function(e){
				$('#url').val(testcssurl)
			});
			$('#start').click(function(e){
					var val=$('#url').val();
					var match=val.match(/\s*/g);
					if(match!=null){
						var space=match,length;
					}else{
						space=0;
					}
					if(val.length>0 && space!=val.length && val.indexOf("Type the URL of your CSS here")<0){
    					styleparser.loadFile($('#url').val());
						gui.slideIn(gui.startcontent, gui.statuscontent);
					}
				});
			},
	},

	codecontent: {
		name: "codecontent",
		
		html: "<form id='codecontent'>"+
		"<h3>This is your baked Stylesheet. Copy from the form below, enyoy:</h3>"+
		"<textarea name='codebox' id='codebox' cols='80' rows='20' readonly='readonly' wrap='off'></textarea>"+
		"<a href='javascript:void(0);' title='bake more!' id='bakemore'>Bake Me More!</a>"+
		"</form>",
		
		setup: function(){
			$("#appcontent").append(this.html);
			$("#codebox").val(encodedCSS);
			$("#codebox").click(function(e){
			    this.select();
			});
			$('#bakemore').click(function(e) {
				gui.reset();
				gui.slideIn(gui.codecontent, gui.startcontent );
			});
		}
	},
	
	statuscontent: {
		name: "statuscontent",
		
		html: "<div id='statuscontent'>Currently baking...</div>",
		
		wait: function(){
			var timeout;
			var interval;
			function checkencoding(){
				if(encodedCSS.length>0){
					gui.slideIn(gui.statuscontent, gui.codecontent);
					clearInterval(interval);
				}
				if(ajaxError==true){
					gui.reset();
					gui.slideIn(gui.statuscontent, gui.errorcontent);
					clearInterval(interval);
				}
			}
			timeout=setTimeout(function(){clearTimeout(timeout); interval=setInterval(checkencoding, 500);}, 2000);
		},
		
		setup: function(){
			$("#appcontent").append(this.html);
			this.wait();
		}
	},
	
	errorcontent: {
		name: "errorcontent",
		
		html: "<div id='errorcontent'><h3>Sorry, an Error occured:</h3><p id='errormessage'></p><a href='#' title='back' id='back'>Back</a></div>",
		
		setup: function(){
			$("#appcontent").append(this.html);
			$("#errormessage").append(gui.errormessage);
			$('#back').click(function(e){
    				gui.reset();
					gui.slideIn(gui.errorcontent, gui.startcontent );
				});
			}
	},
	
	slideIn: function(elem_1, elem_2){
		elem_2.setup();
		var el_1=$("#"+elem_1.name);
		var el_2=$("#"+elem_2.name);
		
		var h=gui.calcheight($('#appcontent'), el_2);
		el_1.height=gui.calcheight($('#appcontent'), el_1);
		
		el_1.animate( {
			height: 0
			}, 300, "swing", function() {
				$("#"+elem_1.name).remove();
				$("#appcontent").animate( {
					height: h
			}, 300, "swing")
		});
	},
	
	reset: function(){
		encodedCSS="";
		ajaxError=false;
	}
}

$(document).ready(function() {
						   if(document.getElementById("tweetbutton")){
		var but=document.getElementById("tweetbutton");
		but.setAttribute('onclick', 'popup("'+but.href+'")'); 
		but.setAttribute('href', 'javascript:void(0);');
						   }
	var useragent=navigator.userAgent.toLowerCase();
	var isIE=useragent.indexOf("msie");
	if(isIE<0){
		$('#appcontent').html("");
		gui.startcontent.setup($('#appcontent'));
	}else{
		$('#appcontent').html("<p>I'm sorry. This webapp doesn't support Internet Explorer right now. Please come back with a modern webbrowser like Chrome, Safari, Firefox or Opera (you really have a choice). Everything will look nicer and, as a bonus, the app will actually work.</p> <p>(Maybe I will support Explorer 9 one day, but currently I do not care.)</p>");
	}
});