/*** Manage header search form ***/
var HeaderSearch = {
	formId: 'header-search',
	textInputSel: '#header-search input[name=search]',
		
	defaultText: 'Search',
	defaultClass: 'default',
		
	init: function() {
		var form = $(this.formId);
		if (form) {
			Global.addJSClass($(this.formId));
			this.hideLabel();
			this.hideSubmit();
			this.addDefaultText();
			this.createTextInputEvents();
			this.createSubmitLink();
		}
	},
	
	hideLabel: function() {
		Global.hideElm($(this.formId).down('label'));
	},
	
	hideSubmit: function() {
		Global.hideElm($(this.formId).down('input[type=submit]'));
	},
	
	/* add default text to text input */
	addDefaultText: function() {
		var input = $$(this.textInputSel)[0];
		if (input) {
			input.value = this.defaultText;
			input.addClassName(this.defaultClass);
		}
	},
		
	createTextInputEvents: function() {
		var input = $$(this.textInputSel)[0];
		if (input) {
			input.observe('focus', this.handleTextInputFocus);
			input.observe('blur', this.handleTextInputBlur);
		}
	},
		
	handleTextInputFocus: function(e) {
		var input = e.element();
		if (input.value == HeaderSearch.defaultText) {
			input.value = '';
			input.removeClassName(HeaderSearch.defaultClass);
		}
	},
		
	handleTextInputBlur: function(e) {
		var input = e.element();
		if (input.value == '') {
			input.addClassName(HeaderSearch.defaultClass);
			input.value = HeaderSearch.defaultText;
		}
	},
	
	/* create hoverable submit link */
	createSubmitLink: function() {
		var a = new Element('a', {
			href: '#',
			className: 'submit'
		});
		a.innerHTML = 'Search<span></span>';
		$(this.formId).insert(a);
		
		a.observe('click', this.handleSubmitLinkClick);
	},

	/* submit form from link click */	
	handleSubmitLinkClick: function(e) {
		e.stop();
		$(HeaderSearch.formId).submit();
	}
};

/*** Manage header section transfer form ***/
var SectionTransfer = {
	transferLinkId: 'section-transfer',
	popupId: 'section-transfer-popup',
	fading: false, // mutex
	
	init: function() {
		if ($(this.transferLinkId)) {
			this.createPopup();
			this.createTransferLinkEvents();
		}
	},
		
	createPopup: function() {
		var popupHTML = '<div class="inner"><div class="inner-inner"><h2>Please select your area of interest</h2><p>Choose from the sections below to find out how you can benefit from eating more seafood and how to choose from sustainable sources.<br />We also offer information and resources to support people working within all areas of the seafishing industry:</p><div class="cols"><div class="col"><a href="/eating-seafood" class="blocklink list">Eating Seafood</a><ul><li><a href="/eating-seafood/health">Nutrition</a></li><li><a href="/media/sustainability">Sustainability</a></li><li><a href="/eating-seafood/seafood-recipes">Seafood Recipes</a></li></ul></div><div class="col"><a href="/retailers" class="blocklink">Retailers</a><a href="/foodservice" class="blocklink">Foodservice</a><a href="/nutritionists-and-teachers" class="blocklink">Nutritionists &amp; teachers</a></div><div class="col"><a href="/international-trade--distributors" class="blocklink">International trade &amp; distributors</a><a href="/processors" class="blocklink">Processors</a><a href="/media" class="blocklink">Media</a></div><div class="col"><a href="/fishermen" class="blocklink">Fishermen</a><a href="/boatbuilders" class="blocklink">Boatbuilders</a><a href="/aquaculture" class="blocklink">Aquaculture</a></div></div></div></div>';
		
		var popup = new Element('div', {
			'id': this.popupId
		});
		popup.insert(popupHTML);
		popup.hide();
		$(this.transferLinkId).insert({ after: popup });
	},
	
	createTransferLinkEvents: function() {
		$(this.transferLinkId).observe('click', this.handleTransferLinkClick);
	},
	
	handleTransferLinkClick: function(e) {
		e.stop();
		if (!SectionTransfer.fading) {
			var popup = $(SectionTransfer.popupId);
			var transferLink = $(SectionTransfer.transferLinkId);
			if (popup.visible()) {
				transferLink.removeClassName('open');
				SectionTransfer.hidePopup();
			} else {
				transferLink.addClassName('open');
				SectionTransfer.showPopup();
			}
		}
	},
	
	showPopup: function() {
		$(this.popupId).slideDown();
	},
		
	hidePopup: function() {
		$(this.popupId).slideUp();
	}
};

/*** for interactive header elements ***/
var Header = {
	init: function() {
		HeaderSearch.init();
		SectionTransfer.init();
	}
};

var Global = {
	hideClass: 'hide', // css class used to hide an element
	jsClass: 'js', // css class to denote use js use
		
	init: function() {
		Header.init();
	},
	
	/* add js class to given element */
	addJSClass: function(elm) {
		elm = $(elm);
		if (elm) {
			elm.addClassName(this.jsClass);
		}
	},
	
	/* add hide class to given element */
	hideElm: function(elm) {
		elm = $(elm);
		if (elm) {
			elm.addClassName(this.hideClass);
		}
	},
	
	/* remove hide class from given element */
	unhideElm: function(elm) {
		elm = $(elm);
		if (elm) {
			elm.removeClassName(this.hideClass);
		}	
	}
};

var Twitter = function(element) {
	var twitter;
	
	includeJS("http://widgets.twimg.com/j/2/widget.js", function() {
		twitter = new TWTR.Widget({
			'version': 2,
			'type': 'profile',
			'id': element.identify(),
			'rpp': 3,
			'interval': 30000,
			'width': 'auto',
			'height': 300,
			'theme': {
				'shell': {
					'background': '#ffffff',
					'color': '#211621'
				},
				'tweets': {
					'background': '#ffffff',
					'color': '#000000',
					'links': '#0087C8'
				}
			},
			'features': {
				'scrollbar': false,
				'loop': false,
				'live': false,
				'behavior': 'all'
			}
		}).render().setUser('seafishuk').start();
	});
}

var includeJS = function() {
	var loaded;
	
	loaded = [];
	
	return function(js_file, callback, type) {
		var script;
		
		if (loaded.indexOf(js_file) === -1) {
			type = (type || "text/javascript");
			script = document.createElement("script");
			
			if (script.setAttribute) {
				script.setAttribute("type", type);
			}
			
			loaded.push(js_file);
			
			if (typeof callback === "function") {
				if ("onreadystatechange" in script) {
					script.onreadystatechange = function() {
						if (this.readyState === "loaded" || this.readyState === "complete") {
							this.onreadystatechange = null;
							callback();
						}
					};
				} else {
					script.onload = callback;
				}
			}
			
			script.src = js_file;
			
			document.getElementsByTagName("head")[0].appendChild(script);
		} else {
			callback();
		}
	};
}();

document.observe('dom:loaded', function() {
	Global.init();
	
	$$("div.twitter-feed").each(function(div) {
		new Twitter(div);
	});
});