var interface = Class.create(DOMObject, 
{
	initialize:function($super, parent, instance_props)
	{
		var default_props = 
		{
			//display props
			bodyColor : '#333333',
			bodyFontFamily : 'arial',
			width : '575px',
			height : 'auto',
			
			topColor : '#F2F2F2',
			topBorderColor : '#B3B3B3',
			bottomColor : '#DDDDE2',
			bottomGradient : '/img/login/white-gradient.png',
			aboutGraphic : '/img/login/question.png',
			loginGraphic : '/img/login/house.png',
			
			aboutText : 'Learn More',
			homeText : 'Back',
			
			logo : '/img/login/logo_beta.png',
			infoText : 'Welcome! If it\'s your first time click <a id="toggle" href="#" style="color:#333333;">learn more</a>. If you\'d like an account click <a href="/?register" style="color:#333333;">here</a>, otherwise login.',
			//inner props
			mode : 'login'
		}
		
		$super(parent, default_props, instance_props);
	},	
	
	build:function($super)
	{
		//create root structure
		$super();
		var root = this.S('root');
			root.setStyle({position : 'relative', margin : '0px auto'})
			root.round({r : 5});
			root.shadow({s : '10px', c : '#111111'});
			
			var top = $E({parent : root});
				top.round({tr : 5, tl : 5});
			var bottom = $E({parent : root, style : {backgroundRepeat : 'repeat-x', backgroundPosition : 'top left'}});
				bottom.round({br : 5, bl : 5});
			//var toggle = $E({parent : root, style : {position : 'absolute', top : '-40px', right : '0px', width : '30px', height : '30px', backgroundRepeat : 'no-repeat', backgroundPosition : 'center center'}});
			var toggle = $E({parent : root, inner : 'learn more', style : {position : 'absolute', top : '-25px', right : '10px', height : '25px', padding : '0px 10px', lineHeight : '25px', fontSize : '12px', fontStyle : 'italic', color : '#333333', cursor : 'pointer'}});
				toggle.round({tr : 5, tl : 5});
				Event.observe(toggle, "click", this.toggleClickListener.bind(this));
			var output = $E({parent : root, style : {position : 'absolute', bottom : '-40px', right : '0px', fontSize : '20px', fontWeight : 'bold', color : '#EEEEEE'}});
			var ts = new DOMLightSwitch(null, {appear : false});
			var bs = new DOMLightSwitch(null, {appear : false});
			
			this.S('topSwitch', ts);
			this.S('bottomSwitch', bs);
					
		this.S('top', top);
		this.S('bottom', bottom);
		this.S('toggle', toggle);
		this.S('output', output);
				
			//create login
			this.buildLogin();
			ts.add('login', this.S('loginRootT'));
			bs.add('login', this.S('loginRootB'));
			
			//create about
			this.buildAbout();
			ts.add('about', this.S('aboutRootT'));
			bs.add('about', this.S('aboutRootB'));
		
		//add feedback frame
		var FO = new feedbackObject();
		//var feedback = $E({type : 'img', attr : {'src' : '/img/login/feedback.png'}, style : {position : 'absolute', left : '0px', top : '250px'}})
		//	feedback.onclick = function(){FO.set({visible : true})}
	
		//add facebook iframe
		//var fbconnect_holder = $E({style : {position : 'absolute', top : '10px', right : '10px', width : '15px', height : '15px', overflow : 'hidden'}});
		var fbconnect = $E({type : 'iframe', attr : {'src' : 'facebook.php', 'scrolling' : 'no'}, style : {position : 'absolute', top : '10px', right : '10px', width : '15px', height : '15px', background : 'transparent', border : '0px none', overflow : 'hidden'}});
			//fbconnect.onload = function(){fbconnect.style.display = ""}
			fbconnect.id = "fbc";
		
		//add copywrite
		var copywrite = $E({parent : root, inner : 'test', style : {position : 'absolute', bottom : '-25px', left : '5px', fontSize : '10px', color : '#555555'}})
		this.S('copywrite', copywrite);
	},
	
	buildLogin:function()
	{
		var topRoot = $E({parent : this.S('top'), style : {paddingTop : '45px'}});
			var logo = $E({parent : topRoot, type : 'img', style : {display : 'block', margin : '0px auto'}});
			var infoDiv = $E({parent : topRoot, style : {display : 'block', margin : '45px 0px 10px 0px', textAlign : 'center', fontSize : '12px', fontStyle : 'italic', color : '#6D6D7F'}});		
		
		var bottomRoot = $E({parent : this.S('bottom')});
			var formStyle = {paddingTop : '40px', paddingBottom : '55px', margin : '0px auto', width : '320px'};
			var inputStyle = {width : '312px', padding : '3px', border : "1px solid #ADADB8", fontSize : '15px', color : '#333333', backgroundColor : '#FFFFFF', backgroundImage : 'url(/img/login/inputLine.png)', backgroundPosition : 'top left', backgroundRepeat : 'repeat-x', outline : '0px none'}
			var labelStyle = {color : "#6D6D7F", fontSize : '12px', fontWeight : 'bold', marginTop : '15px', marginBottom : '4px', marginLeft : '4px'}
			var onLogin; (location.href.indexOf('#close') != -1) ? onLogin = window.close.bind(window) : onLogin = null;			
			var lObject = new loginObject(bottomRoot, {formStyle : formStyle, inputStyle : inputStyle, labelStyle : labelStyle, onOutput : this.output.bind(this), onLogin : onLogin});
	
				var username = lObject.S('username');
				var password = lObject.S('password');
				
				username.onfocus = function(){this.shadow({c : '#6fa1d9'}); this.style.border = '1px solid #6fa1d9'}
				username.onblur = function(){this.unshadow(); this.style.border = '1px solid #B2B2B2'}
				
				password.onfocus = function(){this.shadow({c : '#6fa1d9'}); this.style.border = '1px solid #6fa1d9'}
				password.onblur = function(){this.unshadow(); this.style.border = '1px solid #B2B2B2'}	
		
			var rootStyle = {paddingBottom : '15px'}
			var formStyle = {borderTop : '1px solid #CCCCCC', margin : '-40px auto 0px auto', width : '320px'}
			var submitStyle = {display : 'block', marginLeft : 'auto', marginTop : '15px', padding : '5px', background : '#F2F2F2', border : '1px solid #B2B2B2', fontSize : '11px', color : '#6D6D7F'};
			var messageStyle = {width : '297px', margin : '0px auto', marginTop : '15px', padding : '10px', border : '1px dashed #FFFFFF', fontSize : '11px', color : '#9F0006'};
			
			var pObject = new passwordRecoveryObject(bottomRoot, {rootStyle : rootStyle, formStyle : formStyle, labelStyle : labelStyle, inputStyle : inputStyle, submitStyle : submitStyle, messageStyle : messageStyle});
				pObject.hide();
				var email = pObject.S('input');				
				email.onfocus = function(){this.shadow({c : '#6fa1d9'}); this.style.border = '1px solid #6fa1d9'}
				email.onblur = function(){this.unshadow(); this.style.border = '1px solid #B2B2B2'}
			
			var prStyle = {display : 'none', position : 'absolute', bottom : '24px', right : '128px', color : '#5F0000', fontSize : '10px', textDecoration : 'underline', cursor : 'pointer'}
			var passReset = $E({parent : bottomRoot, inner : 'forgot your password?', style : prStyle});
			Event.observe(passReset, "click", function(){this.hide(); pObject.show();email.focus();});
		
			//set event
			lObject.P('onLoginFail', passReset.show.bind(passReset));
					
		this.S('loginRootT', topRoot);
			this.S('logo', logo);
			this.S('infoDiv', infoDiv);
		this.S('loginRootB', bottomRoot);
			this.S('loginObject', lObject);
			this.S('passReset', passReset);
	},
	
	buildAbout:function()
	{
		//text
		var intro_text = "gotProject is an internet clipper powered by simplicity and minimalism. It can clip images, videos, urls and html from websites, and let you access and organize them in a visual way.";
		var about_header = "About gotProject";
		var about_text = "My Name is Tommaso. I am a currently a college student studying computer science and I've developed gotProject in my spare time. I have been working on this site for about 1 year and this is currently its third reincarnation. I encourage you to create an account and have a look around. I would be grateful to hear your feedback.";
		var fbreg_text = "or Sign in using facebook. Just Click the blue icon in top right";
		
		//properties
		var movieIcon = '/img/login/movie.png';
		var screenshot1 = '/img/login/screenshots/interface-*.png';
		var screenshot2 = '/img/login/screenshots/search-*.png';
		var screenshot3 = '/img/login/screenshots/project-*.png';
		var registerLink = 'http://www.gotproject.com/?register';
		var meIcon = '/img/login/me.jpg';
		var email = 'tommaso@gotproject.com';
		var twitterAccount = 'gotproject';
		var twitterIcon = '/img/login/twitter.jpg';
		var blogIcon = '/img/login/blog.png';
		var blogUrl = 'http://www.gotproject.com/blog/';		
		var vimeo_embed = '<object width="600" height="450"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10477676&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10477676&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="450"></embed></object>';
		var html5_embed = '<video width="600" height="450" src="/videos/gotProjectIntro.m4v" controls> </video>';
			
		//styles
		var screenshot_style = {marginTop : '14px', marginRight : '20px', border : '2px solid #FFFFFF'}
		var picture_shadow_style = {x : 1, y : 1, s : '5px', c : 'rgba(0,0,0,.3)'};
		
		//build top
		var topRoot = $E({parent : this.S('top'), style : {paddingTop : '10px'}});
			var movie = $E({parent : topRoot, type : 'img', attr : {'src' : movieIcon}, style : {display : 'block', float : 'left', margin : '10px 10px', marginTop : '0px'}});
				movie.shadow(picture_shadow_style);
			var topright = $E({parent : topRoot, style : {display : 'block', float : 'left', width : '270px', margin : '6px 10px'}});
				var text = $E({parent : topright, inner : intro_text, style : {color : '#777777', fontSize : '11px', lineHeight : '20px'}});
				var picture1 = $E({parent : topright , type : 'img', attr : {'src' : screenshot1.replace('*', 'small')}, style : screenshot_style});
				var picture2 = $E({parent : topright , type : 'img', attr : {'src' : screenshot2.replace('*', 'small')}, style : screenshot_style});
				var picture3 = $E({parent : topright , type : 'img', attr : {'src' : screenshot3.replace('*', 'small')}, style : screenshot_style});
				picture1.shadow(picture_shadow_style);
				picture2.shadow(picture_shadow_style);
				picture3.shadow(picture_shadow_style);
			$E({parent : topRoot, type : 'br', style : {clear : 'both'}});
			
			//connect pictures with lightbox
			var text1 = "The Home Screen : Recently clipped items on the left, projects and search in the center.";
			var text2 = "Quickly search through your items. Just start typing and results will appear immediately.";
			var text3 = "The Project Screen : Organize your items in a visual space that works exactly like your desktop.";
			var text4 = "A short movie showcasing gotProject's amazing features and simple interface."  + '<br><span style="color:#CCCCCC; line-height: 25px">Music by <a href="http://thexx.info" style="text-decoration:none;color:#AAAAAA">The XX</a></span>';
			LIGHTBOX.add('screen1', {t : 1, 'text' : text1, 'src' : screenshot1.replace('*', 'large')});
			LIGHTBOX.add('screen2', {t : 1, 'text' : text2, 'src' : screenshot2.replace('*', 'large')});
			LIGHTBOX.add('screen3', {t : 1, 'text' : text3, 'src' : screenshot3.replace('*', 'large')});
			if(Prototype.Browser.MobileSafari)
			{
				LIGHTBOX.add('movie', {t : 0, 'text' : text4, 'html' : html5_embed});
			}
			else
			{
				LIGHTBOX.add('movie', {t : 0, 'text' : text4, 'html' : vimeo_embed});
			}
			Event.observe(picture1, "click", LIGHTBOX.show.bind(LIGHTBOX, 'screen1'));
			Event.observe(picture2, "click", LIGHTBOX.show.bind(LIGHTBOX, 'screen2'));
			Event.observe(picture3, "click", LIGHTBOX.show.bind(LIGHTBOX, 'screen3'));
			Event.observe(movie, "click", LIGHTBOX.show.bind(LIGHTBOX, 'movie'));
		
		//build bottom		
		var bottomRoot = $E({parent : this.S('bottom'), style : {paddingTop : '20px'}});
			var bottomleft = $E({parent : bottomRoot, style : {position : 'relative', float : 'left', width : '200px'}});
				var regbox = $E({parent : bottomleft, style : {position : 'relative', width : '180px', height : '130px', margin : '10px', marginTop : '0px', paddingTop : '10px', background : '#FFFFFF url(/img/login/purplewhitegradient.png) repeat-x top left'}});
					regbox.shadow(picture_shadow_style);
			
					$E({parent : regbox, style : {position : 'absolute', top : '-5px', left : '0px', width : '100%', height : '5px', background : '#E3E3E7', zIndex : '1'}});
					$E({parent : regbox, style : {position : 'absolute', bottom : '-5px', left : '0px', width : '100%', height : '5px', background : '#DDDDE2', zIndex : '1'}});
					var register = $E({parent : regbox, inner : 'Create an Account', type : 'a', attr : {'href' : registerLink}, style : {display : 'block', width : '150px', margin : '0px auto', padding : '5px', border : '1px solid #CCCCCC', background : '#333333', color : '#EEEEEE', fontSize : '12px', fontWeight : 'bold', textAlign : 'center', textDecoration : 'none'}}) //used to be background: DDDDE2 color : 333333
						register.round({r : 5});
					var fbnotice = $E({parent : regbox, style : {marginTop : '15px', paddingTop : '15px', borderTop : '1px solid #CDCDD5'}});
						var fblogo = $E({parent : fbnotice, type : 'img', attr : {'src' : '/img/login/connect_favicon.png'}, style : {display : 'block', float : 'left', height : '15px', width : '15px', margin : '15px'}});
						$E({parent : fbnotice, inner : fbreg_text, style : {display : 'block', float : 'left', width : '125px', fontSize : '11px', color : "#AAAAAA"}});
						$E({parent : fbnotice, type : 'br', style : {clear : 'both'}});
						fblogo.onclick = function(){Effect.Shake($('fbc'), {distance : 10})}
					
			var bottomright = $E({parent : bottomRoot, style : {position : 'relative', float : 'left', width : '370px'}});
				var header = $E({parent : bottomright , inner : about_header, style : {fontSize : '12px', fontWeight : 'bold', color : '#333333', marginLeft : '10px'}});
				var aboutText = $E({parent : bottomright , inner : about_text, style : {fontSize : '11px', color : '#777777', lineHeight : '20px', margin : '10px'}})
			
			$E({parent : bottomRoot, type : 'br', style : {clear : 'both'}});
			
			var bottombottom = $E({parent : bottomRoot, style : {position : 'relative', width : '100%', height : '50px', borderTop : '1px solid #CDCDD5'}});
					var contact = $E({parent : bottombottom, style : {margin : '10px', float : 'left'}});
						var img = $E({parent : contact, style : {float : 'left', height : '30px', width : '30px', background : '#FFFFFF url(' + meIcon +') center center no-repeat'}})
							img.round({r : 5});
						var info = $E({parent : contact, style : {float : 'left', marginLeft : '10px'}});
							$E({parent : info, inner : 'contact', style : {marginTop : '2px', color : '#333333', fontSize : '11px', fontWeight : 'bold'}});
							$E({parent : info, inner : email, style : {color : '#777777', fontSize : '11px'}});
						$E({parent : contact, type : 'br', style : {clear : 'both'}});
					var contact = $E({parent : bottombottom, style : {float : 'left', margin : '10px'}});
						var img = $E({parent : contact, style : {float : 'left', height : '28px', width : '28px', border : '1px solid #CCCCCC', background : '#FFFFFF url(' + twitterIcon +') center center no-repeat'}})
							img.round({r : 5});
						var info = $E({parent : contact, style : {float : 'left', marginLeft : '10px'}});
							$E({parent : info, inner : 'twitter', style : {marginTop : '2px', color : '#333333', fontSize : '11px', fontWeight : 'bold'}});
							$E({parent : info, type : 'a', attr : {'href' : 'http://twitter.com/' + twitterAccount}, inner : 'twitter.com/' + twitterAccount, style : {display : 'block', color : '#777777', fontSize : '11px', textDecoration : 'none'}});
						$E({parent : contact, type : 'br', style : {clear : 'both'}});	
					var contact = $E({parent : bottombottom, style : {margin : '10px', float : 'left'}});
						var img = $E({parent : contact, style : {float : 'left', height : '28px', width : '28px', border : '1px solid #CCCCCC', background : '#FFFFFF url(' + blogIcon +') center center no-repeat'}})
							img.round({r : 5});
						var info = $E({parent : contact, style : {float : 'left', marginLeft : '10px'}});
							$E({parent : info, inner : 'blog', style : {marginTop : '2px', color : '#333333', fontSize : '11px', fontWeight : 'bold'}});
							$E({parent : info, type : 'a', attr : {'href' : blogUrl}, inner : blogUrl, style : {display : 'block', color : '#777777', fontSize : '11px', textDecoration : 'none'}});
						$E({parent : contact, type : 'br', style : {clear : 'both'}});
					
			
		this.S('aboutRootT', topRoot);
		this.S('aboutRootB', bottomRoot);
	},
	
	flush:function()
	{
		$(document.body).setStyle({backgroundColor : this.P('bodyColor'), fontFamily : this.P('bodyFontFamily')});
		this.S('root').setStyle({width : this.P('width'), height : this.P('height')});
		this.S('top').setStyle({backgroundColor : this.P('topColor'), borderBottom : '1px solid ' + this.P('topBorderColor')});
		this.S('bottom').setStyle({backgroundColor : this.P('bottomColor'), backgroundImage : 'url(' + this.P('bottomGradient') + ')'});
		this.S('toggle').setStyle({backgroundColor : this.P('topColor')});
		this.S('logo').src = this.P('logo');
		this.S('infoDiv').update(this.P('infoText'));
		
		if(this.P('mode') == 'login')
		{
			//this.S('toggle').style.backgroundImage = 'url(' + this.P('aboutGraphic') + ')';
			this.S('toggle').update(this.P('aboutText'));
			this.S('toggle').setAttribute('title', 'about');
			this.S('topSwitch').set({visible : 'login'});
			this.S('bottomSwitch').set({visible : 'login'});
			this.S('loginObject').focusUsername();
		}
		else
		if(this.P('mode') == 'about')		
		{
			//this.S('toggle').style.backgroundImage = 'url(' + this.P('loginGraphic') + ')';
			this.S('toggle').update(this.P('homeText'));
			this.S('toggle').setAttribute('title', 'home');
			this.S('topSwitch').set({visible : 'about'});
			this.S('bottomSwitch').set({visible : 'about'});
			this.output("");
		}
		
		this.S('copywrite').update("&copy; " + new Date().getFullYear() + " " + location.hostname);
		
		
		//more click hack
		Event.observe($('toggle') || new Element('div'), "click", this.toggleClickListener.bind(this));
	},
	
	output:function(output)
	{
		this.S('output').update(output);
	},
	
	toggleClickListener:function()
	{
		(this.P('mode') == 'login') ? this.set({mode : 'about'}) : this.set({mode : 'login'});
		return false;
	}
});


