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

var lg = new Array();
lg[0] = '';
lg[1] = 'images/qa_group2007.jpg';

var cap = new Array();
cap[0] = '';
cap[1] = '2007 Quality Dairy Recipients';

/////////////////////////////////////////////////////////////////////////////////////
// Main animation that covers and pops up the portfolio interface
/////////////////////////////////////////////////////////////////////////////////////
cover_anim = function(e)  {
	
	//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);	
}

/////////////////////////////////////////////////////////////////////////////////////
// Assign actions to the thumbnails
/////////////////////////////////////////////////////////////////////////////////////
function assign_thumb_actions(e) {
	temp3 = YAHOO.util.Dom.getElementsByClassName('gal_th');
	YAHOO.util.Event.addListener(temp3, 'click', define_thumb_actions);
}

/////////////////////////////////////////////////////////////////////////////////////
// Define thumbnail actions
/////////////////////////////////////////////////////////////////////////////////////
function define_thumb_actions(e) {
	temp = this.id.split('_');
	id = temp[1];

	// Generate new id for the large portfolio item so I can track it when it's loaded.
	new_id = 'gal_img_' + Math.floor(Math.random()*10000);

	YAHOO.util.Dom.setStyle( 'gal_cap', 'opacity', 0 );

	document.getElementById('gal_img').innerHTML = '<img src="' + lg[id] + '" id="' + new_id + '" class="gal_lg" />';
	document.getElementById('gal_cap').innerHTML = cap[id];

	// set the portfolio item with new_id to opacity = 0
	YAHOO.util.Dom.setStyle( new_id, 'opacity', 0 );	

	// attach the load event to fade it in
	YAHOO.util.Event.addListener(new_id, 'load', img_load_action);

	var anim_cap = new YAHOO.util.Anim('gal_cap', {opacity: { from: 0, to: 1}}, .2, YAHOO.util.Easing.easeIn);
	anim_cap.animate();	
}

function img_load_action(el) {
	var anim_lg = new YAHOO.util.Anim(this.id, {opacity: { from: 0, to: 1}}, 1, YAHOO.util.Easing.easeIn);
	anim_lg.animate();
}

/////////////////////////////////////////////////////////////////////////////////////
// Perform the AJAX request and position the GUI in the middle of the screen
/////////////////////////////////////////////////////////////////////////////////////
function getContent(e) {
	
	document.getElementById(the_div).innerHTML = '';
	
	var callBack = {
		success: function(o) {
		document.getElementById(the_div).innerHTML = o.responseText;
		assign_thumb_actions();
		}
	}

	var connectionObect = YAHOO.util.Connect.asyncRequest('GET', 'dsp_gal.cfm', callBack);
		
	//Set the display property of the display area to "block"
	YAHOO.util.Dom.setStyle(the_div, 'visibility', 'visible');
	
	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, 'visibility', 'hidden');
	
	//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('gal_link');
	YAHOO.util.Event.addListener(temp2, 'click', cover_anim);
};

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