if(typeof GSS === 'undefined') {

var GSS = {};
}
if(typeof GSS.util === 'undefined') {

GSS.util = {};

}



/*
function debugConsole (str) {

console.log(str);

return

}

*/


// *** DEV TO COME
// used to determine if show viral dock or not  - NOT IMPLEMENTED AT THIS SECOND
// viral dock only shows on mouseover and video is playing or paused player states.
// was thinking if we are not showing matrix in reduced size then I could show the viral dock on unloaded state as well ( after a video finishes )
// but would need to have this variable toggle accordingly 
GSS.util.videoScreenSizeState= 'reduced';

// *********


GSS.util.storePageLoadSettings = function () {
 
// the height of the wrapper will be either a 428 with carousel
// or 428 without carousel so we expand our video differently depending on
// which page is loaded

GSS.util.WRAPPER_ONLOAD_HEIGHT = $('.wrapper').css('height');


// store the bgcolor - this will be the default of pg-carousel-v2.css
// or the override channel css color
// we will use this for the expanded video viewing background
// note we changed the css from  #wrapper to class .wrapper
// as any individual changes to an element are done without a new class
// but inline style rules

GSS.util.WRAPPER_BACKGROUND = $('.wrapper').css('background');
GSS.util.WRAPPER_BGCOLOR = $('.wrapper').css('background-color');


GSS.util.WRAPPER_BORDERCOLOR = $('.wrapper').css('border-left-color');

GSS.util.MOVIE_BORDERCOLOR = $('#movie').css('border-left-color');
// debugConsole("border value is : " + GSS.util.WRAPPER_BORDERCOLOR);




// if video container is object for Flash Embed

if($("#player").get(0).tagName ==='OBJECT') {

GSS.util.PLAYER_ONLOAD_WIDTH = $('#player').attr('width'); // width as numeric value  not string
GSS.util.PLAYER_ONLOAD_HEIGHT = $('#player').attr('height');
}

// if video container is DIV using FP 

else {
GSS.util.PLAYER_ONLOAD_WIDTH = $('#player').width(); // width as numeric value  not string
GSS.util.PLAYER_ONLOAD_HEIGHT = $('#player').height();


}


return this;

};





/* ************


Enlarge Screen 
depends on initially loaded video - 16:9 format or 4:3
either aspect will get max width 773 however height of enlargement 
must maintain video aspect ratio.
The z-index of the movie div in the css file is what permits coverup
of the left side when expandsion occurs of the the flowplayer div.

we expand the wrapper area height enough for the hidden
div of the reduce button to fit under the video area

*/




// *** START ENLARGE FN ***

GSS.util.enlargeScreen = function () {

$('#exhib_sect1').css('height','395px');
$('#exhib_sect1_foot').css('display','none');
$('#exhib_sect2').css('visibility','hidden');
$('#exhib3').css('top','0px');

$('#movie').css('width','680px');
$('#movie').css('margin-left','50px');




// Establishing Wrapper heights

// with 16:9 video was originally format loaded

if(GSS.util.PLAYER_ONLOAD_HEIGHT < 300) {

 $('#wrapper').css('height','640px');
}



// with 4:3 video originally format loaded

if(GSS.util.PLAYER_ONLOAD_HEIGHT > 300) {

$('#wrapper').css('height','770px');
$('#exhib_sect1').css('height','360px');
$('#exhib3').css('top','150px');
$('#fp_reduceBtnCntr').css('top','180px');
 
 }



// ********* 428 video pages with NO carousel 
// These are shorter height pages
// need room for the ReduceVideo button

if(GSS.util.WRAPPER_ONLOAD_HEIGHT === '518px') {

$('#wrapper').css('height','535px');

}


// end of Establishing Wrapper Heights



$('#wrapper').removeClass('wrapper');
$('#wrapper').css('background','none');

// we are not using the onload background image for the expanded size wrapper
// we are just going to use the original bgcolor

$('#wrapper').css('background-color',this.WRAPPER_BGCOLOR);


$('#wrapper').css('border','1px solid '+this.WRAPPER_BORDERCOLOR);

// remove the right side as the outline of the 1px for entire content ( including the side menu ) has a border
$('#wrapper').css('border-right','none');


// pushes exhib3 down
$('#exhib_sect2').css('margin-bottom','70px');


// Now reveal the ReduceVideo button (this is a DIV in the channel template preset with class hidden)
// as we are in the Enlarged size Video view size

$("#fp_reduceBtn").removeClass("hidden");
$("#fp_reduceBtn").addClass("visible");



// failed attempt to animate the enlarging of video
// it causes flowplayer to restart the playlist however
// $f('player').pause();
// $('#player').animate({width:'680px',height:'409px'}, 2000);
// $f('player').resume();
// $('#player').animate({height:'680px'}, 2000,function(){ $f('player').resume();});




// now for the height we are still in logic of
// 428 video with NO carousel


// if Flash Embed  ASSUMES ALL FLASH EMBEDS ARE 16:9 FORMAT
// embeds produce  <OBJECT id="player" width=xxx height=xxx>  as opposed to  <div id="player"> when a GSS video is showing

if($("#player").get(0).tagName ==='OBJECT') {

$('#player').attr('width','680'); // width as numeric value  not string
$('#player').attr('height','409');

}



	else {

		// we have a flowplayer div but not sure which aspect 16:9 or 4:3

		$('#player').width(680);

		if( GSS.util.PLAYER_ONLOAD_HEIGHT < 300 ) {
	
			// we have a 16:9 video
	
			$('#player').height(409);
			
			// CASE: the enlarge button was clicked and if the video is in the Unloaded state =1 then we can show the matrix 
			// unloaded state will only occur if the play again button is showing
			//  user could be toggling size of the screen
			
			var stateFP = $f().getState();
					
			if( stateFP === 1) {
			
			 GSS.util.showContentPanes();
			
			}
			
			return this;

		}
	

// if the else statement never caused a return 
// then we know we have a 4:3 video initially video
// so the final expanded height for 4:3 is  680 x 510(video area) plus 27px (= 537) for controls
// unless it a custom size player output for the event it should be ur 4:3 standard small size 428x346 player
// for a pg-carousel-v2 file

// *** CODE NOT WRITTEN FOR VIDEO MATRIX DISPLAY FOR 4:3 expanded yet.  ****


	         $('#player').height(537);
	         
// for the matrix we would need to increase the height values for all content panes
// to fill in a 4:3 aspect expanding video

// *** DEVELOPMENT NEEDED INSERT CODE HERE


// this means the video is finished
// so we have a user who sees the Play Again button but also has hit the expand Video button
// so we should be showing the matrix 

	     }








return this;

};