var passwordRecoveryObject = Class.create(DOMObject, 
{
	initialize:function($super, parent, instance_props)
	{
		var default_props = 
		{
			rootStyle : {},
			formStyle : {},
			inputStyle : {},
			submitStyle : {},
			messageStyle : {},			
			lableText : 'Enter Your Email',
			failMessage : 'Sorry, this email is not in our database!',
			successMessage : 'You will be emailed with your new password. Please be patient as this can take several minutes.'
		};
		$super(parent, default_props, instance_props);
	},
	
	build:function($super)
	{
		$super();
		var root = this.S('root');
			var form = $E({parent : root, type : 'form'});
				var label = $E({parent : form});
				var input = $E({parent : form, type : 'input', attr : {'type' : 'text'}});
					input.round({r : 5});
				var submit = $E({parent : form, type : 'input', attr : {'type' : 'submit', 'value' : 'reset password'}});
					submit.round({r : 5});
			var message = $E({parent : root, style : {display : 'none'}});
				
		Event.observe(label, "click", input.focus.bind(input));
		form.onsubmit = this.submit.bind(this, null);
		
		
		this.S('form', form);
		this.S('label', label);
		this.S('input', input);
		this.S('submit', submit);
		this.S('message', message);
	},
	
	flush:function()
	{
		this.S('label').update(this.P('lableText'));
		this.S('root').setStyle(this.P('rootStyle'));
		this.S('form').setStyle(this.P('formStyle'));
		this.S('label').setStyle(this.P('labelStyle'));
		this.S('input').setStyle(this.P('inputStyle'));
		this.S('submit').setStyle(this.P('submitStyle'));
		this.S('message').setStyle(this.P('messageStyle'));
	},
	
	validEmail:function(email)
	{
		if(email.match(/[\S]+@[\S]+\.[\S]+/) != null)
		{
			return true;
		}
		return false;
	},
	
	out:function(message)
	{
		this.S('message').show();
		this.S('message').update(message);
	},

	submit:function(response)
	{
		if(response == null)
		{
			var email = this.S('input').value;
			if(this.validEmail(email))
			{
				this.S('form').disable();
				SERVER.add('emailpw', {email : email}, this.submit.bind(this));
			}
			else
			{
				this.out('Sorry, this is not a valid email.')
			}	
		}
		else
		{
			if(response == true)
			{
				this.out(this.P('successMessage'));
			}
			else
			{
				this.out(this.P('failMessage'));
			}
			this.S('form').enable();
		}		
		return false;
	}

});


