// Boat Gallery Stuff

var the_div = 'gui'; //id of main div

/////////////////////////////////////////////////////////////////////////////////////
// Main animation that covers and pops up the portfolio interface
/////////////////////////////////////////////////////////////////////////////////////
cover_anim = function(e)  {			

	// set to id of link that was clicked
	the_id = this.id;

	//Get the x and y scroll amounts
	y_scroll_amount = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
	x_scroll_amount = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;	
	
	//Get the size of the window	
	screen_width = YAHOO.util.Dom.getViewportWidth();
	screen_height = YAHOO.util.Dom.getViewportHeight();
	
	//Get the coordinates of the link - the box will grow from this point
	el_x = YAHOO.util.Dom.getX(this.id);
	el_y = YAHOO.util.Dom.getY(this.id);
	
	//Place the box at its new location - the location of the link
	temp = YAHOO.util.Dom.setX('cover', el_x);
	temp = YAHOO.util.Dom.setY('cover', el_y);
	
	cover_attr = {
		height: { to: screen_height },
		width: { to: screen_width },
		opacity: { from: 0, to: .75 },
		left: { to: x_scroll_amount },
		top: { to:  y_scroll_amount }
	}	
		
	var anim = new YAHOO.util.Anim('cover', cover_attr, .2, YAHOO.util.Easing.easeIn);
	anim.animate();
	
	//When the animation is complete, use AJAX to grab the portfolio GUI
	anim.onComplete.subscribe(getContent);

	YAHOO.util.Event.preventDefault(e);	
}

/////////////////////////////////////////////////////////////////////////////////////
// Perform the AJAX request and position the GUI in the middle of the screen
/////////////////////////////////////////////////////////////////////////////////////
function getContent(e) {	
	document.getElementById(the_div).innerHTML = '';

	//Set the display property of the display area to "block"
	YAHOO.util.Dom.setStyle(the_div, 'display', 'block');
	
	var callBack = {			
		success: function(o) {
		document.getElementById(the_div).innerHTML = o.responseText;
		},
		failure: function(o)	{
			alert('Failed.');	
		}
	}

	the_page = '../dsp_cust_pop.cfm?no_ses=true&id=' + the_id;

	var connectionObect = YAHOO.util.Connect.asyncRequest('GET', the_page, callBack);
	
	box_width = YAHOO.util.Dom.getStyle(the_div, 'width');
	box_width = box_width.replace(/px/, '');
	
	box_height = YAHOO.util.Dom.getStyle(the_div, 'height');
	box_height = box_height.replace(/px/, '');
	
	screen_width = YAHOO.util.Dom.getViewportWidth();
	screen_height = YAHOO.util.Dom.getViewportHeight();

	//Get the x and y scroll amounts
	y_scroll_amount = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
	x_scroll_amount = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;	

	new_left = (screen_width/2) - (box_width/2) + x_scroll_amount;
	new_top = (screen_height/2) - (box_height/2) + y_scroll_amount;

	// Position the display area into the middle of the screen
	YAHOO.util.Dom.setX(the_div, new_left );	
	YAHOO.util.Dom.setY(the_div, new_top );

	YAHOO.util.Event.preventDefault(e);

	
}



/////////////////////////////////////////////////////////////////////////////////////
// collapse the box
/////////////////////////////////////////////////////////////////////////////////////
perform_close = function() {
	
	YAHOO.util.Dom.setStyle(the_div, 'display', 'none');
	
	//Get the x and y scroll amounts
	y_scroll_amount = (window.pageYOffset)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
	x_scroll_amount = (window.pageXOffset)?(window.pageXOffset):(document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;		
	
	//Get the size of the window	
	screen_width = YAHOO.util.Dom.getViewportWidth();
	screen_height = YAHOO.util.Dom.getViewportHeight();
	
	end_x = screen_width/2 + x_scroll_amount;
	end_y = screen_height/2 + y_scroll_amount;	
	
	cover_attr = {
		height: { to: 1 },
		width: { to: 1 },
		opacity: { from: .5, to: 0 },
		left: { to: end_x },
		top: { to:  end_y }
	}	
		
	var anim_close = new YAHOO.util.Anim('cover', cover_attr, .5, YAHOO.util.Easing.easeIn);
	anim_close.animate();
}


/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
// add the listener - called in the onAvaible event
YAHOO.util.init = function() {	
	temp2 = YAHOO.util.Dom.getElementsByClassName('imgLink');
	YAHOO.util.Event.addListener(temp2, 'click', cover_anim);	
	
	/*temp3 = document.getElementById(the_div);
	YAHOO.util.Event.addListener(temp3, 'mouseout', perform_close);*/
};

/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
//When the element becomes available, initialize the addListener
	YAHOO.util.Event.onAvailable(the_div, YAHOO.util.init);