/* -LIBRARY EXTENTIONS- */
// MORPH 
Fx.Morph = Fx.Styles.extend({
 
	start: function(className){
 
		var to = {};
 
		$each(document.styleSheets, function(style){
			var rules = style.rules || style.cssRules;
			$each(rules, function(rule){
				if (!rule.selectorText.test('\.' + className + '$')) return;
				Fx.CSS.Styles.each(function(style){
					if (!rule.style || !rule.style[style]) return;
					var ruleStyle = rule.style[style];
					to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
				});
			});
		});
		return this.parent(to);
	}
 
});
 
Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
 
Fx.CSS.Styles.extend(Element.Styles.padding);
Fx.CSS.Styles.extend(Element.Styles.margin);
 
Element.Styles.border.each(function(border){
	['Width', 'Color'].each(function(property){
		Fx.CSS.Styles.push(border + property);
	});
});

// NAVIGATION 
var Navigation = new Class({
	
	options: {
		navElements: [],
		onShow: Class.empty,
		onHide: Class.empty
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.navElements = [];
		this.elementEffects = [];
		this.addNavElements(this.options.navElements);
	},
	
	addNavElements: function(navElements) {
		$$(navElements).each(function(navElement) {
			this.addNavElement(navElement);
		}, this);
	},
	
	addNavElement: function(navElement) {
		this.navElements.include($(navElement));
		navElement.addEvent('click', function() {
			this.showNavElement(navElement);
			}.bind(this));
	},
	
	showNavElement: function(navElement) {
		var now = this.now;
		var currentNavElement = this.navElements[now];
		var iToShow = this.navElements.indexOf(navElement);

		if (navElement) {
			if ($chk(now) && now != iToShow) {
					this.fireEvent('onHide', [this.navElements, iToShow, now]);
			} else {
					this.fireEvent('onShow', [this.navElements, iToShow, now]);
			}
			this.now = iToShow;
		}

	}
	
});
Navigation.implement(new Options, new Events);

var NavigationInformation = Navigation.extend({

	options: {
		navInfoElements: [],
		onShowInfo: Class.empty,
		onHideInfo: Class.empty
	},

	initialize: function(options) {
		this.parent(options);
		this.navInfoElements = [];
		this.infoEffects =  [];
		this.addNavInfoElements(this.options.navInfoElements);
	},

	addNavInfoElement: function(navInfoElement) {
		this.navInfoElements.include($(navInfoElement));
	},

	addNavInfoElements: function(navInfoElements) {
		$$(navInfoElements).each(function(navInfoElement) {
			this.addNavInfoElement(navInfoElement);
		}, this);
	},

	showNavElement: function(navElement) {
		var now = this.now;
		this.parent(navElement);
		var currentNavInfoElement = this.navInfoElements[now];
		var iToShow = this.navElements.indexOf(navElement);
		var navInfoElement = this.navInfoElements[iToShow];
		
		if (navInfoElement) {
			if ($chk(now) && now != iToShow) {
				this.fireEvent("onHideInfo", [this.navElements, this.navInfoElements, iToShow, now]);
			} else {
				this.fireEvent("onShowInfo", [this.navElements, this.navInfoElements, iToShow, now]);
			}
		}
	},

	showNavInfoElement: function(navInfoElement) {
		this.showNavElement(navElements[this.navInfoElements.indexOf(navInfoElement)]);
	}
	
});

/** 
 * INITIALIZATION 
 * - PROJECT THUMBNAIL NAVIGATION
 * - PROJECT NAVIGATION
 */