// general guidlines for login object


var loginObject = Class.create(DOMObject, 
{
	initialize:function($super, parent, instance_props)
	{
		var default_props = {formStyle : {}, inputStyle : {}, labelStyle : {}, stringprops : new stringProperties(), onOutput : Prototype.emptyFunction, onLogin : null, onLoginFail : Prototype.emptyFunction};
		$super(parent, default_props, instance_props);
	},

	build:function()
	{
		//build structure		
		var form = $E({type : 'form', parent : this.parent});
			
			var usernameLabel = $E({parent : form, inner : "username", style : {cursor : 'pointer'}});
			var username = $E({parent : form, type : 'input', attr : {'type' : 'text'}});
				username.round({r : 5});
			var passwordLabel = $E({parent : form, inner : "password", style : {cursor : 'pointer'}});
			var password = $E({parent : form, type : 'input', attr : {'type' : 'password'}});
				password.round({r : 5});
			$E({parent : form, type : 'input', attr : {'type' : 'submit'}, style : ((Prototype.Browser.IE) ? {opacity : '0', outline : '0px none'} : {display : 'none'})});

			//add events
			Event.observe(usernameLabel, "click", function(){username.focus()})
			Event.observe(passwordLabel, "click", function(){password.focus()})
			//Event.observe(usernameLabel, "click", username.focus.bind(username))
			//Event.observe(passwordLabel, "click", password.focus.bind(password))
						
			Event.observe(username, "keyup", this.checkInputs.bind(this,false));
			Event.observe(password, "keyup", this.checkInputs.bind(this, false));
			//Event.observe(form, "submit", this.verify.bind(this));
			
			if(Prototype.Browser.MobileSafari)
			{
				form.onsubmit = this.verify.bind(this);
			}
			else
			{
				form.onsubmit = function(){return false}
			}
			
			
			Event.observe(window, "keyup", this.enterListener.bind(this));
				
		this.S('root', form);
		this.S('username', username);
		this.S('password', password);
		this.S('usernameLabel', usernameLabel);
		this.S('passwordLabel', passwordLabel)
	},

	flush:function()
	{
		this.S('root').setStyle(this.P('formStyle'));
		this.S('username').setStyle(this.P('inputStyle'));
		this.S('password').setStyle(this.P('inputStyle'));
		this.S('usernameLabel').setStyle(this.P('labelStyle'));
		this.S('passwordLabel').setStyle(this.P('labelStyle'));
	},
	
	verify:function()
	{
		if(this.checkInputs(true))
		{
			this.submit();
		}
		return false;
	},
	
	validUsername:function(username)
	{
		var sp = this.P('stringprops');
		return sp.all({string : username, name : 'Username', max : '10'});
	},
		
	validPassword:function(password)
	{
		var sp = this.P('stringprops');
		return sp.all({string : password, name : 'Password', max : '20', t3 : false});
	},

	//general verification method
	checkInputs:function(focus)
	{
		var focus = focus || false;
	
		//check username
		var username = this.S('username').value;
		var result = this.validUsername(username);		
		this.mark(this.S('username'), result.valid, focus);
		this.output(result.text);		
		if(!result.valid){return false}
		
		//check password 
		var password = this.S('password').value;
		var result = this.validPassword(password);
		this.mark(this.S('password'), result.valid, focus);
		this.output(result.text);
		if(!result.valid){return false}
		
		(Prototype.Browser.MobileSafari) ? this.output("Press Go to Login") : this.output("Press Enter to Login");
		return true;		
	},
	
	// special methods
	
	output:function(text)
	{
		if(text != this.lastOutput)
		{
			this.P('onOutput')(text);
			this.lastOutput = text;
		}
	},
	
	mark:function(input, valid, focus)
	{
		if(valid)
		{
			input.style.color = '#333333';
		}
		else
		{
			input.style.color = '#9F0006';
			if(focus == true){input.focus()}
		}
	},
	
	submit:function(response)
	{
		if(response == null)
		{
			//send request
			SERVER.add('login', {username : this.S('username').value, password : this.S('password').value}, this.submit.bind(this));
		}
		else
		{
			//process response
			if(response == true)
			{
				this.submitSuccess();
			}
			else
			{
				this.submitFail();
			}
		}
	},
	
	submitFail:function()
	{
		var username = this.S('username');
		var password = this.S('password');
		
		this.output("Password Incorrect");
		username.style.color = '#9F0006';
		password.style.color = '#9F0006';
		Effect.Pulsate(username, { pulses: 1, duration: '.5' });
		Effect.Pulsate(password, { pulses: 1, duration: '.5' , afterFinish : function(){password.focus(); password.select();}});
		
		var F = this.P('onLoginFail');
		if(Object.isFunction(F)){F()}	
	},
	
	submitSuccess:function()
	{
		this.output("Welcome");
		
		var OL = this.P('onLogin');
		if(Object.isString(OL))
		{
			top.location = OL;
		}
		else
		if(Object.isFunction(OL))
		{
			if(OL())
			{
				location.reload();
			}
		}
		else
		{
			location.reload();
		}		
	},
	
	focusUsername:function()
	{
		this.S('username').focus();
	},
	
	enterListener:function(event)
	{
		if((event.keyCode == 13) && (this.S('root').visible()))
		{
			var u = this.S('username');
			var p = this.S('password');
			var c = $('recaptcha_response_field');			
			var e = document.activeElement || document.body;
				
			if((e == u) || (e == p) || (e == document.body))
			{
				this.verify();
			}
		}
	}
});