// *** END ENLARGE FN ****







// *************************************

// REDUCE FP Size back to Standard 428 x 268


// *****************************************

GSS.util.reduceScreen = function () {

// changeback the customization for largescreen - as these were inline style rules

$('#wrapper').css('background',this.WRAPPER_BACKGROUND);
$('#wrapper').css('height',this.WRAPPER_ONLOAD_HEIGHT);

// now reset the original class back
$('#wrapper').addClass('wrapper');

// not needed NOW careful need the space after word solid for this to work
// $('#movie').css('border-right','1px solid ' + GSS.util.MOVIE_BORDERCOLOR); // we want our right edege border back that was removed from expanded view - since the movie div does not have a class name

$('#exhib_sect1').css('height','451px');

// need to reveal the footer again - it was display none when enlarge occurred
$('#movie').css('margin-left','10px'); // orginal css settings
$('#exhib_sect1_foot').css('display','block');
$('#exhib_sect2').css('visibility','visible');  // restoring to show sect2
$('#exhib3').css('top','-54px');  // original css setting
$('#movie').css('width','428px');
$('#exhib_sect2').css('margin-bottom','0px');


// HIDE the Reduce Button
// as we are now in the Small (original) size Video view size
 $("#fp_reduceBtn").removeClass("visible");
 $("#fp_reduceBtn").addClass("hidden");
 
 
// *** script addition Oct18 for Content Panes after Video plays - The video area
// is in Enlarged mode at this point. So if the user reduces down the size of
// the video area using the REDUCE AREA button and has NOT restarted a Video while
// in the ENLARGED mode then the Content Panes - currently showing to the user
// will NOT fit into the small Size area. So by default we need to CLOSE all the content
// panes when the User Hits the Reduce Area Button. This can only be done from within
// this script. See function at top of page.

this.hideContentPanes();
			     

// Failed attempt to reduce player size via animation it causes reset on fp clip 
// $f().pause();
//  $('#player').animate({width:'428px',height:'268px'}, 5000,function(){ $f().resume();});


// Flash embed object was loaded

if($("#player").get(0).tagName ==='OBJECT') {



$('#player').attr('width','428'); // width as numeric value  not string
$('#player').attr('height','268');

}


else {

// Flowplayer div 


$('#player').width(GSS.util.PLAYER_ONLOAD_WIDTH);
$('#player').height(GSS.util.PLAYER_ONLOAD_HEIGHT);

}

return this;

};




// *** SETTING EVENT LISTENSERS FOR THE BUTTONS
// INI FUNCTIONS FOR ENLARGE REDUCE
// sets click handlers
// WE only need to get the video area UPON USER CLICKING THE EXPAND VIDEO BUTTON
// BUT PRIOR TO ACTUALLY EXPANDING THE VIDEO

GSS.util.enlargeScreenInit = function () {

if ($('#fp_enlargeBtn')) {


$('#fp_enlargeBtn').bind('click',function () { 
GSS.util.storePageLoadSettings();
GSS.util.enlargeScreen();},false);

}

};


GSS.util.reduceScreenInit = function () {

if ($('#fp_reduceBtn')) {

$('#fp_reduceBtn').bind('click',function () { GSS.util.reduceScreen();},false);

$("#fp_reduceBtn").addClass("hidden");

}

};





$(document).ready(function(){

GSS.util.enlargeScreenInit();
GSS.util.reduceScreenInit();


 });