function report(text) {
	var report_space = $('#report_space');
	
	report_space.append(text + "<br />");
}

function move_one_notch(direction) {
	var one_unit = 100 * zoom / 100;
	var time = 200;
	
	var pos = wrapper.position();
	
	switch(direction) {
		case 'left':
			new_left = pos.left + one_unit;
			new_top = pos.top;
			break;
		case 'right':
			new_left = pos.left - one_unit;
			new_top = pos.top;
			break;
		case 'up':
			new_left = pos.left;
			new_top = pos.top - one_unit;
			break;
		case 'down':
			new_left = pos.left;
			new_top = pos.top + one_unit;
			break;
	}
	
	wrapper.animate({
		'top': new_top,
		'left': new_left
	}, time, easing, function() {
		
		}
	);
	
}

function go_to(pos) {
	if(pos.length < 3) {
		//report('not enough arguments');
		return;
	}
	
	var decimal = pos.zoom/100;
	var inverse = 1/decimal;
	var time = 400;
	
	var position = wrapper.position();
	var x = position.left;
	var y = position.top;
		
	var new_width = Math.round(original_wrapper_width * decimal);
	var new_height = Math.round(original_wrapper_height * decimal);
	var new_font_size = Math.round(original_wrapper_text * decimal);
	
	new_width += 'px';
	new_height += 'px';
	new_font_size += '%';
	
	var padding_arr = get_new_padding();
	var left_padding = parseInt(padding_arr[1]);
	var top_padding = parseInt(padding_arr[0]);

	update_current_zoom_step(pos.zoom);
	zoom = pos.zoom;
	check_overlays();
	
	var proposed_state = {
		'x': pos.x,
		'y': pos.y,
		'width': new_width,
		'height': new_height 
	}
	
	var confirmed_state = check_contain(proposed_state);
	
	wrapper.animate({
		'top': confirmed_state.y,
		'left': confirmed_state.x,
		'width': confirmed_state.width,
		'height': confirmed_state.height,
		'padding-left': left_padding,
		'padding-right': left_padding,
		'padding-top': top_padding,
		'padding-bottom': top_padding,
		'font-size': new_font_size

	}, time, easing, function() {
		report('new zoom is ' + zoom);
		set_contain();
		}
	);
}

function create_position(x, y, z) {
	var position = {
		'x': x,
		'y': y,
		'zoom': z
	};
	
	return position;
}

function create_position_for_element(el) {
	var jq_pos = el.position();
	var width = el.outerWidth();
	
	var top_buffer = 100;
	var max_width = parseInt($('#window').innerWidth()) - 200;
	
	var max_zoom_correction = (max_width/width);
	var max_zoom_percent = max_zoom_correction * 100;
	
	var new_x = (jq_pos.left) * max_zoom_correction;
	var new_y = -jq_pos.top + top_buffer;
	
	var ret_pos = {
		'x': new_x,
		'y': new_y,
		'zoom': max_zoom_percent
	};
	
	return ret_pos;
}

function fit_to_screen(el) {

	var fit_to = $('#window');
	var top_buffer = 100;
	var bottom_buffer = 20;
	var side_buffer = 50;
	
	var max_width = fit_to.innerWidth() - (side_buffer * 2);
	var max_height = fit_to.innerHeight() - top_buffer - bottom_buffer;
	var this_width = el.outerWidth();
	var this_height = el.outerHeight();
	
	var height_ratio = max_height/this_height;
	var width_ratio = max_width/this_width;
	
	var el_pos = el.position();	
	
	//report('el id is ' + el.attr('id') + ' max width is ' + max_width + ' and max height is ' + max_height + '. current position is top: ' + current_pos.top + ' left: ' + current_pos.left + ' ratios are height: ' + height_ratio + ' width: ' + width_ratio);
	
	if(width_ratio > height_ratio) {
		//height limited
		var fit_zoom = height_ratio * (zoom/100);
		var x_correction = (fit_to.innerWidth() - (this_width * (fit_zoom/(zoom/100)))) / 2;
	}
	else {
		//width limited
		var fit_zoom = width_ratio * (zoom/100);
		var x_correction = (fit_to.innerWidth() - (this_width * width_ratio)) / 2;
	}
	
	var y_correction = top_buffer - bottom_buffer;
	
	var padding_arr = get_new_padding();
	var left_padding = parseInt(padding_arr[1]);
	var top_padding = parseInt(padding_arr[0]);

	var new_x = -(el_pos.left * (fit_zoom/(zoom/100))) + x_correction - left_padding;
	var new_y = -(el_pos.top * (fit_zoom/(zoom/100))) + y_correction - top_padding;
	
	//report(' new zoom will be ' + fit_zoom + ' and going to x: ' + new_x + ' y: ' + new_y);
	
	var new_pos = {
		'x': new_x,
		'y': new_y,
		'zoom': fit_zoom * 100
	}
	
	go_to(new_pos);
	hide_page_overlays();
}

