var nav_tt = false;
var preview = false;
var bg = false;
var current_project = false;
window.addEvent('domready', function() {
	update_nav();
	
	// create the tooltip for the nav
	var el = new Element('div', { 'id': 'nav_tt' });
	$(document.body).adopt(el);
	nav_tt = new Tooltip(el, false, { position: 'tr', mouseover: true, delta_x: 8 });
	
	bg = new Element('div', { 
		'id': 'bg'
	}).adopt(
		new Element('img', { 'id':'bg_smoke', 'src': '/web/images/smoke.png', 'class': 'transifyme' })
	);
	$(document.body).adopt(bg);
	bg.onclick = function() {
		preview_hide(current_project);
	};
	
	// create preview container
	preview = new Element('div', { 'id': 'preview_container' });
	$(document.body).adopt(preview);
	
	transifyme();
});

window.addEvent('resize', update_nav);

var prev_boxes_per_row = 0;
function update_nav() {
	preview_position();
	
	var w = window.getSize();
	
	var nav = $('menudo');
	var width = 330;
	var box_w = 15;
	var box_margin = 10;
	
	var boxes_per_row = Math.floor(w.size.x / width);
	var boxes_per_block = boxes_per_row * 3;
	var total_projects = projects.length;
	var total_blocks = Math.ceil(total_projects / boxes_per_block);
	
	if( prev_boxes_per_row != boxes_per_row ) {
		nav.innerHTML = '';
		
		var cur_index = 0;
		for( var i = 0; i < total_blocks; i++) {
			
			var block = new Element('div', { 
				'class':'block', 
				'styles': {
					'width': ((box_w + box_margin) * boxes_per_row) + 'px'
				}
			});
			
			for( var j = 0; j < boxes_per_block; j++ ) {
				if( cur_index > total_projects - 1 ) break;
				var bg_color = '#' + colors[cur_index % colors.length];
				
				if( projects[cur_index].disable ) {
					bg_color = '#000000';	
				}
				var box = new Element('div', { 
					'id': 'nav_btn_'+cur_index,
					'class':'box',
					'events': {
						'click': function() {
							preview_show(parseInt(this.id.substr(8)));
						},
						'mouseover': nav_mouseover,
						'mouseout': nav_mouseout
					},
					'styles': {
						'background-color': bg_color
					}
				}).setHTML('&nbsp;');
				block.adopt(
					box
				);
				
				cur_index++;
			}
			nav.adopt(block);
		}
	}
	
	prev_boxes_per_row = boxes_per_row;
}

function nav_mouseover(event) {
	var id = event.target.id.substr(8);
	
	if( !projects[id].disable ) {
		event.target.setStyle('background-color', '#ffffff');
		$('project_container_'+id).setStyle('border-color', '#ffffff');
		nav_tt.element = event.target;
		$('nav_tt').innerHTML = projects[id].title;
		nav_tt.toggleTooltip(event);
	}
}

function nav_mouseout(event) {
	var id = event.target.id.substr(8);
	
	if( !projects[id].disable ) {
		$('project_container_'+id).setStyle('border-color', '#' + colors[id % colors.length]);
		event.target.setStyle('background-color', '#' + colors[id % colors.length]);
		nav_tt.element = event.target;
		nav_tt.toggleTooltip(event);
	}
}

function preview_position() {
	if( current_project != false ) {
		preview.setStyle('left', Math.round(window.getSize().size.x / 2 - default_w / 2)+'px');
		bg_show();
	}
}


var default_w = 960;
var default_h = 513;

function preview_show(id) {
	cur_thumb = 0;
	current_project = id;
	if( projects[current_project].disable ) return false;
	
	var p = $('project_container_'+id);
	preview.setStyle('border-color', '#'+colors[id % colors.length]);
	preview.setStyle('width', 280);
	preview.setStyle('height', 280);
	preview.setStyle('left', p.getPosition().x);
	preview.setStyle('top', p.getPosition().y);
	
	var fx = new Fx.Styles(preview, {duration: 300, wait:false, transition: Fx.Transitions.Sine.easeOut
	});

	preview.innerHTML = '';
	preview.show();
	
	var top = Math.round(window.getSize().size.y / 2 - default_h / 2) + window.getSize().scroll.y;
	if( top < 120 ) top = 120;
	var fn = function() {
		fx.start({
			'width': default_w - 40,
			'height': default_h - 40,
			'left': [Math.round(window.getSize().size.x / 2 - default_w / 2)],
			'top': [top]
		})
	}.delay(200);
	
	refresh_page({
		div: 'preview_container',
		url: '/ajax/portfolio/project_large',
		jdata: { id: parseInt(id), color: colors[id % colors.length] },
		onComplete: transifyme
	});
	
	bg_show();
}

function preview_hide(id)
{
	$('thumb_preview').hide();
	var p = $('project_container_'+id);
	var fx = new Fx.Styles(preview, {duration: 300, wait:false, transition: Fx.Transitions.Sine.easeOut, onComplete: function() { preview.hide(); } });

	fx.start({
		'width': 280,
		'height': 280,
		'left': [ p.getPosition().x ],
		'top': [ p.getPosition().y ]
	});
	
	bg_hide();
	
	current_project = false;
}

function bg_show() {
	var img = $('bg_smoke');
	img.setStyle('width', window.getSize().size.x);
	img.setStyle('height', window.getSize().scrollSize.y);
	bg.setStyle('top', '120px');
	bg.setStyle('width', window.getSize().size.x);
	bg.setStyle('height', window.getSize().scrollSize.y);
	bg.show();
	
}

function bg_hide() {
	bg.hide();
}

function thumb_popup(pid) {
	window.open('/project/' + pid + '/thumbnail/' + cur_thumb, "chadpugh_thumbpopup", "menubar=no,width=800,height=500,toolbar=no, scrollbars=yes");
}

var cur_thumb = 0;
function thumb_switch(id, src) {
	cur_thumb = id;
	$('thumb_preview_img').src = src;
}

function project_mouseover(id) {
	$(id).show();
}

function project_mouseout(id) {
	$(id).hide();
}