// -*- Mode: MooTools Javascript; tab-width: 4; -*-

// Library

// Animate 'background-position' using percentages
var anchor=window.location.hash; //anchor with the # character   


if ((document.title)=="Clock Four: Strategy, design, and development for web and mobile.")
{var homepage=true}
else{
var homepage=false}


var isIE;

Element.Styles.backgroundPosition = '@% @%';

this.global = this.global || this;

this.C4 = this.C4 || {};


noobSlide.implement(new Events());


C4.Site = new Class({
	
	options: {
		Accordion:{
			display: null,
			initialDisplayFx: false,
			alwaysHide: true
		}
	},
	
	initialize: function(){
		
		isIE = document.id(document.documentElement).hasClass('ie');
		
		History.start();
		
		// VML IE6 PNG fix
		if (document.id(document.documentElement).hasClass('ie6')) $$('img[src$=.png].photo').each(function(img){
			img.outerHTML = '<v:image class="'+ img.className +'" src="'+ img.src +'" style="'+ img.style.cssText +'" />';
		});
		
		// FIX: IE7 turns off anti-aliasing for all text :(
		if (document.id(document.documentElement).hasClass('ie7')) this.options.Accordion.opacity = false;
		
		$$('a[href^=#]').addEvent('click', function(e){
			history.setState('/'+this.getProperty('href').slice(1).replace('-','/'));
			e.preventDefault();
		});
		$$('dt a')
		.set('tween', {unit: '%'})
		.setStyle('background-position', -10)
		.addEvents({
			
			'activate': function(){
				this.addClass('on');
			},
			'deactivate': function(){
				if (this.hasClass('on'))
					this.removeClass('on').tween('background-position', 0, -10 );
				else
					this.tween('background-position', -10 );
			},
			'hover': function(){
				this.tween('background-position', 0);
			},
			'unhover': function(){
				if (!this.hasClass('on'))
					this.tween('background-position', -10 );
				// else
				// 	this.tween('background-position', 0 );
			},
			
			'click': function(){ if (!this.hasClass('on')) this.fireEvent('activate'); },
			'focus': function(){ this.fireEvent('hover'); },
			'mouseenter': function(){ this.fireEvent('hover'); },
			
			'blur': function(){ this.fireEvent('unhover'); },
			'mouseleave': function(){ this.fireEvent('unhover'); }
		});
		$$('#splash a').addEvent('click', function(){
			this.blur();
		});
		
		this.initSlideshowHome();
		
		this.initNavs();
		
		this.initNavHover();
		
		this.initNavsTop();
		
		this.initNavsHead();
		
		this.initNavHome();
		
		$$('div.slides').each(this.initSlideshowColumns, this);
		
	},
	
	initNavs: function(){

		if (homepage==true){

		if (anchor=="#home"){
		var anchoris=0}
		if ((anchor=="#clients")|| (anchor=="#/clients")){
		var anchoris=1}
		if ((anchor=="#capabilities") ||(anchor=="#/capabilities")){
		var anchoris=2}
		if ((anchor=="#team")|| (anchor=="#/team")){
		var anchoris=3}
		}
		else{}
			var navs = this.navs = new Fx.Accordion('div.nav > h2', 'div.nav > div', $merge(this.options.Accordion,{
			
		display: anchoris,
			
					initialDisplayFx: true,
					alwaysHide: false
				}));
		
				$$('div.nav').each(function(nav, i){
					if (nav.hasClass('default')) navs.display(i, true);
				});
		
	},
	
	initNavHover: function(){
		var colors = {};
		
		function getColor(element){
			var uid = element.uid;
			element = document.id(element);
			while (element && element.getStyle('background-color') == 'transparent') element = element.getParent();
			
			var color = colors[uid] = colors[uid] || { off: element.getStyle('background-color') };
			color.on = color.on || new Color(color.off).rgb.map(function(c){ return c - 8;}).rgbToHex();
			
			return color;
		};
		
		$$('.nav h2 > a, .nav-top h2 > a').each(function(el){
			
			var color = getColor(el);
			el.setStyle('background-color', color.off);
			el.set('tween', {duration: 500, transition: 'expo:out'});
			
			el.addEvents({
				'mouseenter': function(event){ this.tween('background-color', color.on); },
				'mouseleave': function(event){ this.tween('background-color', color.off); }
			});
			
		});
	},
	

	initNavHome: function(){
		var homeToggler = $$('#home h2')[0];
		var homeTogglerHeight = homeToggler.getHeight();

if ((anchor=="#team")|| (anchor=="#/team")|| (anchor=="#capabilities")|| (anchor=="#/capabilities")||(anchor=="#clients") || (anchor=="#/clients") || (anchor=="#privacy") )
		{var homeHeight =25
		}
		else{var homeHeight = 0}


		homeToggler.setStyles({
			'overflow': 'hidden',
			'height': homeHeight
		});



		
		if (this.navs) this.navs.addEvents({
			'background': function(toggler, element){
				if (toggler == homeToggler){
					homeToggler.tween('height', homeTogglerHeight);
				}
			},
			'active': function(toggler, element){
				if (toggler == homeToggler){
					homeToggler.tween('height', 0);
				}
			}
		});
		
		$$('#header h1 a').addEvent('click', homeToggler.retrieve('accordion:display') );
		$$('.contact a').addEvent('click',  $$('#contact h2')[0].retrieve('accordion:display') );
	},
	

    



	initNavsTop: function(){
		var navs = new Fx.Accordion('div.nav-top > h2', 'div.nav-top > div', this.options.Accordion);
	},
	
	initNavsHead: function(){
		var el = document.id('new');
		if (!el) return;
		
		var close = el.getElements('a.close');
		close.fade('hide');
		
		var navs = new Fx.Accordion('div.nav-header > h2', 'div.nav-header > div', this.options.Accordion);
		navs.addEvents({
			'background': function(toggler, element){
				close.fade('out');
			},
			'active': function(toggler, element){
				close.fade('in');
			}
		});
		
		close.addEvent('click', navs.togglers[0].retrieve('accordion:display'));
	},
	
	initSlideshowHome: function(){
		
		// Basics
		var element = document.id('home');
		
		var SS = this.slideShowHome = new noobSlide({
			size  : 933,
			box   : element.getElement('div.content'),
			items : element.getElements('div.contents'),
			handles : element.getElements('div.subnav a'),
			
			// addButtons: {
			// 	previous : element.getElement('.last'),
			// 	next     : element.getElement('.next')
			// },
			
			onWalk: function(item, handle){ this.fireEvent('walk', [item, handle]); }
		});
		
		SS.box.getParent()
			.addEvent('scroll', function(){
				this.scrollLeft = 0;
			})
		;
		
		// Remove the Home slide button since it is only needed for semantics
		SS.handles && SS.handles[0] && SS.handles[0].dispose();
		
		// Click to logo to go back to the splash page
		$$('#header h1 a').addEvent('click', SS.walk.bind(SS, [0]));
		
		// Click the splash page link to go to the 'change' slide
		$$('#splash a').addEvent('click', SS.walk.bind(SS, [1]));
		
				// Click the change page link to go back to the 'splash' slide
		$('back2spash').addEvent('click', SS.walk.bind(SS, [0]));
		$('go2trust').addEvent('click', SS.walk.bind(SS, [2]));
		$('back2change').addEvent('click', SS.walk.bind(SS, [1]));
		$('go2ourname').addEvent('click', SS.walk.bind(SS, [3]));
		$('back2trust').addEvent('click', SS.walk.bind(SS, [2]));		
		
		SS.handles && SS.handles[0] && SS.handles[1].dispose();
	
		
		// toggle 'on' class for the handles
		SS.addEvent('walk',function(item, handle){
			this.handles.morph({
				'color': '#555F68',
				'background-color': '#fff'
			});
			if (handle){
				handle.morph({
					'color': '#FAF5DC',
					'background-color': '#555F68'
				});
			}
		});
		
		// Special events for the first of not-first slide
		SS.addEvent('walk',function(item, handle){
			if (item == this.items[0]) this.fireEvent('walk:0');
			else this.fireEvent('walk:not(0)');
		});
		
		// Special stuff for the first slide
		var defaultColor = element.getStyle('background-color');
		var elementAndSection = $$([element, element.getChildren('div.section')[0]]);
		var buttons = $$([SS.buttons.next, SS.buttons.previous, element.getElement('div.subnav ul')].flatten());
		
		SS.addEvent('walk:0',function(item, handle){
			elementAndSection.tween('background-color', defaultColor);
			buttons.fade('out');
		});
		// SS.fireEvent('walk:0');
		elementAndSection.setStyle('background-color', defaultColor);
		buttons.fade('hide');
		
		
		// Special stuff for every slide except the first
		SS.addEvent('walk:not(0)',function(item, handle){
			elementAndSection.tween('background-color','#fff');
			buttons.fade('in');
		});
		
		// Switch to the default slide
		// TODO: Integrate with History
		SS.walk(0);
	},
	
	initSlideshowColumns: function(element){
		
		var box = element.getElement('div.slide-body');
		box.setStyles({
			position: 'relative',
			overflow: 'hidden'
		});
		
		var width = element.getElement('div.slide-mask')
			.addEvent('scroll', function(){
				this.scrollLeft = 0;
			})
			.setStyles({
				position: 'relative',
				overflow: 'hidden'
			})
			.getWidth()
		;
		
		var items = element.getElements('div.slide-body > *');
		items.setStyles({
			// 'background-color': '#fff',
			'float': 'left',
			width: width
		});
		items.each(function(item){
			if (!item) return;
			
			item.set('morph',{
				// transition: 'bounce:out'
			});
			
			var border = item.getElements('div.about, div.summary, div.photo, div.photo b').set('morph',{
				duration: 1000,
				transition: 'expo:out'
			});
			
			var img = border && border[0] && border[0].getElement('img, .photo');
			img && img.set('morph',{
				duration: 1000,
				transition: 'expo:out'
			});
			
			var links = item.getElements('a');
			
			var thumbs = item.getElements('div.photo .photo');
			thumbs.setStyle('top',14);
			
			item.addEvents({

				'beforeActivate': function(){
					this.morph({
						color: '#999'
					});
					thumbs.setStyle('top',14);
				},

				'beforeDeactivate': function(){
					this.morph({
						color: '#eee'
					});
					img && img.morph({
						right: -20,
						opacity: isIE ? 1 : 0.3
					});
					border.morph({
						'border-color': '#eee'
					});
				},

				'activate': function(){
					this.morph({
						color: '#4a5c6b'
					});
					img && img.morph({
						right: 0,
						opacity: 1
					});
					border.morph({
						'border-color': '#e7cb38'
					});
					
					thumbs.tween('top',14,0);
				},

				'deactivate': function(){
				}

			});
		});
		
		
		// Tips
		var tips = element.getElements('div.photos div.photo');
		
		//store titles and text
		tips.each(function(element,index) {
			var content = element.get('title');
			if (!content) return;
			
			content = content.split('—');
			element.store('tip:title', content[0]);
			element.store('tip:text', content[1]);
		});
		
		//create the tooltips
		var tipz = tips && tips[0] && new Tips(tips,{
			className: 'tipz',
			
			hideDelay: 100,
			showDelay: 100,
			
			offset: { x:4, y:14 },
			windowPadding: { x:17, y:17 },
			
			onShow: function(){
				this.tip.morph({
					opacity: isIE ? 1 : 0.95
				});
			},
			onHide: function(){
				this.tip.morph({
					opacity: 0
				});
			},
			
			0:0
		});
		tipz && tipz.tip.setStyles({
			opacity: 0
		});
		
		
		// Basics
		var SS = this.slideShowHome = new noobSlide({
			size  : width,
			box   : box,
			items : items,
			handles : element.getElements('.slide-handles a'),
			
			// addButtons: {
			// 	previous : element.getElement('.last'),
			// 	next     : element.getElement('.next')
			// },
			
			onWalk: function(item, handle){
				this.fireEvent('walk', [item, handle]);
				var self = this;
				this.fx.chain(function(){
					self.fireEvent('complete', (self.items[self.currentIndex] || null), (self.handles && self.handles[self.currentIndex] ? self.handles[self.currentIndex] : null));
				});
			}
		});
		
		var nexts = element.getElements('.next');
		if (nexts && nexts.length) SS.addActionButtons('next', nexts);
		
		var lasts = element.getElements('.last');
		if (lasts && lasts.length) SS.addActionButtons('previous', lasts);
		
		
		// toggle 'on' class for the handles
		SS.addEvent('walk',function(item, handle){
			this.handles.filter(function(item){ return item != handle; }).fireEvent('deactivate');
			handle.fireEvent('activate');
		});
		
		// fade while sliding
		SS.addEvent('walk', function(item){
			this.items.filter(function(it){ return it != item; }).fireEvent('beforeDeactivate');
			item.fireEvent('beforeActivate');
		});
		SS.addEvent('complete',function(item){
			this.items.filter(function(it){ return it != item; }).fireEvent('deactivate');
			item.fireEvent('activate');
		});
		
		// Click on the header moves to the first slideshow page
		element.getParent().getPrevious().addEvent('click', SS.walk.bind(SS,0));
		
		// Switch to the default slide
		// TODO: Integrate with History
		SS.walk(1);
		SS.walk(0);
	}
	
});
C4.Site.init = function(){
	global.site = new C4.Site();
};



// Implementation

window.addEvent('domready', C4.Site.init);
window.addEvent('domready', function(){
	document.id(document.documentElement).removeClass('loading');
});




if (homepage==true)
{

var el = $('myElement').fade('hide');

	
	
	// Long version
	$('tweenOpacity').addEvent('mouseover', function(e) {
		// You often will need to stop propagation of the event
		e.stop();
		el.fade(1);
	});
	

	$('tweenOpacity').addEvent('mouseout', function(e) {
		// You often will need to stop propagation of the event
		e.stop();
		el.fade(0);
	});
}