// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

function toggleSidebar(switchElement) {
	$('box-news').style.display = 'none'
	$('box-interactive').style.display = 'none'
	$('box-strategies').style.display = 'none'
	$('box-branding').style.display = 'none'
	
   	if (switchElement == 'box-news'){
		$(switchElement).style.display = 'block';
	}
	else if (switchElement == 'box-interactive'){
		$(switchElement).style.display = 'block';
	}
	else if (switchElement == 'box-strategies'){
		$(switchElement).style.display = 'block';
	}
	else if (switchElement == 'box-branding'){
		$(switchElement).style.display = 'block';
	}
}

startList = function() {
	navRoot = $("menu");
	for (i = 0; i < navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName == "LI") {
			node.onmouseover = function() {
				this.className += " over";
			}
			node.onmouseout=function() {
				this.className = this.className.replace(" over", "");
			}
		}
	}
}

Event.observe('window', 'load', function() {
	startList();
});

function process_rollover(e) {
	var a = Event.findElement(e, "a");
	var id = a.id.gsub("_btn", "");
	
	// display the rollover text
	$(id + "_rollover").setStyle({
		display: "block"
	});

	// display the rollover button
	var img = a.down(0);
	var img_on = a.down(1);
	if (img_on) {
		img.setStyle({
			display: "none"
		});
		img_on.setStyle({
			display: "block"
		});	
	}
}

function process_rollout(e) {
	var a = Event.findElement(e, "a");
	var id = a.id.gsub("_btn", "");
	
	// hide the rollover text
	$(id + "_rollover").setStyle({
		display: "none"
	});
	
	// go back to the original button
	var img = a.down(0);
	var img_on = a.down(1);
	if( img_on ) {
		img.setStyle({
			display: "block"
		});
		img_on.setStyle({
			display: "none"
		});	
	}
}

/* a commonly used function in the scroller. it returns the array containing the type of data passed in as a string */
function get_portfolio_data(type) {
	switch(type) {
		case "client":
			data = clients;
			break;
		case "market":
			data = markets;
			break;
		case "medium":
			data = mediums;
			break;
		default:
			data = []
			break;
	}
	
	return data;
}

/* this function is what kicks the whole scroller operation off */
function assemble_portfolio(view_type) {
	var data = get_portfolio_data(view_type);
	
	var scroller = $('scroller');
	data.each(function(element, index) {
		build_scroller_node(scroller, element, view_type + "_" + index);
	});
	
	var width = Math.floor((data.length + 1.05) * 115); // make it slightly wider then neccasry otherwise it wraps down to the next line
	if( width < 675 ) {
		width = 675;
	}
	
	/*
	 * This causes IE to fail; seems to work fine without it:
	 * 
	 * scroller.setStyle({width: width + "px"});
	 * 
	 */
	
	scroller_selected( $(view_type + '_0') );
	
	
	// assign the left and right project arrows to events
	Event.observe("project_left", "mousedown", previous_project);
	Event.observe("project_right", "mousedown", next_project);
	
	
	// ability to target projects directly through anchors
	url_parts = document.location.toString().split('#')
	if (url_parts.length > 1) {
		project_code = url_parts[1]
		project = projects.find(function(e) { return e.code == project_code})
		
		var compare;
		var collection;
		
		switch(view_type) {
			case "market":
				collection = markets;
				compare = project.market;
				break;
			case "client":
				collection = clients;
				compare = project.client;
				
				break;
			case "medium":
				collection = mediums;
				compare = project.medium;
				break;
			default:
				compare = null;
				break;
		}
		
		type_index = collection.indexOf(compare);
		project_index = projects.indexOf(project);
		
		scroller_selected($(view_type + '_' + type_index));
		
		project_selected($('project_' + project_index))
	}
	
}

/* build the node that sits inside the slider and attach the mouse click event */
function build_scroller_node(parent, element, id) {
	var node = Builder.node("span", {id: id}, [
		Builder.node("img", {src: element.logo, alt: element.name}),
		Builder.node("p", element.name)
	]);
	
	parent.appendChild(node);
	
	// preoad the mouseover image
	var img = new Image();
	var logo = $H(element).logo.split(".");
	img.src = logo[0] + "_r." + logo[1];
	
	// Before
	Event.observe(id, "mousedown", scroller_clicked);
	Event.observe(id, "mouseover", scroller_node_mouseover);
	Event.observe(id, "mouseout", scroller_node_mouseout);
}

function scroller_node_highlight(span) {
	var img = span.down("img");
	var p = span.down("p");

	var id = parseInt(span.id.split("_")[1]);
	var element = get_portfolio_data(span.id.split("_")[0])[id];

	var logo = element.logo.split(".");
	img.src = logo[0] + "_r." + logo[1];

	p.addClassName("text-rollover");
}

function scroller_node_dehighlight(span) {
	var img = span.down("img");
	var p = span.down("p");
	
	var id = parseInt(span.id.split("_")[1]);
	var element = get_portfolio_data(span.id.split("_")[0])[id];
	
	img.src = element.logo;
	
	p.removeClassName("text-rollover");
}

function scroller_node_mouseout(e) {
	var span = Event.findElement(e, "span");
	
	if (!span.hasClassName("selected")) {
		scroller_node_dehighlight(span);
	}
}

function scroller_node_mouseover(e) {
	var span = Event.findElement(e, "span");
	
	scroller_node_highlight(span);
}

/* builds the little grey boxes in the top right that are used to select the current project */
function build_project_bubble(parent, project, id) {
	var node = Builder.node("a", {href: "javascript:choose_project('" + project.code + "');", id: id, className: "project_bubble"}, "##");

	parent.appendChild(node);
	Event.observe(id, "mousedown", project_clicked);
}

