function registerHover(){
	
	$('.glow_popup img').unbind();
	
	// image hover effect
	var highlighted = false;
	var timeout;
	
	$('.glow_popup img').bind('mouseover',function(event){
		//event.stopPropagation();
		
		var container = $(this).parent().parent('.glow_popup');

		clearTimeout(timeout);
		
		showPopup(container);
		
		if( !highlighted ){
			highlighted = true;
			container.addClass('highlighted');
			$('.glow_popup:not(".highlighted")').animate({opacity:.4},150);
		} else {
			$('.highlighted').removeClass('highlighted').animate({opacity:.4}, 150);
			container.animate({opacity:1},150).addClass('highlighted');
		}
		
	});
	
	$('.glow_popup img').bind('mouseout', function(event){
		//event.stopPropagation();
		var container = $(this).parent().parent('.glow_popup');
		container.css({zIndex:1}).parent().css({zIndex:1});
		
		hidePopup( container );
		
		timeout = setTimeout(function(){
			highlighted = false;
			$('.glow_popup').animate({opacity:1},150).removeClass('highlighted');
		},250);
	});
};

function setInterface(){
	
	// set up interface if needed
	$('#gallery_content').css({position:"relative", height:"305px", overflow:"hidden"});
	var scrollWidth = $('#gallery_scroll .pane').length * 612;
	$('#gallery_scroll').css({position:"absolute", left:"5px", top:"0", width:scrollWidth + "px"});
	$('.pane').css({position:"relative", float:"left", width:"612px"});
	$('.pane:first').addClass('current');
	
	$('#gallery_nav').remove();
	if( $('.pane').length > 1 ){
		var nav_HTML = '';
		var count_panes = $('.pane').length;
		var count_thumbs = $('.glow_popup').length;
		var nav_width = (count_panes * 40) + 70;
		nav_HTML += '<div id="gallery_nav" style="width:' + nav_width + 'px;"><a id="nav_prev" href="#">Previous</a>';
		for( var j=1; j <= count_panes; j++ ){
			
			// last pane mask
			var nav_mask = '';
			if( j == count_panes && (count_thumbs % 18) != 0 ){
				var lastpane = count_thumbs % 18;
				var fullrows = Math.floor(lastpane/6);
				var v_offset = fullrows * 5;
				var h_offset = 0 - ((6 - (lastpane % 6)) * 5);
				nav_mask = '<span class="nav_mask" style="left:' + h_offset + 'px; top:' + v_offset + 'px;"><!-- // --></span>';
			}
			
			nav_HTML += '<a' + (j == 1 ? ' class="current"' : '') + ' href="#pane_' + j + '">' + j + nav_mask + '</a>';
		}
		nav_HTML += '<a id="nav_next" href="#">Next</a></div>';
		// now inject it...
		$('#gallery_content').after(nav_HTML);
		
		// gallery nav interaction
		$('#gallery_nav a').click(function(){
			if( $(this).attr('id') == 'nav_next' ){
				var target = $('.current').next('.pane');
			} else if( $(this).attr('id') == 'nav_prev'){
				var target = $('.current').prev('.pane');
			} else {
				var target = $( $(this).attr('href') );
			}
			
			if( target.hasClass('pane') ){
				scrollContent(target);
			}
			return false;
		});
	}

	registerHover();
	
	return true;
};

function scrollContent(div){
	// scroll content
	var newPosition = div.position();
	$('#gallery_scroll').animate({left:(5 - newPosition.left) + "px"}, 250);
	$('.current').removeClass('current');
	div.addClass('current');
	
	// update nav
	var index = $('.pane').index(div);
	$('#gallery_nav a').removeClass('current');
	var navEl = $('#gallery_nav a').get(index + 1);
	$(navEl).addClass('current');
};

function showPopup(e){
	
	$('.purple_popup').hide();

	var popup = e.children('.purple_popup');
	
	popup.css({display:"block", opacity:0, zIndex:200}).parent().css({zIndex:100});
	
	var overRight = (e.parent().width() - 23) - (popup.width() + e.position().left);
	var offsetLeft = overRight < 0 ? e.position().left + overRight : e.position().left + 3;
	
	var overBottom = (e.parent().height()) - (popup.height() + e.height() + e.position().top + 5);
	var offsetTop = overBottom < 0 ? e.position().top - popup.height() - 12 : e.position().top + e.height() + 5;
	
	popup.css({top: offsetTop + "px", left: offsetLeft + "px"}).animate({opacity:1},150);
};

function hidePopup(e){
	var popup = e.children('.purple_popup');
	popup.hide().css({zIndex:1}).parent().css({zIndex:1});
};

function updateGallery(){
	if( $('#ajax_loading').length < 1 ){
		$('#gallery_content').append('<img id="ajax_loading" src="/img/icons/loading_big.gif" alt="Loading..." />');
		$('#ajax_loading').css({position:"absolute", left:"50%", top:"50%", marginLeft:"-16px", marginTop:"-16px", display:"none"});
	}
	
	var post = '';
	$('#gallery_filter input:checked').each(function(){
		post += $(this).attr('name') + "=on&";
	});
	
	$('#ajax_loading').ajaxStart(function(){
		$(this).fadeIn();
	});
	$('#ajax_loading').ajaxStop(function(){
		$(this).fadeOut();
	});
	
	
	$.ajax({
		type: "POST",
		url: "/ajax/gallery_filter.php",
		data: post,
		success: function(data){
			$('.pane').animate({opacity:0}, 250, function(){
				$(this).remove();
				
				var imgLoaded = 0;
				$('#gallery_scroll').css({opacity:0}).html(data);
				setInterface();
				var images = $('#gallery_scroll').find('img');
				if( images.length > 0 ){
					images.each(function(){
						var src = $(this).attr('src');
						var img = new Image;
						
						img.onload = function(){
							imgLoaded++;
							if( imgLoaded == images.length ){
								$('#gallery_scroll').animate({opacity:1}, 250);									
							}
						};
						img.src = src;
					});
				} else {
					$('#gallery_scroll').animate({opacity:1}, 250);
				}
			});
		},
		error: function(data){
			alert("Error receiving ajax request");
		}
	});
}

$(function(){
	
	// set the interface
	setInterface();
	
	// nice checkboxes
	$('#gallery_filter input[type=checkbox]').each(function(){
		var checked = $(this).attr('checked') ? true : false;
		$(this).css({margin:0}).wrap('<div class="checkbox_replace"></div>').css({opacity:0, zIndex:10, position:"absolute"}).after('<span></span>');
		if( checked ) $(this).next('span').addClass('checked');
		$(this).click(function(){
			if( $(this).attr('checked') == true ){
				$(this).siblings('span').addClass('checked');
			} else {
				$(this).siblings('span').removeClass('checked');
			}
		});
	});
	
	// let the filtering begin
	$('#submit_filter').click(function(){
		updateGallery();
		return false;
	});

});