/**************************************************************************
* Shaub Scripts
*
* For the front page and project detail pages.
* Scott Wespi (scott@darkstardesign.com)
*
* Requires Prototype / Scriptaculous
**************************************************************************/

function fixCompanyHeight() {
	$('company').down().setStyle('margin-bottom:' + ($('container').offsetHeight - 120 - $('company').offsetHeight) + 'px');
}

/**************************************************************************
* Shaub Front Page Project Switcher
*
* Sets up the featured project and top cycle projects.
* Scott Wespi (scott@darkstardesign.com)
*
* Requires Prototype / Scriptaculous
**************************************************************************/
var auto_switch_timer = 6000; // time between project switches for the top projects
var fade_timer = 1000; // total time for a project switch (fade from one to another)
var max_top_projects = 6; // if this value gets above 9, code around line 73 should change to show double digit numbers (without a leading 0)

/* the following two values should be set to a dom image object before initProjects is called and after the image objects have been drawn */
var hidden;
var shown;

/* don't change these values */
var cur_project = 0;
var top_projects = new Array();
var project_cycle = -1;
var project_timeout = -1;
var moving = 0; // moving semaphore - increase this when you start a move, decrease it when you're finished.

function initProjects(projects) {
	var bg_projects = new Array();
	var other_projects = new Array();
	
	fade_timer = fade_timer / 1000;
	
	for (var i = 0, j = projects.length; i<j; ++i) {
		if (projects[i].background.length > 0) {
			bg_projects.push(projects[i]);
		} else {
			other_projects.push(projects[i]);
		}
	}
	
	bg_projects = shuffle(bg_projects);
	other_projects = shuffle(other_projects);
	
	var btm_project;
	
	if (bg_projects.length < max_top_projects + 1) {
		if (other_projects.length > 0) {
			// put first max_top_projects bg projects at the top, put first other_project at bottom
			for(var i = 0, j = bg_projects.length; i < max_top_projects && i < j; ++i) {
				top_projects.push(bg_projects[i]);
			}
			btm_project = other_projects[0];
		} else {
			// put first bg project at the bottom, rest at top
			btm_project = bg_projects[0];
			for(var i = 1, j = bg_projects.length; i < j; ++i) {
				top_projects.push(bg_projects[i]);
			}			
		}
	} else {
		// top max_top_projects bg projects for top
		for(var i = 0; i < max_top_projects; ++i) {
			top_projects.push(bg_projects[i]);
		}
		if (other_projects.length > 0) {
			// first other_project at bottom
			btm_project = other_projects[0];
		} else {
			// next bg_projects for bottom
			btm_project = bg_projects[max_top_projects];
		}
	}
	
	// set up the switching numbers on the right side
	for (var i = 0, j = top_projects.length; i < j; ++i) {
		$('banner-text').down('ul.tabs').insert({bottom:'<li><a href="#" onclick="return manualProjectChange('+i+');">0'+(i+1)+'</a><span class="shadow">&nbsp;</span></li>'});
	}

	// set up the first project - set the text and image with no effects
	$('banner-text').down('ul.tabs').down().addClassName('selected');
	shown.src = top_projects[cur_project].background;
	$('banner-text').down('.title').update(top_projects[cur_project].title);
	$('banner-text').down('.desc').update(
		top_projects[cur_project].description + ' (Location: ' + 
		top_projects[cur_project].location + ')');
		
	// start the project switcher
	if (auto_switch_timer > fade_timer) {
		if (top_projects.length > 0) {
			project_cycle = window.setInterval(changeTopProject, auto_switch_timer);	
		} else {
			hidden.remove();
		}
	}
	
	// might want to preload the project images here....
	
	// set up the bottom featured project
	var btm_thumbs = '';
	for (var i = 0, j = btm_project.other_images.length; i < j; ++i) {
		btm_thumbs += '<a href="'+btm_project.other_images[i]+'" rel="lightbox[featured]" title="'+btm_project.title+'">' + 
					  '<img src="'+btm_project.other_images[i]+'" alt="'+btm_project.title+'" class="featured-thumb" /></a>';
	}
	
	$('featured-project').down('h1').insert({after: '<a href="'+btm_project.main_image+'" rel="lightbox[featured]" title="'+btm_project.title+'">' + 
													'<img src="' + btm_project.main_image + '" alt="' + btm_project.title + '" class="featured-large" /></a>'});
	$('featured-project').down('.thumbs').update(btm_thumbs);
	$('featured-project').down('h2').update(btm_project.title);
	$('featured-project').down('h2').insert({after: '<p>' + btm_project.description + '</p>'});	
}

