(function(){
	var codeEditor = null;
	var	compiledEditor = null;
	var keyDown = false;
	var keyTimer = null;
	var keycodes = { "swap":-1, "left":37, "right":39, "up":38, "down":40,"enter":13,"tab":9,"back":8 };
	var activeKeys = "alpha";
	
	// Set up the db and entity schema
	var db_settings = {
		name : "instant",
		size : 1 * 1024 * 1024,
		version : "1.0",
		description : "Instant coffescript",
		tables : {
			code : {
				description : 'TEXT',
				content : 'TEXT',
			}
		}
	};
	
	$( window ).load( function(){
		init();
		fivedb.init( db_settings );

		var codeEntity = new fivedb.cCode( 1 );
		codeEntity.load( 
			function(){
				// Load the data
				codeEditor.setContent( codeEntity.content );
			}, 
			function(){
				// Failed to load: so insert the new thingo.
				codeEntity.id = -1;
				codeEntity.description = "default";
				codeEntity.content = "# Type some coffeescript then press 'JS' to\n# see the compiled JS, and 'Run' to execute it.\n\nfor i in [0...20] by 2\n\t\t\tlog i + ' '";
				codeEntity.save( function(){
					codeEditor.setContent( codeEntity.content );
				});
			}
		);
		window.codeEntity = codeEntity;
	});
	
	function logCodes( result ){
		console.log( result.length +  " results found:" , result );
	}
		
	function init(){
		codeEditor = new Textile.Editor('code-editor');
		compiledEditor = new Textile.Editor('compiled-editor');
		
		
		phone_init();
		
		// Stop scrolling
		$( "#container" ).bind( "touchmove", function(e){
			e.preventDefault();
		});
		
		// Bind the on screen keyboard to the touch events.
		$( "#keymove span" ).bind( "touchstart", function( e ){
			doMoveKey( e, this );
		}).bind( "touchend", function( e ){ 
			keyDown = false; 
			clearTimeout( keyTimer ) 
		});
	
		makeKeys( "#keyalpha", "qwertyuiop`~~~asdfghjkl`@~~~zxcvbnm~~~ " );
		makeKeys( "#keyalpha2", "QWERTYUIOP`~~~ASDFGHJKL`@~~~ZXCVBNM~~~ " );
		makeKeys( "#keychars", "1234567890`~~~'$.,+=-<>`@~~~()[]#:*~~~ " );
		makeKeys( "#keychars2", "1234567890`~~~\"!?/|_   `@~~~     ; ~~~ " );
				
		// Expose canvas editors
		window.codeEditor = codeEditor;
		window.compiledEditor = compiledEditor;
	}
	
	function doMoveKey( e, el ){
		var code = keycodes[ $( el ).attr( "id" ) ];
		if( code === -1 ){
			if( activeKeys == "alpha" ){
				$( "#keyalpha,#keyalpha2,#keychars2" ).hide();
				$( "#keychars" ).show();
				activeKeys = "chars";
			}
			else{
				$( "#keychars,#keychars2,#keyalpha2" ).hide();
				$( "#keyalpha" ).show();
				activeKeys = "alpha";
			}
		}
		else {
			codeEditor.onKeydown( { 'keyCode':code, 'charCode':code, preventDefault:function(){ return; } } );
			keyDown = true;
			keyTimer = setTimeout( function(){
				if( keyDown ){
					keyDown = false;
					doMoveKey( e, el );
				}
			}, 400 );
		}
	}
	
	function doCharKey( e, el ){
		var character = $( el ).text().charCodeAt( 0 );
		codeEditor.onKeypress( { 'keyCode':character, 'charCode':character, preventDefault:function(){ return; } } );
		
		keyDown = true;
		keyTimer = setTimeout( function(){
			if( keyDown ){
				keyDown = false;
				doCharKey( e, el );
			}
		}, 400 );
	}
	
	function makeKeys( el, keys ){
		for( var i = 0; i < keys.length; i++ ){
			switch( keys[ i ] ){
				case "`":
					$( "<br style='clear:both' />" ).appendTo( $( el ) );
					break;
				case "~":
					$( "<div></div>").css({ width:'5px', height:'20px', "float":'left' }).appendTo( el );
					break;
				case "@":
					$( "<span>^</span>" )
						.addClass( "mover" )
						.bind( "touchstart", function( e ){
							if( activeKeys == "alpha" ){
								$( "#keyalpha,#keyalpha2" ).toggle();
							}
							else {
								$( "#keychars,#keychars2" ).toggle();	
							}
						})
						.appendTo( el );
					break;
				default:
					$( "<span></span>" )
						.text( keys[ i ] )
						.bind( "touchstart", function( e ){
							doCharKey( e, this )
						})
						.bind( "touchend", function( e ){
							keyDown = false; 
							clearTimeout( keyTimer )	
						})
						.appendTo( el );
			}
		}	
	}

	function phone_init(){
		if (navigator.appVersion.indexOf('iPhone OS ') > -1 && !window.navigator.standalone){
			// not running as an installed app					
			$( "#splash" ).show().click(function(){$(this).remove();});
		}
		
		window.onorientationchange = updateOrientation;
	}
	
	function updateOrientation(){
		var orientation = window.orientation;
		switch (orientation){	
			case 0:
				$( "#container" ).removeClass( "landscape" );
				$( "#docs,#container" ).toggle();
				facey.hide( "#face2" );
				break;
			case -90:
			case 90:
				$( "#docs,#container" ).toggle();
				$( "#container" ).addClass( "landscape" );
				facey.rotateShow();
				break;
		}
	}
})();

(function(){
	window.facey = {
		hide : function( el ){
			$( el ).animate({ right: -240 }, 'slow', function(){ $( el ).hide(); });
		},
		show : function( el, callback ){
			$( el ).css( 'right', '-240px' ).show().animate({ right:0 }, 'fast', callback );
		},
		instShow : function( el ){
			$( el ).css('right',0).show( function(){
				$( this ).delay( 1000 ).click();
			});
		},
		rotateShow : function(){
			setTimeout( function(){
				if(window.orientation !== 0){
					facey.show( "#face2", function(){
						$( this ).delay( 1500 ).click();
					} );
				}
			}, 10000);
		},
		randShow : function(){
			setTimeout(function(){
				// Doesn't slide out, 'cause it seems buggy over canvas
				facey.instShow( "#face1" );
			}, Math.floor(Math.random() * 60000 ) + 40000 );
		}
	}
	
	$(window).load(function(){
		$( "#face1,#face2" ).click( function(){
			facey.hide( this );
		});
		$( "#btnScript" ).bind({
			'touchstart':function(){
				facey.timer = new Date();
			},
			'touchend':function(){
				if( new Date() - facey.timer > 2000 ){
					facey.instShow( "#face1" );
				}
			}
		});
		facey.randShow();	
	});
})();