/* this function is called when one of the boxes inside the scroller is clicked on */
function scroller_clicked(e) {
	var span = Event.findElement(e, "span");
	scroller_selected(span);
	
	// Select Node
	var img = span.down("img");
	var p = span.down("p");
	
	var id = parseInt(span.id.split("_")[1]);
	var element = get_portfolio_data(span.id.split("_")[0])[id];
	
	var logo = element.logo.split(".");
	img.src = logo[0] + "_r." + logo[1];
	
	p.addClassName("text-rollover");
}

function scroller_selected(span) {
	data_type = span.id.split("_")[0];
	index = parseInt(span.id.split("_")[1]);
	
	var data = get_portfolio_data(data_type)[index];
	
	/* find all projects that match the selected scroller */
	viewable_projects = projects.findAll(function(project) {
		var compare;
		
		project = $H(project);
		
		/* unsure of what type of comparison we are making, abstract it through this switch statement */
		switch(data_type) {
			case "market":
				compare = project.market;
				break;
			case "client":
				compare = project.client;
				break;
			case "medium":
				compare = project.medium;
				break;
			default:
				compare = null;
				break;
		}
		
		return compare == data;
	});
	
	clean_assets();
	clean_bubbles();
	clean_description();
	
	// Mark Scroller as Selected
	$$('#scroller span').each(function(a) {
		a.removeClassName("selected");
		scroller_node_dehighlight(a);
	});
	
	$$('#' + data_type + '_' + index)[0].addClassName("selected");
	scroller_node_highlight($$('#' + data_type + '_' + index)[0]);
	
	
	var bubbles = $('bubbles');
	
	
	/*
	 * OLD: See Below!
	 * 
	viewable_projects.each(function(project) {
		var index = projects.indexOf(project);
		build_project_bubble(bubbles, project, "project_" + index);
		
		this.i++;
		if (i % 10) {
			bubbles.appendChild(Builder.node('br'));
		}
	});
	*/
	
	/*
	 * There appears to be a bug whereby inserting these links dynamically 
	 * does not cause them to be bounded by the width of their container.  
	 * When hardcoding the exact same code as would otherwise by dynamically inserted, 
	 * it does.  
	 * Therefore, we must manually output a BR tag after every nine to get it to break
	 * down to the next line.
	 */
	for (var i = 0, len = viewable_projects.length; i < len; ++i) {
		var project = viewable_projects[i]
		var index = projects.indexOf(project)
		
		build_project_bubble(bubbles, project, "project_" + index);
		
		if ((i + 1) % 8 == 0) {
			bubbles.appendChild(Builder.node('br'));
		}
	}
	
	/* select the first project in the list, display its assets and its information */
	var project = viewable_projects[0];
	project_selected($("project_"+projects.indexOf(project)));
}

/* delete all of the child nodes inside the asset_viewer div */
function clean_assets() {
	$('asset_viewer').descendants().each(remove_node);
}

/* delete all of the child nodes inside the asset selector ul */
function clean_asset_selector() {
	$('asset_selector').show();
	$$('#asset_selector ul').first().descendants().each(remove_node);
}

/* delete all of the child nodes inside the bubbles div */
function clean_bubbles() {
	$('bubbles').descendants().each(remove_node);
}

/* clean out the dd's in the project_information div */
function clean_description() {
	$('client_name').update("");
	$('media_type').update("");
	$('description').update("");
}

/* this is the observe method called when the project bubble is selected*/
function project_clicked(e) {
	var a = Event.findElement(e, "a");
	project_selected(a);
}

/* dummy method - only used so users can determine project.code through status bar */
function choose_project(code) {
	
}

function project_selected(a) {
	// make sure all the project bubbles are 'unselected'
	$$('a.project_bubble').each(function(a) {
		a.removeClassName("selected");
	});
	
	clean_assets();
	clean_asset_selector();
	if( a ) {
		a.addClassName("selected");
		var index = parseInt(a.id.split("_")[1]);

		var project = projects[index];

		populate_project_information(project);
		populate_assets(project, 0);	
	}
}

/* this fills in the asset_viewer div after a project is selected */
function populate_assets(project, index) {
	var div = $('asset_viewer');
	var img = Builder.node("img", {src: project.assets[index]});
	div.appendChild(img);
	
	clean_asset_selector();
	
	// fill in the asset selector li's
	var ul = $$('#asset_selector ul').first();
	project.assets.each(function(asset, index) {
		var a = Builder.node("a", {id: "asset_"+index, href: "javascript:;"}, index+1);
		var li = Builder.node("li", [a]);
		ul.appendChild(li);
		Event.observe(a, "mousedown", asset_clicked);
	});
	$('asset_'+index).addClassName("selected");
	
	// Don't show any pages at all if there is only one
	if (project.assets.length == 1) {
		$("asset_selector").hide();
	}
}

/* this fills in the project_information div when a project is sleceted */
function populate_project_information(project) {
	$('client_name').update(project.client.name);
	$('media_type').update(project.medium.name);
	$('description').update(project.description);
}

/* removes a node from the dom */
function remove_node(node) {
	$(node).remove();
}
function previous_project(e) {
	var selected = $$('#bubbles a.selected').first();
	if( selected ) {
		var a = selected.previous("a");
		if( a ) {
			project_selected(a);
		}		
	}
}
function next_project(e) {
	var selected = $$('#bubbles a.selected').first();
	if( selected ) {
		var a = selected.next("a");
		if( a ) {
			project_selected(a);
		}
	}
}
function asset_clicked(e) {
	var a = Event.findElement(e, "a");
	clean_assets();
	
	var project_index = parseInt($$('#bubbles a.selected').first().id.split("_").last());
	var project = projects[project_index];
	
	var asset_id = parseInt(a.id.split("_").last());
	populate_assets(project, asset_id);
}