var Page = {
	init: function(){
		this.imgcount = 0;
		var extraStuff = {
			one: 'hello',
			two: 'yo!'
		};
		
		
		var uploadForm = new Moo.Form ( 'testform', {
			appendData: extraStuff,
			onComplete: this.handleFileUpload.bind(this)
		});
		$('testfile').addEvent( 'change', function(){ uploadForm.submit(); } );
		
		uploadForm.addEvent('submit', function(){
			$('testfile').setStyle('display', 'none');
			$('upload_loading').setStyle('display', 'block');
		});
		uploadForm.addEvent('onComplete', function(){
			$('testfile').setStyle('display', 'block');
			$('upload_loading').setStyle('display', 'none');	
		});
		/* regular implementation */
		/*
		var simpleForm = new Moo.Form( 'testsimpleform', {
			appendData: 'extrastuff=whatever',
			method: 'get',
			onSuccess: this.simpleFormSuccess.bind( this )
		});
		*/
		$('testsimpleform').addEvent('submit', function(e){
				e.preventDefault();
				$('testsimpleform').ajaxSubmit( {
					appendData: 'extrastuff=whatever',
					method: 'get',
					onSuccess: this.simpleFormSuccess.bind( this )
				});
		}.bindWithEvent(this) );
		
		var active = null;
		var accordion = new Accordion( $$('dl#accordion dt'), $$('dl#accordion dd'), {
				onActive: function(toggle, el){
					active = el;
				},
				onComplete: function(){
					this.elements.each( function(el){
						if( el == active ){
							el.setStyle('height', 'auto');
						}
					});
				}
		} );
		//accordion.display( 3 );
		
	},
	submitform: function(e){
		
	},
	
	handleFileUpload: function( response ){
		json = eval( "("+response.responseText+")" );
		$('result').setStyle('display', 'block');
		$('result').setHTML( json.message );
		if(json.success){
			this.imgcount++;
			$('images').setHTML ('<div style="display: block; float: left;  width: 0px; height: 0px;" id="img'+this.imgcount+'"><img src="'+json.img+'" style="height:100%;width:100%;" /></div>' + $('images').innerHTML );
			$('img'+this.imgcount).effects().start(
				{
					width: [0, json.width],
					height: [0, json.height],
					opacity: [0,1]
					
				}
			);
			$('result').effects({duration: 2000}).start(
				{
					backgroundColor: ['#ffff00', '#ffffff']
				}
			);
		}
		else{
			$('result').effects({duration: 2000}).start( 
				{ 
					backgroundColor: ['#FF0000', '#ffffff'] 
				} 
			);
		}
	},
	
	simpleFormSuccess: function(response){
		
		var json = eval( "("+response+")" );
		if( json ){
			$E('#simpleformvalue div.padding').setHTML( json.simplevalue );
			$('simpleformvalue').effects({duration: 2000}).start( 
				{ 
					backgroundColor: ['#FF0000', '#ffffff'] 
				} 
			);
		}
	}
};

window.addEvent( 'load', Page.init.bind( Page ) );