function next_zoom(delta) {
	report(delta);
	if(Math.abs(delta) < .5) {
		fractional_delta += delta;
	}
	
	if(Math.abs(fractional_delta) > .5) {
		delta = Math.round(fractional_delta);
		fractional_delta = 0;
	}
	
	if(Math.abs(delta) >= 1) {
		var min_zoom = 0;
		var max_zoom = zoom_steps.length - 1;
		var new_zoom_step = current_zoom_step + delta;
		
		if(new_zoom_step >= min_zoom && new_zoom_step <= max_zoom) {	
			var temp_zoom_step = current_zoom_step + delta;
			var new_zoom = zoom_steps[temp_zoom_step];
			zoom_to(new_zoom);
		}
	}
}

function update_current_zoom_step(percent) {
	var check = 0;
	var index = 0;
	var max_index = zoom_steps.length - 1;
	
	if(zoom_steps[index] != percent) {
		while(check < percent && index <= max_index) {
			index++;
			check = zoom_steps[index];
		}
	}
	
	current_zoom_step = index;
}

function zoom_to(percent) {
	var decimal = percent/100;
	var time = 400;
	var win = $('#window');
	
	var position = wrapper.position();
	var x = position.left;
	var y = position.top;
		
	var old_width = parseInt(wrapper.width());
	var old_height = parseInt(wrapper.height());
	
	//find out how far down and left we were on the old one so we can remain in the same place essentially
	var down_pct = Math.abs(y/$(wrapper).innerHeight());
	var left_pct = Math.abs(x/$(wrapper).innerWidth());
	
	var new_width = Math.round(original_wrapper_width * decimal);
	var new_height = Math.round(original_wrapper_height * decimal);
	var new_font_size = Math.round(original_wrapper_text * decimal);

	var padding_arr = get_new_padding();
	var left_padding = parseInt(padding_arr[1]);
	var top_padding = parseInt(padding_arr[0]);

	var new_x = Math.round( (x - ((new_width - old_width)/(1/left_pct))) );
	var new_y = Math.round( (y - ((new_height - old_height)/(1/down_pct))) );
			
	update_current_zoom_step(percent);
	zoom = percent;
	check_overlays();

	var proposed_state = {
		'x': new_x,
		'y': new_y,
		'width': new_width,
		'height': new_height 
	}
	
	var confirmed_state = check_contain(proposed_state);

	new_font_size += '%';

	wrapper.animate({
		'top': confirmed_state.y,
		'left': confirmed_state.x,
		'width': confirmed_state.width,
		'height': confirmed_state.height,
		'padding-left': left_padding,
		'padding-right': left_padding,
		'padding-top': top_padding,
		'padding-bottom': top_padding,
		'font-size': new_font_size

	}, time, easing, function() {
		report('new zoom is ' + zoom);
		set_contain();
		}
	);	
}

function size_video_elements(video_width, video_height) {
	var video_wrapper = $('#video_wrapper');
	var video_space = $('#video_space'); 
	var time = 400;
	
	video_space.css({
		'height': video_height + 'px',
		'width': video_width + 'px'
	});
	
	var wrapper_height = video_height + 34;
	var wrapper_padding = 39;
	
	var window_height = parseInt($('#window').height());
	
	var wrapper_top_margin = ((window_height - (wrapper_height + wrapper_padding))/2)-20;
	
	if(wrapper_top_margin < 10) {
		wrapper_top_margin = 10;
	}
	
	wrapper_top_margin += 'px';
	video_width += 'px';
	wrapper_height += 'px';
	
	report(wrapper_top_margin);
	video_wrapper.animate({
		'width': video_width,
		'height': wrapper_height,
		'top': wrapper_top_margin
	}, time, easing, function() {
		}
	);
	
	
}