window.addEvent('domready', function() {
	// WINDOW SCROLL
	// TODO: with the hash it's causing it to go to the hash first
	var scrollWindow = new Fx.Scroll(window, {
		wait: false,
		duration: 1000,
		transition: Fx.Transitions.Quad.easeInOut
	});

	// MAIN NAVIGATION default selection
	if (window.location.toString().search('directors') != -1) {
		$$(".page-item-61")[0].addClass('current_page_item');
	} else if (window.location.toString().search('projects') != -1
		|| window.location.toString().search('tag') != -1) {
		$$(".page-item-65")[0].addClass('current_page_item');
	} // *** the search for the directors must go first because directors are also under projects
	
	// PROJECT NAVIGATION
	var projnav = new NavigationInformation({
		navElements: $$(".projNavElement"),
		navInfoElements: $$(".projectNavHolder"),
		onShow: function(navElements, iToShow, now) {
			showProjectNavigation(navElements, iToShow, now);
		},
		onShowInfo: function(navElements, navInfoElements, iToShow, now) {
				this.navInfoElements[iToShow].setStyle('display', '');	
		}
	});
	
	// select the default project navigation based on what was selected
	var defaultProjNav = $("tagsNav");
	if (window.location.toString().search('s=') != -1) {
		defaultProjNav = $("searchNav");
		if (window.location.toString().match(new RegExp('s=$'))) { // hack to not show featured on the search page
			$$(".clipHolder").setStyle('display', 'none');
		}
	} else if (window.location.toString().search('clients') != -1) {
		defaultProjNav = $("clientsNav");
	} else if (window.location.toString().search('reels') != -1) {
		defaultProjNav = $("reelsNav");
	} else if (window.location.toString().search('adam-mortimer') != -1) {
		defaultProjNav = $("adam-mortimerNav");
	} else if (window.location.toString().search('layne-braunstein') != -1) {
		defaultProjNav = $("layne-braunsteinNav");
	} else if (window.location.toString().search('marc-dobiecki') != -1) {
		defaultProjNav = $("marc-dobieckiNav");
	} else if (window.location.toString().search('francine-mcdougall') != -1) {
		defaultProjNav = $("francine-mcdougallNav");
	}

	if (defaultProjNav != null) 
		projnav.showNavElement(defaultProjNav);

	// PROJECT THUMBNAIL NAVIGATION
	var tmbnav = new NavigationInformation({
		navElements: $$(".thumbnailHref"),
		navInfoElements: $$(".entry"),
		onShow: function(navElements, iToShow, now) {
			morphSidebar(navElements, iToShow, now);
		},
		onHide: function(navElements, iToShow, now) {
//				(new Fx.Style(navElements[now], 'opacity')).start(1).chain(function() {
//					(new Fx.Style(navElements[iToShow], 'opacity')).start(.4);
//				}.bind(this));
			navElements[now].setStyle('opacity', 1);
			navElements[iToShow].setStyle('opacity', .4);
		},
		onShowInfo: function(navElements, navInfoElements, iToShow, now) {
			scrollWindow.toTop();
			(new Fx.Style(navInfoElements[iToShow], 'opacity', {duration: 50, wait: false})).start(1).chain(function() {
				this.navInfoElements[iToShow].setStyle('display', '');	
				window.location.hash = navElements[iToShow].id;
			}.bind(this));
		},
		onHideInfo: function(navElements, navInfoElements, iToShow, now) {
				scrollWindow.toTop();
				(new Fx.Style(navInfoElements[now], 'opacity', {duration: 50, wait: false})).start(0).chain(function() {
					this.navInfoElements[now].setStyle('display', 'none');
					this.navInfoElements[iToShow].setStyle('display', '');
					navInfoElements[iToShow].setStyle('opacity', .99);
//					(new Fx.Style(navInfoElements[iToShow], 'opacity')).start(.99);
					window.location.hash = navElements[iToShow].id;
				}.bind(this));
		}
	});
	// select a project if it is requested in the hash
	if (window.location.hash != "" && window.location.hash != null) { 
		tmbnav.showNavElement($$(window.location.hash)[0]);
	}

	if (window.location.toString().search('about') != -1
	|| window.location.toString().search('contact') != -1
	|| window.location.toString().search('press') != -1
	|| window.location.hash == "#respond") {
		morphSidebar($$(".thumbnailHref"), null, null);
	}
});

