/*global $, document, window */

$(function () {
	
	var top, fades, sections,
		init, Section, Tab, hash,
		duration = 'fast',
		easing = 'swing',
		openHeight = 350,
		closedHeight = 135,
		prefix = 'nohash-',
		autoOpen = null;
	

	init = function () {
	
		var collection;
		
		hash = document.location.hash.substring(1);
		
		$('#specs').css({display: 'block'});
		collection = $('.spec-section');
		top = collection.offset().top;
		
		fades = [];
		sections = [];
		
		// set up each section
		collection.each(function () {
			this.id = prefix + this.id;
			var section = new Section(
				this.id,
				sections.length,
				$(this)
			);
			sections.push(section);
		});

		if (autoOpen) {
			autoOpen();
		}
	};

	Section = function (id, index, section) {
		
		var self = this,
			construct, open, close, select, fade, tabs;
		
		construct = function () {
	
			var links, hotspots, openLink, closeLink;
		
			// set up this section's white bottom fade
			fade = $('<div class="spec-section-fade"></div>');
			fades.push(fade);
			section.append(fade);
			
			// the other part of the ie7 hack
			section.append('<div class="spec-hotspot-ie7-overlay-hack"></div>');
			
			// a container for hot spots!
			hotspots = $('<div class="spec-hotspot-container"></div>');
			section.append(hotspots);
			
			// to-do: set up this section's open/close button
			openLink = $('<div class="spec-open-link"><div class="spec-open-link-arrow"></div>Open</div>').click(open);
			section.append(openLink);
			
			closeLink = $('<div class="spec-close-link"><div class="spec-close-link-arrow"></div>Close</div>').click(function () {
				window.location.href = '#default';
				close();
			});
			section.append(closeLink);
		
			// set up each tab in a section
			tabs = [];
			links = $('#' + id + ' .spec-tabs li a');
			$('#' + id + ' .spec-tabs li').each(function () {
	
				tabs.push(new Tab(
					self,
					hotspots,
					tabs.length,
					$(this),
					$('#' + links[tabs.length].href.split('#')[1])
				));
			});
			
		};
		
		open = function () {
			
			var dest, pad;
			
			pad = Math.max(0, ($(window).height() - openHeight) / 2);
			dest = Math.max(0, (top + index * closedHeight) - pad);
			
			$('html,body').animate({scrollTop: dest + 'px'}, duration, easing);
			
			$(sections).each(function () {
				if (self === this) {
					tabs[0].on();
					fade.addClass('openfade');
					section.animate(
						{height: openHeight + 'px'},
						duration,
						easing,
						function () {
							section.addClass('open');
						}
					);
				} else {
					this.close();
				}
			});
		};
		
		close = function () {
		
			section.removeClass('open');
			section.animate(
				{height: closedHeight + 'px'},
				duration,
				easing,
				function () {
					$(tabs).each(function () {
						this.off();
						fade.removeClass('openfade');
					});
				}
			);
		
		};
		
		select = function (index) {
			open();
			$(tabs).each(function () {
				this.off();
			});
			tabs[index].on();
		};
		
		this.open = open;
		this.close = close;
		this.select = select;
		
		construct();
	};
	
	Tab = function (section, hotspots, index, tab, pane) {
		
		var construct, click,
			on, off, over, out,
			id;
		
		construct = function () {
			var css, hotspot;
			
			id = pane[0].id;
			if (hash === id) {
				autoOpen = click;
			}
			pane[0].id = prefix + id;
			
			hotspot =
				$('<div class="spec-hotspot"></div>').
				mouseover(over).
				mouseout(out).
				click(click);
	
			hotspots.append(hotspot);
	
			css = {position: 'absolute', left: (index * hotspot.width()) + 'px'};
			tab.css(css);
			hotspot.css(css);
		};
		
		click = function () {
			section.select(index);
		};
		
		on = function () {
			tab.addClass('current');
			pane.addClass('shown');
			window.location.href = '#' + id;
		};
		
		off = function () {
			tab.removeClass('current');
			pane.removeClass('shown');
		};
		
		over = function () {
			tab.addClass('hover');
		};
		
		out = function () {
			tab.removeClass('hover');
		};
		
		this.on = on;
		this.off = off;
		this.over = over;
		this.out = out;
		
		construct();
	};
	
	init();
	
});