var feedbackObject = Class.create(DOMObject, 
{
	initialize:function($super, parent, instance_props)
	{
		var default_props = {visible : false, zIndex : 1, host : 'http://motion.windfeed.com/', feed : 'gotproject', message : 'If you have any feedback, just press "write" and express your opinion. You may also upload files, or clip items.'}
		$super(parent, default_props, instance_props);	
	},
	
	build:function($super)
	{
		$super();
		var root = this.S('root');
			root.setStyle({position : 'absolute', top : '0px', left : '0px', width : '100%', height : '100%'});
			var virtualPadding = $E({parent : root, style : {margin : '10px'}});
				var header = $E({parent : virtualPadding, style : {position : 'relative', width : '100%', height : '30px', borderBottom : '1px solid #CCCCCC', background : '#EEEEEE'}});
					header.round({tl : 5, tr : 5});
					var message  = $E({parent : header, style : {color : '#333333', fontSize : '12px', lineHeight : '30px', margin : '0px 10px'}});
					var close = $E({parent : header, style : {position : 'absolute', top : '7px', right : '7px', width : '15px', height : '15px', background : 'transparent url(/img/login/close.png) no-repeat center center'}});
				var iframe = $E({parent : virtualPadding, type : 'iframe', style : {width : '100%', border : '0px none', outline : '0px none'}});
		Event.observe(close, "click", this.set.bind(this, {visible : false}, null, null, null));
		Event.observe(window, "resize", this.resize.bind(this));
		
		this.S('iframe', iframe);
		this.S('message', message);
		this.resize();
	},
	
	flush:function()
	{
		if(this.P('visible'))
		{
			this.S('root').show();
			this.S('root').setStyle({zIndex : this.P('zIndex')});
			this.S('iframe').src = this.P('host') + this.P('feed');
			this.S('message').update(this.P('message'));
		}
		else
		{
			this.S('root').hide();
			this.S('iframe').src = 'about:blank';			
		}
	},
	
	resize:function()
	{
		var window_height = window.innerHeight || document.body.offsetWidth;
		var buffer = 20 + 30 + 5; //padding + header + headermargin
		this.S('iframe').style.height = (window_height - buffer) + 'px';
	}
});