function changeTopProject() {
	// increment / switch
	cur_project = (cur_project + 1) % top_projects.length;
	var s = shown;
	shown = hidden;
	hidden = s;
	
	// buttons
	$('banner-text').down('ul.tabs .selected').removeClassName('selected');
	$('banner-text').down('ul.tabs').childElements()[cur_project].addClassName('selected');

	// image
	shown.src = top_projects[cur_project].background;
	hidden.fade({duration:fade_timer
		, beforeStart: function() { moving += 1; }
		, afterFinish: function() { moving -= 1; }
	});
	shown.appear({duration:fade_timer
		, beforeStart: function() { moving += 1; }
		, afterFinish: function() { moving -= 1; }
	});
	
	// title
	$('banner-text').down('.title').fade({duration:fade_timer / 2
		, beforeStart: function() { moving += 1; }
		, afterFinish: function() {
			moving -= 1;
			$('banner-text').down('.title').update(top_projects[cur_project].title);
			$('banner-text').down('.title').appear({duration:fade_timer / 2
				, beforeStart: function() { moving += 1; }
				, afterFinish: function() { moving -= 1; }
			});
		}
	});
	
	// description
	$('banner-text').down('.desc').fade({duration:fade_timer / 2
		, beforeStart: function() { moving += 1; }
		, afterFinish: function() {
			moving -= 1;
			$('banner-text').down('.desc').update(
				top_projects[cur_project].description + ' (Location: ' + 
				top_projects[cur_project].location + ')');
			$('banner-text').down('.desc').appear({duration:fade_timer / 2
				, beforeStart: function() { moving += 1; }
				, afterFinish: function() { moving -= 1; }
			});
		}
	});
}

function manualProjectChange(index) {
	// stop the cycle and switch to the given project, if we aren't in the middle of a switch
	if (moving == 0) {		
		// change projects
		window.clearTimeout(project_timeout);
		window.clearInterval(project_cycle);
		cur_project = index - 1; // this gets incremented
		changeTopProject();
		project_timeout = window.setTimeout('project_cycle = window.setInterval(changeTopProject, ' + auto_switch_timer + ');', auto_switch_timer * 2);
	}
	return false;
}

function shuffle(ar) {
	// shuffle an array
	for (var k = 0, l = ar.length; k < l; ++k){
		for (var i = 0, j = ar.length; i < j - 1; ++i) {
			if (Math.floor(Math.random() * 2) == 1) {
				a = ar[i];
				ar[i] = ar[i+1];
				ar[i+1] = a;			
			}
		}
	}
	return ar;
}

/**************************************************************************
* Shaub Project Listing
*
* Handles category and project entries in the project list page.
* Scott Wespi (scott@darkstardesign.com)
*
* Requires Prototype / Scriptaculous
**************************************************************************/
function toggleCategory(category) {
	// slide down / slide up
	if (!category.moving) {
		if (category.out) {
			category.down('.body').visualEffect('blind_up', 
				{duration:.5
				, beforeStart: function() { category.moving = true; }
				, afterFinish: function() { category.moving = false; }
				});
			category.out = false;
		} else {
			category.down('.body').visualEffect('blind_down', 
				{duration:.5
				, beforeStart: function() { category.moving = true; }
				, afterFinish: function() { category.moving = false; }
				});
			category.out = true;
		}
	}
}

function initializeList() {
	// set us up the bomb
	$$('.category').each(function(s) {
		s.out = false;
		s.moving = false;
		s.down('.header').onclick = function() {
			toggleCategory($(this).up('.category'));
		}
	});
}

/**************************************************************************
* Shaub Project Image Scroller
*
* Sets up the images for a project.
* Scott Wespi (scott@darkstardesign.com)
*
* Requires Prototype / Scriptaculous
**************************************************************************/
// switch images
function switchImage(i) {
	var big_height = $('big-img').offsetHeight;
	var big_width = $('big-img').offsetWidth;

	$('big-img').down().href = i.src;
	$('big-img').down(1).src = i.src;   
	if (i.width / i.height > big_width / big_height) {
		$('big-img').down(1).setStyle('height:' + big_height + 'px;width:auto;');
	} else {
		$('big-img').down(1).setStyle('width:' + big_width + 'px;height:auto;');
	}
}

