// Wait for the DOM
$( document ).ready( function() {
		//IE 6 SNIFFER AND COMMANDS					  
		if (BrowserDetect.version  <= 6 && BrowserDetect.browser == "Explorer") {
			//alert("browser is ie " + BrowserDetect.version);
			//alert("browser is " + BrowserDetect.browser );
			
        	$("#people_css").attr("href", "../css/people_ie6.css");
			$("#people_js").attr("src", "people_popups_ie6.js");
			$(".ie6_div").append("<br /><br />");
			$(".ie7_div").append("<br /><br />");
		} 
		else {
			if(BrowserDetect.version == 8 && BrowserDetect.browser == "Explorer"){
			//alert("browser is ie " + BrowserDetect.version);
        	$("#people_css").attr("href", "../css/people_ie8.css");
			}
				if(BrowserDetect.version == 7 && BrowserDetect.browser == "Explorer"){
			//alert("browser is ie " + BrowserDetect.version);
        	$("#people_css").attr("href", "../css/people_ie7.css");
			$(".ie6_div").append("<br /><br />");
			$(".ie7_div").append("<br /><br />");
			}
		
			
		}
							  
							  
	//Png Fix						  
	$('li').pngFix();
	var rollover_on = '_Over';
	var rollover_off = '_Off';
	$(".replace").hover(
	function(){
		if($(this).css('filter') == 'none' || $(this).css('filter') == '') $(this).attr('src',$(this).attr('src').replace(rollover_off,rollover_on));
						else $(this).css('filter',$(this).css('filter').replace(rollover_off,rollover_on));
				 	},
				 	function(){
						if($(this).css('filter') == 'none' || $(this).css('filter') == '') $(this).attr('src',$(this).attr('src').replace(rollover_on,rollover_off));
						else $(this).css('filter',$(this).css('filter').replace(rollover_on,rollover_off));
				 	}
				);
				
	// Set up the popups
	setupPopups();
	// Hide all the popups
	fadePopups( 0 );
	
	// When user clicks on a persons photo
	$( "#people_container li .image" ).click( function( event ) {
		
		//this makes the clicked images stay in the over state	
		/*
		arf = $('img').attr("src");
		something = arf.split(".png");
		$('img').attr("src",something[0] + "_Over.png");
		*/								   
		// dont follow the link
		event.preventDefault();
		// Hide all popups
		fadePopups( 0 );
		
		// Grab the popup to show
		var oPopup = $( this ).parent().find( '.popup' );
		// Position the popup in the right place
		positionPopup( oPopup, event.pageX, event.pageY );
		// Fade in the popup
		showPopup( oPopup );
		
	} );
	
	


} );


//*****FUNCTIONS********///

// Add a new class and a close button to each popup
function setupPopups() {
	$( "#people_container li .popup" ).addClass( 'popup_absolute' ).prepend( '<a href="#" class="popup_close">x</a>' );
	$( "#people_container li .popup_close" ).click( function( event ) {
		event.preventDefault();
		fadePopups( 1000 );
	} );
}

// Hide all popups
function fadePopups( a_iSpeed ) {
	$( "#people_container li .popup" ).fadeOut( a_iSpeed );
}

// Fade a popup into view
function showPopup( a_oElement ) {
	$( a_oElement ).fadeIn( 1000 );
}

// Position a popup as close to the mouse position as possible
function positionPopup( a_oElement, a_iMouseX, a_iMouseY ) {
	var oContainer = $( '#people_container' );
	var oOffset = oContainer.offset();
	
	// Get the relative position of the mouse to the container
	var iOffsetX = a_iMouseX - oOffset.left;
	var iOffsetY = a_iMouseY - oOffset.top;
	
	// Get the furthest position that a popup can be placed
	var iMaxOffsetX = oContainer.width() - a_oElement.width();
	var iMaxOffsetY = oContainer.height() - a_oElement.height();
	
	// Calculate the popups position so that it does not stretch outside the conatiner
	iOffsetX = Math.max( 0, Math.min( iMaxOffsetX, iOffsetX ) );
	iOffsetY = Math.max( 0, Math.min( iMaxOffsetY, iOffsetY ) );
	
	// Position the popup
	var cssObject = {
		'left' : iOffsetX,
		'top' : iOffsetY
	}
	$( a_oElement ).css( cssObject );
}