var stringProperties  = Class.create(
{
	blank:function(string)
	{
		var text = " is empty";		
		return {valid : !string.blank(), text : text};
	},

	len:function(string,max,min)
	{
		var text = " cannot be longer than " + max + " characters";
		string = string || "";
		min = min || 0;
		max = max || 0;
		var result = {};
		(string.length > max || string.length < min) ? result = {valid : false, text : text} : result = {valid : true};
		return result;
	},

	normal:function(string)
	{
		var text = " cannot contain special characters";
		var result = {};
		(string.match(/^[A-Za-z0-9]+$/) != null) ? result = {valid : true} : result = {valid : false, text : text};
		return result;
	},
	
	match:function(a,b,ignoreCase)
	{
		var text = "'s don't match";
		ignoreCase = ignoreCase || false;
		if(ignoreCase)
		{
			a = a.toLowerCase();
			b = b.toLowerCase();
		}
		var result = {};
		(a == b) ? result = {valid : true} : result = {valid : false, text : text};
		return result; 
	},
	
	all:function(props)
	{
		p = {string : "", string2 : "", name : "", max : 0, min : 0, t1 : true, t2: true, t3 : true, t4 : false}
		Object.extend(p, props);
		
		var result = {valid : true};
		
		if(result.valid == true && p.t4 == true){result = this.match(p.string, p.string2)}
		if(result.valid == true && p.t1 == true){result = this.blank(p.string)}
		if(result.valid == true && p.t2 == true){result = this.len(p.string, p.max, p.min)}
		if(result.valid == true && p.t3 == true){result = this.normal(p.string)}		
				
		result.text = p.name + result.text;
		return result;
	}
});