// scroller
var Scroller = {
	_scrolling: -1 // used by setInterval
	, _current_top: 0
	, _top_el_offset: 0
	, _clientX: 0
	, _rows: 0
	, _li_height: 0
	, _target: $('scroller')
	, _arrows: false
	, _arrow_up: false
	, _arrow_down: false
	, _mouseheight: 75
	, _speed: 40
	, _visible_rows: 2
	, _limargin: 6
	, _columns: 1
	, _direction: 0
	, init: function(target, up, down, mouseheight, speed, limargin, columns) {
		/* new scroller:
			target - the ul element (prototyped) to scroll
			up - an up arrow for the scroll
			down - a down arrow for the scroll
			mouseheight - the height of the areas on the top / bottom of the ul that trigger movement
			speed - how fast to scroll - lower is faster
			limargin - the vertical margin on each li
			columns - number of columns the images are in
		*/
		Scroller._target = target ? target : Scroller._target;
		Scroller._mouseheight = mouseheight ? mouseheight : Scroller._mouseheight;
		Scroller._speed = speed ? speed : Scroller._speed;
		Scroller._limargin = limargin ? limargin : Scroller._limargin;
		Scroller._columns = columns ? columns : Scroller._columns;
		
		Scroller._arrows = (up && down);
		if (Scroller._arrows) {
			Scroller._arrow_up = up ? up : Scroller._up;
			Scroller._arrow_down = down ? down : Scroller._down;
		}
	}, start: function() {
		// get sizes, set up private vars, etc
		
		// the target
		Scroller._target.onmouseover = Scroller.start_mouseover_scroll;
		Scroller._target.onmousemove = Scroller.start_mouseover_scroll;
		Scroller._target.onmouseout = Scroller.stop_scroll;
		if (Scroller._arrows) {
			// the up arrow
			Scroller._arrow_up.onmouseover = Scroller.start_arrow_up_scroll;
			Scroller._arrow_up.onmousemove = Scroller.start_arrow_up_scroll;
			Scroller._arrow_up.onmouseout = Scroller.stop_scroll;
			
			// the down arrow
			Scroller._arrow_down.onmouseover = Scroller.start_arrow_down_scroll;
			Scroller._arrow_down.onmousemove = Scroller.start_arrow_down_scroll;
			Scroller._arrow_down.onmouseout = Scroller.stop_scroll;
		}
		Scroller._rows = Math.ceil(Scroller._target.down().childElements().length / Scroller._columns);
		Scroller._li_height = Scroller._target.down(1).offsetHeight + Scroller._limargin;
		Scroller._visible_rows = Math.floor(Scroller._target.offsetHeight / Scroller._li_height);
		
		Scroller._target.down().setStyle('height:' + (Scroller._rows * Scroller._li_height) + 'px;');	
	}, start_mouseover_scroll: function(e) {
		// called on mouse over
		Scroller._direction = 0;
		Scroller.start_scroll(e);
	}, start_arrow_up_scroll: function(e) {
		// called on up arrow over
		Scroller._direction = 2;
		Scroller.start_scroll(e);
	}, start_arrow_down_scroll: function(e) {
		// called on down arrow over
		Scroller._direction = 1;
		Scroller.start_scroll(e);
	}, start_scroll: function(e) {
		// set up the scroll, and start the interval
		Scroller._top_el_offset = 0;		
		if (e) { Scroller._clientY = Event.pointerY(e);	} 
			else { Scroller._clientY = Event.pointerY(event); }
		
		var obj = Scroller._target;
		
		do {
			Scroller._top_el_offset += obj.offsetTop;
		} while (obj = obj.offsetParent);

		if (Scroller._scrolling == -1) {
			Scroller._scrolling = window.setInterval(Scroller.scroll, Scroller._speed);
		}	
	}, scroll: function() {
		// called via setInterval
		var up = false; // direction the images are moving in
		if (Scroller._direction == 0) {
			var offTop = 0;
			var offTop = (Scroller._clientY - Scroller._top_el_offset + offTop);
			var bottom_bound = Scroller._target.offsetHeight - Scroller._mouseheight;
			
			if (offTop > bottom_bound) {
				up = true;
			} else if (offTop < Scroller._mouseheight) {
				up = false;
			} else {
				return;
			}
		} else {
			up = (Scroller._direction == 1);
		}
		if (up) {
			// images moving up, cursor at bottom
			if (Scroller._current_top >= (0 - ((Scroller._rows - Scroller._visible_rows) * Scroller._li_height))) {
				Scroller._current_top -= 5;
				Scroller._target.down().setStyle('top:' + Scroller._current_top + 'px;');
			}
		} else {
			// images moving down, cursor at top
			if (Scroller._current_top <= -5) {
				Scroller._current_top += 5;
				Scroller._target.down().setStyle('top:' + Scroller._current_top + 'px;');
			}
		}
	}, stop_scroll: function() {
		// called on mouse out
		if (Scroller._scrolling > -1) {
			window.clearInterval(Scroller._scrolling);
			Scroller._scrolling = -1;
		}
	}
};