function morphSidebar(navElements, iToShow, now) {
	// == Start Morph ==
//	$("sidebar").setStyle('display', 'none');
	
	// -- Hide Extra Navigation
	$("keyNav").setStyle('display', 'none');

	// -- Thumbnail Morph -- 
	// goes through the list and shrinks the thumbnails one by one
	for(i=0; i < navElements.length; i++) {
		$("title" + navElements[i].id).setStyle('display', 'none');
		clipCaseMorph = new Fx.Morph(navElements[i].id, {duration: 1, wait: false});
		clipCaseMorph.start('clipCaseSm');
	}

	// -- Slide Sidebar --
	var sideBarMorph = new Fx.Morph('sidebar', {duration: 10, wait: false});
	sideBarMorph.start('small').chain(function() {
			// -- Highlight Selected Element --
			if (navElements[iToShow]) {
				(new Fx.Style(navElements[iToShow], 'opacity')).start(.4);
			}

			// -- Shrink the Project Navigation --
			showProjectNavigation($$(".projNavElement"), null, null);

			// -- Show Extra Smaller Navigation -- 
			$("keyNavSm").setStyle('display', '');

			$$(".primary")[0].setStyle('display', '');
		}.bind(this));

//	$("sidebar").setStyle('display', '');
}

var showProjectNavigation_sideDisplay = "";
var showProjectNavigation_selectedNav = "";
function showProjectNavigation(navElements, iToShow, now) {
	if (now != null) {

	// hide previous
		$(navElements[now].id + 'Href').setStyle('background-color', '');
		$(navElements[now].id + 'Href').setStyle('background-image', 'url(http://heidihysell.com/projects/bark-bark/wp-content/themes/bark-bark/images/' + navElements[now].id + showProjectNavigation_sideDisplay + '_btn.png)');

	// show new
		showProjectNavigation_selectedNav = navElements[iToShow].id;
		$(navElements[iToShow].id + 'Href').setStyle('background-color', '#333');
		$(navElements[iToShow].id + 'Href').setStyle('background-image', 'url(http://heidihysell.com/projects/bark-bark/wp-content/themes/bark-bark/images/' + navElements[iToShow].id + showProjectNavigation_sideDisplay + '_down_btn.png)');

	} else if (iToShow != null) {

		showProjectNavigation_selectedNav = navElements[iToShow].id;
		$(navElements[iToShow].id + 'Href').setStyle('background-color', '#333');
		$(navElements[iToShow].id + 'Href').setStyle('background-image', 'url(http://heidihysell.com/projects/bark-bark/wp-content/themes/bark-bark/images/' + navElements[iToShow].id + showProjectNavigation_sideDisplay + '_down_btn.png)');

	} else if (showProjectNavigation_sideDisplay == "") {
//		var myChain = new Chain();
	
		showProjectNavigation_sideDisplay = "_sm";
		$$(navElements).each(function(navElement) {
//			myChain.chain(function(navElement) {
				var down = "";
				if (showProjectNavigation_selectedNav == navElement.id) {
					down = "_down";
				} 
	//			var fx = new Fx.Elements($$("#" + navElement.id + " a"), {wait: false, duration: 100, transition: Fx.Transitions.Back.easeOut});
				$(navElement.id + 'Href').setStyle('background-image', 'url(http://heidihysell.com/projects/bark-bark/wp-content/themes/bark-bark/images/' + navElement.id + showProjectNavigation_sideDisplay + down + '_btn.png)');
				if (window.location.toString().search('directors') != -1) {
					$(navElement.id + 'Href').setStyle('width', ($(navElement.id + 'Href').getStyle("width").toInt() * .75) + 'px'); // current width * 58%
					$(navElement.id + 'Href').setStyle('height', '25px');
					$(navElement.id + 'Href').setStyle('clear', 'both');
				} else {
					$(navElement.id + 'Href').setStyle('width', ($(navElement.id + 'Href').getStyle("width").toInt() * .58) + 'px'); // current width * 58%
					$(navElement.id + 'Href').setStyle('height', '17px');
				}
				$(navElement.id + 'Holder').setStyle('font-size', '10px');
//			});
		}, this);

//		var runChain = function() {
//			myChain.callChain();
//			if (myChain.chains.length == 0) { runChain = $clear(timer); } 
//		}
//		var timer = runChain.periodical(500);
	}
}