//START LIGHTBOX CODE

var lightbox = Class.create(DOMObject,
{
	initialize:function($super, parent, instance_props)
	{
		default_props = 
		{
			//display props
			zIndex : 100,
			coverColor : '#000000',// '#DDDDDD',
			frameColor : '#FFFFFF',//'#F2F2F2',
			borderColor : '#CCCCCC',
			textColor : '#333333',
			shadowColor : '#333333', 
			
			//data props
			items : new Hash(),
			index : 0
			//callback props
			//inner props
		}
		$super(parent, default_props, instance_props);
	},
	
	build:function($super)
	{
		$super();
		var root = this.S('root');
			root.setStyle({display : 'none', position : 'fixed', top : '0px', left : '0px', width : '100%', height : '100%', textAlign : 'center'});
			var frame = $E({parent: root, style : {position : 'relative', display : 'inline-block', padding : '10px', zIndex : '2'}});
				frame.round({r : 2});
				var image = $E({type : 'img', parent : frame, style : {display : 'block'}});
				var text = $E({parent : frame});
			var caption = $E({parent : frame, style : {marginTop : '15px', marginBottom : '5px', paddingRight :  '70px', textAlign : 'left', fontWeight : 'bold', fontSize : '12px'}});
			var close = $E({parent : frame, inner : 'CLOSE', style : {position : 'absolute', bottom : '12px', right : '10px', height : '20px', lineHeight : '20px', paddingRight : '28px', background : 'transparent url(/img/login/close-lightbox.png) right center no-repeat', color : '#A02C2C', fontSize : '12px', fontWeight : 'bold', cursor :  'pointer'}});
			var cover = $E({parent : root, style : {position : 'fixed', top : '0px', left : '0px', width : '100%', height : '100%', opacity : '.6', zIndex : 1}});
			
			var next = $E({parent : frame, style : {position : 'absolute', top : '30px', right : '-80px', width : '50px', height : '60px', background : 'url(/img/login/next_arrow.png) center center no-repeat'}});
			var previous = $E({parent : frame, style : {position : 'absolute', top : '30px', left : '-80px', width : '50px', height : '60px', background : 'url(/img/login/previous_arrow.png) center center no-repeat'}});
						
			var resize = function()
			{
				var ww = window.innerWidth || document.documentElement.clientWidth;
				var wh = window.innerHeight || document.documentElement.clientHeight;
				var maxW = parseInt(ww - 20 - 180) + 'px'; // wh - padding - space for arrows
				var maxH = parseInt(wh * .8 - 40) + 'px'; // - padding
				
				image.style.maxHeight = maxH;
				image.style.maxWidth = maxW;
				text.style.maxHeight = maxH;
				text.style.maxWidth = maxW;
				frame.style.marginTop = parseInt(wh * .1) + 'px';
			}
			Event.observe(window, "resize", resize);
			Event.observe(cover, "click", this.hide.bind(this));
			Event.observe(close, "click", this.hide.bind(this));
			Event.observe(next, "click", this.next.bind(this, true));
			Event.observe(previous, "click", this.next.bind(this, false));
			Event.observe(window, "keydown", this.keyDownListener.bind(this));
			resize();
			
			this.S('cover', cover);
			this.S('frame', frame);
			this.S('image', image);
			this.S('text', text);
			this.S('caption', caption);
			this.S('close', close);
	},

	flush:function()
	{
		//add code here
		this.S('root').setStyle({zIndex : this.P('zIndex')});
		this.S('cover').setStyle({backgroundColor : this.P('coverColor')});
		this.S('frame').setStyle({backgroundColor : this.P('frameColor')});
			this.S('frame').shadow({c : this.P('shadowColor'), s : '5px'});
		this.S('image').setStyle({border : '1px solid ' + this.P('borderColor')});
		this.S('caption').setStyle({color : this.P('textColor')})
		this.S('close').setStyle({backgroundColor : this.P('frameColor')});
	},
	
	add:function(key, props)
	{
		if(Object.isNumber(props.t))
		{
			this.P('items').set(key, props);
			return true;
		}
		return false;
	},
	
	hide:function()
	{
		var root = this.S('root')
		this.S('frame').hide();
		Effect.Fade(this.S('cover'), {from : .6, to : 0, duration : 0.3, afterFinish : root.hide.bind(root)});
		this.S('image').src = "";
	},
	
	show:function(key)
	{
		var props = this.P('items').get(key);
		if(props != null)
		{
			if(props.t == 0)
			{
				//text
				this.S('text').update(props.html);
				this.S('caption').update(props.text || "");
				this.S('text').show();
				this.S('image').hide();
			}
			else
			if(props.t == 1)
			{
				//image
				this.S('image').src = props.src;
				this.S('caption').update(props.text || "");
				this.S('image').show();
				this.S('text').hide();
			}
			
			if(!this.S('root').visible())
			{
				
				this.S('frame').style.display = 'inline-block';
				this.S('root').show();
				this.S('cover').style.opacity = 0;
				Effect.Appear(this.S('cover'), {from : 0, to : .6, duration : 0.3});
			}
			this.P('index', this.keyToIndex(key));
		}
	},
	
	keyToIndex:function(key)
	{
		return (this.P('items').keys()).indexOf(key);
	},
	
	keyDownListener:function(event)
	{
		if(this.S('root').visible())
		{
			var kC = event.keyCode;
			if(kC == 39)
			{
				this.next(true)
			}
			else
			if(kC == 37)
			{
				this.next(false);
			}
		}
	},
	
	next:function(next)
	{
		var keys = this.P('items').keys();
		var index = this.P('index');
		var l = keys.length;
		
		if(next == true)
		{
			index ++;
			if(index >= l){index = 0}
		}
		else
		{
			index --;
			if(index < 0){index = l-1}
		}
		
		//clear current
		this.S('image').src = "";
		this.S('text').update("");
		this.show(keys[index]);
	}
});


//END LIGHTBOX CODE

function main()
{
	//style body
	if($('throbber') != null){$('throbber').remove()}
	$(document.body).style.height = 'auto';
	
	var resize = function()
	{
		var wh = window.innerHeight || document.documentElement.clientHeight;
		$(document.body).style.paddingTop = parseInt((wh - 500)/2) + 'px';	
	}
	resize();
	
	if(Prototype.Browser.MobileSafari)
	{
		Event.observe(document.body, "orientationchange", resize);	
	}
	else
	{
		Event.observe(window, "resize", resize);	
	}	
	
	if(Prototype.Browser.WebKit)
	{
		$(document.body).up().style.height = '100%';
		$(document.body).up().style.minHeight = '550px';
		document.body.style.setProperty("background", "-webkit-gradient(linear, left top, left bottom, from(rgb(20, 20, 20)), to(rgb(51, 51, 51))) content-box", "");
	}
	
	//start server	
	SERVER = new DataDispatch({server : new MultiRequestAgent({url : 'http://www.gotproject.com/php/core/control.php'})});
	
	//start lightbox
	LIGHTBOX = new lightbox();
	
	//start interface	
	new interface();
}
Event.observe(window, "load", main);