function video_popup(id, title, width, height) {

	var popup = $('#pop_over');
	var video_space = $('#video_space'); 
	var title_space = $('#film_title');
	var frame = $('<iframe src="http://player.vimeo.com/video/' + id + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="' + width + '" height="' + height + '" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
	
	video_space.empty();
	title_space.empty();
	
	size_video_elements(width, height);
	
	title_space.append(title);
	video_space.append(frame);
	
	wrapper.draggable('disable');
	popup.show();
}

function close_popup() {
	$('#pop_over').hide();
	$('#video_space').empty();
	wrapper.draggable('enable');
}

function next_video() {
	var video_links = $('a.portfolio_link');
	var current_video = $('a.portfolio_link.current');
		
	for(var index = 0; index < video_links.length; index++) {
		var this_link = video_links[index];
		if($(this_link).hasClass('current')) {
			var current_index = index;
		}
	}
	
	if(current_index < video_links.length - 1) {
		var new_index = parseInt(current_index) + 1;
	}
	else {
		var new_index = 0;
	}
		
	var new_video = video_links[new_index];
	
	vimeo_id = $(new_video).attr('rel');
	vd_title = process_video_title($(new_video).attr('title'));;
	vd_width = get_width_from_link($(new_video));
	vd_height = get_height_from_link($(new_video));
		
	mark_current_video($(new_video));
	
	video_popup(vimeo_id, vd_title, vd_width, vd_height);	
}

function previous_video() {
	var video_links = $('a.portfolio_link');
	var current_video = $('a.portfolio_link.current');
		
	for(var index = 0; index < video_links.length; index++) {
		var this_link = video_links[index];
		if($(this_link).hasClass('current')) {
			var current_index = index;
		}
	}
	
	if(current_index > 0) {
		var new_index = parseInt(current_index) - 1;
	}
	else {
		var new_index = video_links.length - 1;
	}
		
	var new_video = video_links[new_index];
	
	vimeo_id = $(new_video).attr('rel');
	vd_title = process_video_title($(new_video).attr('title'));;
	vd_width = get_width_from_link($(new_video));
	vd_height = get_height_from_link($(new_video));
		
	mark_current_video($(new_video));
	
	video_popup(vimeo_id, vd_title, vd_width, vd_height);	
}

function process_video_title(raw_title) {
	if(raw_title.indexOf(', ') !== -1) {
		raw_title = raw_title.replace(', ', ', <span class="alt">&quot;');
		raw_title += '&quot;</span>';
	}
	
	return raw_title;
}

function mark_current_video(el) {
	$('a.portfolio_link').removeClass('current');
	
	el.addClass('current');
}

function get_class_array(el) {
	if($(el).attr('class')) {
		var class_list = $(el).attr('class').split(/\s+/);
	
		return class_list;
	}
	
	return false;
}

function isNumber(n) {
  	return !isNaN(parseFloat(n)) && isFinite(n);
}

function get_width_from_link(el) {
	var default_w = 800;
	var class_list = get_class_array(el);
	var found = false;
	
	for(index = 0; index < class_list.length; index++) {
		class_name = class_list[index];
		//report('class_name is ' + class_name);
		if(class_name.indexOf('width_') === 0) {
			//report('class_name is ' + class_name);

			var pieces = class_name.split('_');
		   	var set_width = parseInt(pieces[1]); 

			if(isNumber(set_width)) {
				found = true;
				//report('set_width is ' + set_width);
				return set_width;
			}
		}
	}
	
	if(!found) {
		var set_width = default_w;
	}
	
	return set_width;
}

function get_height_from_link(el) {
	var default_h = 600;
	var class_list = get_class_array(el);
	var found = false;
	
	for(index = 0; index < class_list.length; index++) {
		class_name = class_list[index];
		if(class_name.indexOf('height_') === 0) {
		   	var pieces = class_name.split('_');
		   	var set_height = parseInt(pieces[1]); 

			if(isNumber(set_height)) {
				found = true;
				return set_height;
			}
		}
	}
	
	if(!found) {
		var set_height = default_h;
	}
	
	return set_height;
}

function get_new_padding() {
	var screen_wrap = $('#window');
	var screen_width = screen_wrap.width();
	var screen_height = screen_wrap.height();
		
	//need to set padding so the wrapper will always be draggable
	var x_padding = screen_width - always_visible_px;
	var y_padding = screen_height - always_visible_px;
	
	var ret_padding = new Array(y_padding, x_padding);
	
	return ret_padding;
}

function set_new_padding() {
	var current_pos = wrapper.position();
	var new_padding = get_new_padding();
	var current_padding = new Array(
			parseInt(wrapper.css('padding-top')), 
			parseInt(wrapper.css('padding-left'))
			);
	
	report('current padding is ' + current_padding[1] + ', ' + current_padding[0]);
	report('new padding is ' + new_padding[1] + ', ' + new_padding[0]);
	
	var x_change = current_padding[1] - new_padding[1];
	var y_change = current_padding[0] - new_padding[0];
	
	var new_x = current_pos.left + x_change;
	var new_y = current_pos.top + y_change;
	
	//should be able to set this without moving, so no animation is needed
	wrapper.css({
		'padding-left': new_padding[1],
		'padding-right': new_padding[1],
		'padding-top': new_padding[0],
		'padding-bottom': new_padding[0],
		'top': new_y,
		'left': new_x
	});
	
	set_contain();
}

function initial_layout() {
	var padding_arr = get_new_padding();
	var x_padding = padding_arr[1];
	var y_padding = padding_arr[0];

	var initial_pos = {
		'x': -(x_padding - 10),
		'y': -(y_padding - 90),
		'zoom': 100
	};
	
	go_to(initial_pos);	
}

function show_page_overlays() {
	$('div.page_overlay').show();
	//report('showing overlays');
}

function hide_page_overlays() {
	$('div.page_overlay').hide();
	//report('hiding overlays');
}

function check_overlays() {
	if(zoom > initial_zoom) {
		hide_page_overlays();
	}
	else if(zoom <= initial_zoom) {
		show_page_overlays();
	}
}

/*
check the proposed wrapper attributes to see if it is outside 
where we want to allow it to move. If it is, return a corrected state 
so it can be animated normally, if everything is good this will 
just match the proposed state

ps = proposed state
cs = corrected state

state_example = {
	x:
	y:
	width:
	height:
}

*/
function check_contain(ps) {
	var cs = ps;
	
	var padding_arr = get_new_padding();
	var x_padding = padding_arr[1];
	var y_padding = padding_arr[0];

	//set the upper left (ul) and bottom right (br) coordinates that define the rectangle to contain the wrapper in
	//basically setting up a box it can't be dragged out of
	//
	//at first look you could use innerHeight or outerHeight to get the height with padding
	//NOT TRUE, we just calculated that padding so it's not currently correct
	var ul_x = -(ps.width + x_padding - always_visible_px);
	var ul_y = -(ps.height + y_padding - always_visible_px);
	var br_x = 0;
	var br_y = 0;
	var corrected = false;

	//check current position and make adjustments as needed	
	if(ps.x < ul_x) {
		cs.x = ul_x;
		corrected = true;
	}
	if(ps.x > br_x) {
		cs.x = br_x;
		corrected = true;
	}
	if(ps.y < ul_y) {
		cs.y = ul_y;
		corrected = true;
	}
	if(ps.y > br_y) {
		cs.y = br_y;
		corrected = true;
	}

	if(corrected)
		report('corrected coordinates to fit within the wrapper containment');
		
	return cs;
}

function set_contain() {
	var screen_wrap = $('#window');
	var screen_width = screen_wrap.innerWidth();
	var screen_height = screen_wrap.innerHeight();
	var wrapper_width = wrapper.width();
	var wrapper_height = wrapper.height();

	//need to get the correct padding so the wrapper will always be draggable
	var padding_arr = get_new_padding();
	var x_padding = padding_arr[1];
	var y_padding = padding_arr[0];
	
	//set the upper left (ul) and bottom right (br) coordinates that define the rectangle to contain the wrapper in
	//basically setting up a box it can't be dragged out of
	//
	//at first look you could use innerHeight or outerHeight to get the height with padding
	//NOT TRUE, we just calculated that padding so it's not currently correct
	var ul_x = -(wrapper_width + x_padding - always_visible_px);
	var ul_y = -(wrapper_height + y_padding - always_visible_px);
	var br_x = 0;
	var br_y = 0;
	
	report('x_y_array is ' + ul_x + ', ' + ul_y + ', ' + br_x + ', ' + br_y);
	var x_y_array = new Array(ul_x, ul_y, br_x, br_y);
	
	wrapper.draggable('option', 'containment', x_y_array );	
	
	if(initial == true) {
		wrapper.css('padding', y_padding + 'px ' + x_padding + 'px');
		initial_layout();
		initial = false;
	}
}

function set_always_visible() {
	var w_h = parseInt($('#window').innerHeight());
	var w_w = parseInt($('#window').innerWidth());
	
	if(w_h > w_w) {
		always_visible_px = Math.round(w_w*.66);
	}
	else {
		always_visible_px = Math.round(w_h*.66);
	}
	report(always_visible_px + ' always visible');
}

/*initial settings*/
var original_wrapper_text = 100;
var initial_zoom = 100;
var zoom = 100;
var current_zoom_step = 2;
var fractional_delta = 0;
var always_visible_px = 400;
var initial = true;

var zoom_steps = new Array(60,80,100,150,200,300,400,600,800);

/*elements so they aren't looked up each time*/
var wrapper;
var original_wrapper_width;
var original_wrapper_height;

/*used multiple times, for easy changing*/
var easing = '';

$(document).ready(function() {
	wrapper = $('#wrapper');
	original_wrapper_width = wrapper.innerWidth();
	original_wrapper_height = wrapper.innerHeight();
	
	set_new_padding();
	set_always_visible();
	
	wrapper.draggable();
	set_contain();
	show_page_overlays();

	/*wrapper.mousewheel(function(e,delta) {
		e.preventDefault();							  
		next_zoom(delta);							  
	});*/
	
	wrapper.mousedown(function(e) {						  									   	
		$(this).addClass('ui-draggable-clickedon');
	});
	wrapper.mouseup(function(e) {
		$(this).removeClass('ui-draggable-clickedon');						   
	});
	
	$('#bar_nav_list a, #bar_contact_list a').click(function(e) {
		e.preventDefault();									
	});
	$('#work_page_nav, #work_page div.page_overlay').mouseup(function(e) {
		e.preventDefault();
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			fit_to_screen($('#work_page'));
		}
	});
	$('#about_page_nav, #about_page div.page_overlay').mouseup(function(e) {
		e.preventDefault();							  										
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			fit_to_screen($('#about_page'));
		}
	});
	$('#contact_page_nav, #address_li a, #contact_page div.page_overlay').mouseup(function(e) {
		e.preventDefault();							  										 
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			fit_to_screen($('#contact_page'));
		}
	});
	$('#logo a').click(function(e) {
		e.preventDefault();							  									   	
		initial_layout();
	});
	$('#client_login_page_nav, #client_login_page div.page_overlay').mouseup(function(e) {
		e.preventDefault();							  										
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			fit_to_screen($('#client_login_page'));
		}
	});
	$('#blog_page_nav, #blog_page div.page_overlay').mouseup(function(e) {
		e.preventDefault();							  										 
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			fit_to_screen($('#blog_page'));
		}
	});
	
	$('#zoom_toggle_in').click(function(e) {
		e.preventDefault();							  										
		next_zoom(1);									
	});
	$('#zoom_toggle_out').click(function(e) {
		e.preventDefault();							  										
		next_zoom(-1);									
	});
	$('#spinner_left').click(function(e) {
		e.preventDefault();							  									
		move_one_notch('left');									
	});
	$('#spinner_right').click(function(e) {
		e.preventDefault();							  									   
		move_one_notch('right');									
	});
	$('#spinner_up').click(function(e) {
		e.preventDefault();							  									
		move_one_notch('up');									
	});
	$('#spinner_down').click(function(e) {
		e.preventDefault();							  									  
		move_one_notch('down');									
	});

	/*popup controls for movies from work section*/
	$('a.portfolio_link').click(function(e) {
		e.preventDefault();
	});
	$('a.portfolio_link').mouseup(function(e) {
		e.preventDefault();
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			var vimeo_id = $(this).attr('rel');
			var vd_title = process_video_title($(this).attr('title'));
			var vd_width = get_width_from_link($(this));
			var vd_height = get_height_from_link($(this));
			
			mark_current_video($(this));
			
			//report('vd_width is ' + vd_width + ' and vd_height is ' + vd_height);
	
			video_popup(vimeo_id, vd_title, vd_width, vd_height);
		}
	});
	
	$('a.close_pop_over, #pop_over_backing').click(function(e) {
		e.preventDefault();
		close_popup();										 
	});
	$('a.next_video').click(function(e) {
		e.preventDefault();
		next_video();										 
	});
	$('a.previous_video').click(function(e) {
		e.preventDefault();
		previous_video();										 
	});
	
	/*
	makes clicking anywhere in the blog section open the blog
	*/
	$('#blog_page .blog_image').mouseup(function(e) {
		if(!$(wrapper).hasClass('ui-draggable-dragging')) {
			e.preventDefault();						   
			window.open('http://ocdcblog.tumblr.com', 'blog');
		}
	});
	
	$('.map_spot').mouseover(function() {
		$(this).addClass('showing');								  
	});
	$('.map_spot').mouseout(function() {
		$(this).removeClass('showing');							  
	});
	
	//form elements
	$('#cl_login').focus(function() {
		if($(this).attr('value') == 'login') {
			$(this).attr('value','');
		}
	});
	$('#cl_password').focus(function() {
		if($(this).attr('value') == 'password') {
			$(this).attr('value','');
		}
	});
	$('#cl_job_id').focus(function() {
		if($(this).attr('value') == 'job id') {
			$(this).attr('value','');
		}
	});
	$('#cl_name').focus(function() {
		if($(this).attr('value') == 'your name') {
			$(this).attr('value','');
		}
	});
	
	$(window).resize(function() {
		set_new_padding();
		set_always_visible();
	});
});