/**
 * @author ngibson
 */
/**
* AUTHOR	: N. Gibson
* DATE		: 18/11/09
* DESC		: BASE.Client 
*/

'BASE.CONFIG.Client'.namespace();
'BASE.Client'.namespace();

BASE.CONFIG.Client = {
	ID:{
		hd:					'hd',
		bd_nav:				'bd_nav',
		bd_content:			'bd_content',
		ft:					'ft',
		carousel_buttons:	'carousel_buttons',
		contact_details:	'contact_details',
		login_form:			'login',
		login_btn:			'login_loginbtn',
		clear_btn:			'login_clearbtn',
		user:				'user',
		pass:				'pass'
		
	},
	CLASSNAMES:{		
	},
	AJAX: {	
	},
	MODALS: {
	},
	ERRORS: {	
	}
};

BASE.Client = Class.create({

	initialize:function(config){
		this.CONFIG		=	{};
		this.DOM		=	{};
		this.CLASSNAMES =	{};
		this.MODALS		=	{};
		this.ERRORS		=	{};	
		this.CONFIG		=	Object.extend(BASE.CONFIG.Client, config);
		this.dom_setup();
		this.dom_events();
		this.dom_effects();
	},
	dom_setup: function() {
		try {
			this.DOM.body = document.body;
			var config_id = this.CONFIG.ID;
			for (var a in config_id) {
				if ($(this.CONFIG.ID[a]) !== null) {
					this.DOM[a] = $(this.CONFIG.ID[a]);
				}
			}
		} catch(e) {
			// console.log(e);
		}
	},
	dom_events: function() {
		Event.observe(this.DOM.hd, 'click', this.header_onClick.bindAsEventListener(this));
		if(this.DOM.body.id == 'login_page'){
			Event.observe(this.DOM.user, 'blur', this.validate_field.bindAsEventListener(this, {field:'user',message:'Username'}));
			Event.observe(this.DOM.pass, 'blur', this.validate_field.bindAsEventListener(this, {field:'pass', message:'Password'}));
			Event.observe(this.DOM.login_btn, 'click', this.validate_login.bindAsEventListener(this, this.DOM.login_form));
			Event.observe(this.DOM.clear_btn, 'click', this.form_functions.form_reset.bindAsEventListener(this, this.DOM.login_form));
		}
		if(this.DOM.body.id == 'index'){
			babyImage = new Image();
      		babyImage.src = "img/site/baby2.gif";
			toThumbs = new Image();
			fromThumbs = new Image();
			babyImage.src = "img/site/tothumbstext.jpg";
			fromThumbs.src = "img/site/fromThumbsText.jpg";
			Event.observe(this.DOM.bd_content, 'mouseover', this.bd_mouseover.bindAsEventListener(this));
			Event.observe(this.DOM.bd_content, 'mouseout', this.bd_mouseout.bindAsEventListener(this));
		}
		$(this.DOM.bd_nav).select('li').each(function(elem){
			try {
				Event.observe(elem, 'click', this.bd_nav_click.bindAsEventListener(this,elem));
			} catch (e){
				// console.log(e);
			}
		},this);
		$$('div.switchGalleryButton').each(function(element){
			try {
			Event.observe(element, 'click', this.switchGallery_effect.bindAsEventListener(this));
			} catch (e){
				//console.log(e);
			}
		},this);
	},
	dom_effects: function() {
		switch(this.DOM.body.id) {
			case 'index':
				this.bd_content_appear();
				break;
			case 'gallery':
				this.carousel_setup();
				this.bd_content_appear();
				break;
			case 'exibitions_page':
				this.bd_content_appear();
				break;
			case 'information_page':
				this.bd_content_appear();
				break;
			default:
				break;
		}
		
	},
	bd_content_appear: function() {
		try {
			var bd_content_effect = new Effect.Appear(this.DOM.bd_content, {
				duration: 1,
				from: 0,
				to: 1,
				queue: {
					position: 'end',
					scope: 'bd_content_scope'
				}
			});
		} catch(e){
			// console.log(e);
		}	
	},
	header_onClick: function(){
		window.location = 'index.php';
	},
	bd_mouseover: function(){
		this.DOM.bd_content.setStyle({
			'background': 'url("img/site/baby2.gif") no-repeat scroll 41% 0 transparent'
		});
	},
	bd_mouseout: function(){
		this.DOM.bd_content.setStyle({
			'background': 'url("img/site/baby1.gif") no-repeat scroll 41% 0 transparent'
		});
	},
	bd_nav_click: function(e, elem){
		e.preventDefault();
		var url = elem.down('a').href;
		if ($(this.DOM.carousel_buttons)) {
			var buttonEffect = new Effect.Fade(this.DOM.carousel_buttons, {
				duration: 1,
				from: 1,
				to: 0
			});
		}
		var bd_content_effect =	new Effect.Fade(this.DOM.bd_content, {
			duration: 1,
			from: 1,
			to: 0,
			queue:{
				position: 'end',
				scope: 'bd_nav_scope'
			},
			afterFinish: function() {
				location.href = url;
			}.bind(this)
		});
	},
	carousel_setup: function(){	
		var portfolioCarousel = new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'),{
			visibleSlides:1
		});
		this.carousel_button_appear_effect.bind(this).delay(2);
	},
	carousel_button_appear_effect: function() {
		var buttonEffect =	new Effect.Appear(this.DOM.carousel_buttons, {
			duration: 1,
			from: 0,
			to: 1,
			queue:{
				position: 'end',
				scope: 'carouselscope'
			}
		});	
	},
	switchGallery_effect: function(event){
		var target = $(event.target);
		var thumbs = target.up(0).next('div.gallery_thumbs');
		
		if (thumbs.style.display == "none") {
			var GalleryEffect = new Effect.Appear(thumbs, {
				duration: 1,
				from: 0,
				to: 1,
				queue: {
					position: 'end',
					scope: 'galleryscope'
				}
			});
			
			var thumbtextEffect1 =	new Effect.Fade(target, {
			duration: 1,
			from: 1,
			to: 0,
			queue:{
				position: 'end',
				scope: 'thumbtextscope'
				},
			afterFinish: function(){
				target.src = 'http://egibson.co.uk/img/site/fromThumbsText.jpg';
				
				var thumbtextEffect2 =	new Effect.Appear(target, {
					duration: 1,
					from: 0,
					to: 1,
					queue:{
						position: 'end',
						scope: 'thumbtextscope'
					}
				});
					
			}.bind(this)
			});
			
		} else {
			var GalleryEffect =	new Effect.Fade(thumbs, {
			duration: 1,
			from: 1,
			to: 0,
			queue:{
				position: 'end',
				scope: 'galleryscope'
			}
		});
		
		var thumbtextEffect3 =	new Effect.Fade(target, {
			duration: 1,
			from: 1,
			to: 0,
			queue:{
				position: 'end',
				scope: 'thumbtextscope'
				},
			afterFinish: function(){
				target.src = 'http://egibson.co.uk/img/site/tothumbstext.jpg';
				
				var thumbtextEffect4 =	new Effect.Appear(target, {
					duration: 1,
					from: 0,
					to: 1,
					queue:{
						position: 'end',
						scope: 'thumbtextscope'
					}
				});
					
			}.bind(this)
			});
		
		
		}
	},
	validate_login: function(e, form){
		var username = this.validate_field(e, {
			field: 'user',
			message: 'Username'
		});
		var password = this.validate_field(e, {
			field: 'pass',
			message: 'Password'
		});
		if (username === true && password === true) {
			this.form_functions.form_sub(e, form);
		}
	},
	validate_field: function(e,data) {
		var field	=	$(data.field);
		if (field) {
			var field_value		=	field.value.replace(/ /g, '');
			var label_id		=	field.up('td').previous('td').down('label').id;
			var message			=	data.message;
			var valid = true;
			if (field_value == "") {
				this.validate_feedback(label_id, message, 10,'red');
				valid = false;
			} else if ((label_id == 'Vpass') && (field_value.length <= 4)) {
					this.validate_feedback(label_id, '+ 4 letters', 7,'red');
					valid = false;
			} else {
				this.validate_feedback(label_id, message, 1,'#00ff00');
			}
			var return_value = (valid === true)? true : false;
			return return_value;
		}
	},
	validate_feedback: function(label_id,message,count,color) {
		$(label_id).update(message).style.color = ( count%2 == 1 )? color : 'white';
		count--;
		if (count > 0) {
			setTimeout(function(){this.validate_feedback(label_id,message,count,color);}.bind(this),200);
		}
	},
	form_functions: {
		form_sub: function(e, form){
			form.submit()
		},
		form_reset: function(e, form){
			form.reset();
		}
	}
});

$(document).observe('dom:loaded', function(){
		window.clientController = new BASE.Client({
			ID:{
				hd:					'hd',
				bd_nav:				'bd_nav',
				bd_content:			'bd_content',
				ft:					'ft',
				carousel_buttons:	'carousel_buttons',
				contact_details:	'contact_details',
				login_form:			'login',
				login_btn:			'login_loginbtn',
				clear_btn:			'login_clearbtn',
				user:				'user',
				pass:				'pass'
			}
		});
});