/* FW100.r1 */
/* (c)2010 SugarHill Works LLC - http://www.sugarhillworks.com */

var i, slideshow = [], ssn, player;


//	 NOTE: THE PREFERRED WAY OF EDITING A GALLERY IS BY USING THE SUGARHILL WORKS PORTFOLIO UPDATER
//
//	 IF YOU DON'T HAVE THE PORTFOLIO UPDATER MODULE, CONTACT US AT sweet@sugarhillworks.com FOR MORE INFO
//
// For each of the slideshow items,              
// follow the pattern of the following lines: 
// 
//			//
//			//slideshow[slideshow.length] = {				<--this line is the same for each item
//				order: "1", // only used by the Portfolio Updater  - the images will appear in the order listed below regardless of this value...
//				video: "vid01.flv", //filename - leave blank [""] if this item is not a video
//				v_type: "video", // 'video' or 'youtube'
//				v_title: "", // this gets mapped to video player
//				image: "img01.jpg", //filename (image is used as the preview image if video is set
//				thumb: "",          //filename, or leave blank if the thumb file has the same name as the image file (default) 
//				title: "title 1",   // title text for this image - if video, this is the text that overlays just like for the images - also mapped to jwplayer video description
//				caption1: "caption 1"// caption text for this image - video, this is the video author - mapped to jwplayer
//				caption1: "caption 2"// additional caption text for this image
//				item_num: "", //PAYPAL ONLY: item number to send to paypal
//				option_list_0: ['option 1', 'option 2', 'option 3'], //PAYPAL ONLY: list of options for product (like color or size)
//				option_amts_0: ['1.99', '2.99', '3.99'], //PAYPAL ONLY: the price of the item as correlated to option_list_0. each option must have a price.
//				option_list_1: ['option A', 'option B', 'option C'] <--note, no comma on last item!//PAYPAL ONLY: list of additional options (like color or size)
//			//};											<--this line is the same for each item
//			//
//
// The images will appear in the slideshows in the order listed (regardless of filename, and order:value).
//
//
// 
// ------------------------------------------------------------------------------------






	
	
//--BEG_PHP_INSERT---------------------- BEGIN PORTFOLIO GALLERY ITEMS -------------------------------------
slideshow[slideshow.length] = {
	order: "10",
	video: "JoshKlatt_Reel_RC.flv",
	v_type: "video",
	v_title: "Stereoscopic 3D video by Josh Klatt",
	image: "JoshKlatt_Reel_RC.jpg",
	thumb: "",
	title: "Stereoscopic 3D video by Josh Klatt",
	caption1: "",
	caption2: "",
	item_num: "",
	option_list_0: [],
	option_amts_0: [],
	option_list_1: []
};

slideshow[slideshow.length] = {
	order: "20",
	video: "Makerbot_RC.flv",
	v_type: "video",
	v_title: "Stereoscopic 3D timelapse by Josh Klatt",
	image: "Makerbot_RC.jpg",
	thumb: "",
	title: "Stereoscopic 3D timelapse by Josh Klatt",
	caption1: "",
	caption2: "",
	item_num: "",
	option_list_0: [],
	option_amts_0: [],
	option_list_1: []
};

slideshow[slideshow.length] = {
	order: "30",
	video: "Skate_RC.flv",
	v_type: "video",
	v_title: "Stereoscopic 3D Skating with Josh Maready",
	image: "Skate_RC.jpg",
	thumb: "",
	title: "Stereoscopic 3D Skating with Josh Maready",
	caption1: "",
	caption2: "",
	item_num: "",
	option_list_0: [],
	option_amts_0: [],
	option_list_1: []
};


//slideshow[slideshow.length] = {
//	order: "20",
//	video: "",
//	v_type: "video",
//	v_title: "",
//	image: "",
//	thumb: "",
//	title: "",
//	caption1: "",
//	caption2: "",
//	item_num: "",
//	option_list_0: [],
//	option_amts_0: [],
//	option_list_1: []
//};

//
 
//--END_PHP_INSERT-------------------------------  END PORTFOLIO GALLERY ITEMS -------------------------------------

//
//
//
// -----------------  DO NOT EDIT BELOW THIS LINE  --------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// **************************************************************************
// **************************************************************************
// ******************** SET YOUR IMAGE FILENAMES ABOVE **********************
// **************************************************************************
// **************************************************************************
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// -----------------  DO NOT EDIT BELOW THIS LINE  --------------------------









// ******************************************************************************
// ************* SS SETTINGS ****************************************************
// ******************************************************************************

//-----------      SETUP      -----------
var ss_layout = 'xFade'; // Options are 'xFade' for cross-fading images OR 'hScroll' for horizontal row of images
var ss_layout_mode = 'static'; // Options are 'flex' or 'static'. Note: your CSS will determine container layout. This will reposition imgs on window resize if mode is 'flex'.
var ss_fade_max = 1; // full opacity = 1. -- 99% opacity would be 0.99
var ss_fade_min = 0.50; // hidden opacity = 0. -- script will always use 0 if ss_layout is 'xFade'

//----------- MAIN CONTAINERS ----------- 
var ss_image_cntr_id = 'ss_cntr';
var ss_thumb_cntr_id = 'main_thms_cntr';
var glass_cntr = 'glass_cntr';
//var ss_info_id = 'ss_info_cntr';
var ss_nav_nums_cntr_id = 'nav_nums_cntr';
var nav_nums_separator = '&nbsp;of&nbsp;';
var ss_title_cntr_id = 'title_cntr'; //leave blank for no titles

//--------- CONTAINERS OPTIONS ----------
var navNums_linkFading = false; // Set to true to have (visible) nav nums fade along with the image
var titles_linkFading = true; // Set to true to have (visible) titles fade along with the image

var overlayInfo = true;// set to true to overlay image info on the image. use following settings to add title, caption, etc
var overlayInfoPos = 'full';// Options are 'image' or 'full'. 'image' sets the title container to constrain to the current image's w/h and the title's position will be relative to the
var overlayShowEmpty = false; // true will show the info overlay even when there's no text to display (i.e. no titles, cpations)
var overlayTitle = true;// set to true to overlay the title on the image. when set to true, title_cntr can be anywhere in the HTML. position via CSS. set display:none.
								// image. 'full' sets to the full width of ss_cntr and the title cntr will be relative to the full ss cntr. title appearance/positioning is set in gallery CSS.
// ? var titleOverlay_v_pos = 'bottom';// needed?
// ! captions overlay not available yet.
//var overlayCaption1 = false;
//var overlayCaption2 = false;
var overlayNav = true; // set to true to overlay the next/back navigation arrows on the image. arrow containers can be anywhere in the HTML. position via CSS. set display:none.
var overlayNavPos = 'css' // [str] auto|css - if 'auto' nav overlays will be 100% height and info_cntr will be adjusted to not overlap automatically. if 'css' gallery.css controls nav/nav bg positioning. 
//---------------------------------------
// captions are in 2 parts, particularly useful with quotes that have a person attributed
// NOTE: Of the following three options, choose either the first or both the second and third
//		* If ss_captions_cntr is used, caption part one and two will be put in this container
//		* If both caption1 and caption2_cntr_id are used, caption parts will be displayed in separate containers.
//*********** ONLY  USE  ss_captions_cntr_id !!! ***********
var ss_captions_cntr_id = 'captions_cntr'; //leave blank for no captions
var caption1Pre = "<p class=\"caption1_txt\">"; // some HTML or not. leave <p> tag
var caption1App = "</p>"; // some HTML or leave blank
var caption2Pre = "<p class=\"caption2_txt\">"; // some HTML or not. leave <p> tag
var caption2App = "</p>"; // some HTML or leave blank
var captions_linkFading = true; // Set to true to have (visible) captions fade along with the image
//---------------------------------------


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


//---------- BEHAVIOR SETTINGS ----------
var ss_autorun = false; // Set to true if this is an auto-run slideshow.
var ss_interval = 3000; // milliseconds between image transitions (on auto-run slideshows)
var ss_fade_duration = 750; // milliseconds that it will take for the fade to complete (larger number = slower fade)
var ss_resume_interval = null; //null OR milliseconds until the slideshow will start itself if left idle (paused).
var randomizeOrder = false; // Set to true to randomize the order of the images in this slideshow.
//---------------------------------------
var glass_nav = true; // Set to true if you want to click the image overlay to advance the slideshow.
var glass_act = 'nav'; // 'pause'|'nav' - determines the click action of the glass cntr
var glass_position = 'image'; // 'image'|'full' - set to 'image' to have glass clickable area match image size, 'full' to have glass cover ss cntr
var showImgsTitleAtt = false; // set to true to show navnums as the glass_cntr's attribute
//---------------------------------------
var img_v_position = 'middle'; //options are 'top' OR 'middle' OR 'bottom' for vertical position. Leave blank '' to let HTML/CSS pos the imgs.
var img_h_position = 'center'; //options are 'left' OR 'center' OR 'right' for horizontal position. Leave blank '' to let HTML/CSS pos the imgs.
//NOTE: Both imgFit and imgGrow (below) will maintain image aspect ratio and fit the images based on that. Meant to be used either/or.
var imgFit = true; //set to true to force large images to fit in the ss cntr. Note: false will allow large images to break the layout.
var imgGrow = false;//set to true to force small images to grow to the size of the ss cntr. images too large to begin with will be resized to fit, even if imgFit is false.
//---------------------------------------
var video_autoplay = false; //set to true to have videos in the slideshow autoplay when they load.
var video_autoplay_delay = 2000; // [int] - milliseconds until video starts playing (so the visitor has time see the preview image). to start playback immediately, set to 0
var vidControlsHeight = 32; // [int] - pixels - this is to offset the info div, so it will appear over the video part of the player, but not cover the controls toolbar
//---------------------------------------
var showThmsTitleAtt = true; // set to true to show navnums as the thumbnail's title attribute
var thms_behavior = 'scrolly'; // 'over_fade' for a thumbs cntr that disappears OR 'scrolly' for scrollable thumbs in a v or h line
var hideScrollArrows = true; // set to true to hide the left/right scroll nav arrows when the beg/end is reached. NOTE: ignored when rewindThumbs or loopThumbs is true
//LOOPING OF SCROLLING THUMBS ONY WORKS WHEN THE VISITOR IS HOLDING THE RIGHT THM ARROW DOWN.
var loopThumbs = false; // set to true to have the thumbs jump back to the other side, giving the appearance of looping. NOTE: ignored when rewindThumbs is true
var thm_loop_delay = 10; // [int] amount to delay before jumping to the beg/end of thumbs - NOTE: a value of 30 is equal to about 1 second delay. set to 0 for immediate looping. values below 5 may cause unexpected behavior when thms are autoscrolling...
/*
//var loopResumeDelay = 250; // milliseconds to delay before resuming scrolling after jumping to the beg/end of thumbs
//REWINDING OF SCROLLING THUMBS IS NOT AVAILABLE. WILL BE IN A FUTURE REVISION.
var rewindThumbs = true; // set to true to have the thumbs autoscroll back to the beginning when the user reaches the end of the scrollable thumbs
var rewindDelay = 500; // milliseconds delay before rewinding the thumbs (gives the user a chance to let up on the mouse to stay at first/last thumb
*/
//---------------------------------------
var thms_linkFading = true; // Set to true to have (visible) thumbs fade along with the image OR false for hidden thumbs
var thms_minOpacity = 0.50; // set to the opacity value you want the thumbs to stop at when fading out. (The active thumb always fades up to 1)

//-------- PAYPAL FORM OPTIONS ----------
//***** retain_choices MUST BE SET TO FALSE!
var retain_choices = false; // DO NOT CHANGE THIS SETTING! // Set to true to retain the user's option list choices as they navigate the slideshow, false to reset option lists on viewing each product
var hide_form_on_nav = true; // Set to true to hide the form when the visitor navigates the slideshow, false to leave form showing
var show_form_on_return = false; // Set to true to keep the purchase form displayed when the customer returns from the paypal site via the 'continue shopping' button
slideshow.options_0 = 'SELECT AN OPTION 1';
slideshow.options_1 = 'SELECT AN OPTION 2';

/*
//--- DO NOT USE --------- DO NOT USE ----
//altWideLayout may override imgFit / imgGrow ?
// *** NOTE: THIS SETTING IS NOT FULLY FUNCTIONAL ***
// *** ALT CNTR WIDTHS MUST BE MANUALLY SET IN galleryEngine ***
var altWideLayout = false; // set to true to use an alternative layout for wide images
var alt_captions_cntr_id = 'alt_captions_cntr'; // set to the container id in which you want the caption to appear in the case of a wide image 
//var alt_caption1Pre = "&quot;"; // some HTML or leave blank
//var alt_caption1App = "&quot;"; // some HTML or leave blank
//var alt_caption2Pre = "&nbsp;&nbsp;&nbsp;&#151&nbsp;"; // some HTML or leave blank
//var alt_caption2App = ""; // some HTML or leave blank

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


//---------- SCROLLBAR SETTINGS ----------
if ((ss_thumb_cntr_id) && (thms_behavior === 'scrolly')) {
	var global_scroll_settings = {};
	// If thms_behavior is set to 'scrolly', apply these settings to the scrolling container & scrollbar
	global_scroll_settings.scrollPaneThms = {
		scrollPaneId: 'scrollPaneThms',
		scrollbarHeight: 0, // the width of the created scrollbar in pixels (defaults to 10)
		scrollbarMargin: 0, // [int] - the margin to leave to the left of the scrollbar in pixels (defaults to 5)
		//wheelSpeed [int] - controls how fast the mouse wheel makes the content scroll in pixels (defaults to 18)
		showArrows: false, // controls whether to display little arrows by the scrollbar for the user to scroll with (defaults to false) -loads slow...
		//arrowSize: 10, // the width of the arrow buttons if showArrows=true (calculated from CSS if not provided)
		useExternalArrows: true, // [boolean] - to use a pair of images (#tArwL_img, #tArwR_img
		animateTo: true,//(useAnimateTo)?true:false, // whether to animate when calling scrollTo and scrollBy (defaults to false)
		dragMinWidth: 140, // [int] - the minimum height to allow the drag bar to be (defaults to 0)
		dragMaxWidth: 240, // [int] - the maximum height to allow the drag bar to be (defaults to 99999!)
		animateInterval: 100, // [int] - The interval in milliseconds to update an animating scrollPane (default 100)
		animateStep: 5, // [int] The amount to divide the remaining scroll distance by when animating (default 3)
		maintainPosition: true, //[boolean] - Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it -
																			   //  - so it doesn't scroll as you add more content (default true)
		resize: false, // - Whether or not to have resizing turned on or not.
		minimumWidth: 20, // - The minimum width to allow the jScrollHorizontalPane to be resized to. Only effective when resize is on.
		loadingText: '', // [str] - text to display in the scroll bar. control style in CSS. defaults to ''
		reset: true // -	When set to 'true' all the global properties will be reset.  This is useful for dynamic refreshes on the page.
	};
	function hScrollThmsInit() {
		$('#main_thms_cntr').jScrollHorizontalPane(global_scroll_settings.scrollPaneThms);
		//$("#thms_nav_cntr > .jScrollPaneContainer").attr({id:'scrollPaneThms'});
	}
}
if (ss_layout === 'hScroll') {
	global_scroll_settings.scrollPaneImgs = {
		scrollPaneId: 'scrollPaneImgs',
		scrollbarHeight: 10, // the width of the created scrollbar in pixels (defaults to 10)
		scrollbarMargin: 0, // [int] - the margin to leave to the left of the scrollbar in pixels (defaults to 5)
		//wheelSpeed [int] - controls how fast the mouse wheel makes the content scroll in pixels (defaults to 18)
		showArrows: false, // controls whether to display little arrows by the scrollbar for the user to scroll with (defaults to false) -loads slow...
		//arrowSize: 10, // the width of the arrow buttons if showArrows=true (calculated from CSS if not provided)
		useExternalArrows: false, // [boolean] - to use a pair of images (#tArwL_img, #tArwR_img
		animateTo: true,//(useAnimateTo)?true:false, // whether to animate when calling scrollTo and scrollBy (defaults to false)
		dragMinWidth: 80, // [int] - the minimum height to allow the drag bar to be (defaults to 0)
		dragMaxWidth: 600, // [int] - the maximum height to allow the drag bar to be (defaults to 99999!)
		animateInterval: 100, // [int] - The interval in milliseconds to update an animating scrollPane (default 100)
		animateStep: 5, // [int] - The amount to divide the remaining scroll distance by when animating (default 3)
		maintainPosition: true, // [boolean] - Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it -
																			   //  - so it doesn't scroll as you add more content (default true)
		resize: false, // - Whether or not to have resizing turned on or not.
		minimumWidth: 20, // - The minimum width to allow the jScrollHorizontalPane to be resized to. Only effective when resize is on.
		loadingText: 'loading images...', // [str] - text to display in the scroll bar. control style in CSS
		reset: false // -	When set to 'true' all the global properties will be reset.  This is useful for dynamic refreshes on the page.
	};
	function hScrollImgsInit() {
		$('#main_imgs_cntr').jScrollHorizontalPane(global_scroll_settings.scrollPaneImgs);
		//$("#ss_cntr > .jScrollPaneContainer").attr({id:'scrollPaneImgs'});
	}
}


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

//-------- VIDEO PLAYER SETTINGS ---------
/**** 
***** NOTE: These characters must be encoded if they are to be used in the flashvars below:
***** ? -> %3F
***** = -> %3D
***** & -> %26 
****/
var vload_gif = 'shw_lib/mediaplayer/loa/der.gif';
var flashvars={},
	params={},
	attributes={},
	initv = { type: 'video',
			  file: (rootPath + 'shw_lib/mediaplayer/loa/der.flv'),
			  image: (rootPath + vload_gif)
			};

function createPlayer(num, v_file, v_img, v_type) {
	
	/** SEE http://developer.longtailvideo.com/trac/wiki/Player5FlashVars for a complete list of flashvars and thier values **/
	flashvars = {
		type: initv.type,//((v_type) ? v_type : initv.type),
		file: initv.file,//((v_file) ? (slideshow.videoDir + v_file) : initv.file),
		image: initv.image,//((v_img) ? (slideshow.imageDir + v_img) : initv.image), //NOTE: You might want to disable if autoplay (above) is set to true. 
		skin: rootPath + 'shw_lib/mediaplayer/skin/' + 'modieus.swf', //just change the xxxx.swf part.
		menu: 'true',
		icons: 'true', // NOT WORKING (icons still show when set to 'false'). expect fix in JW 5.1
		controlbar: 'bottom', // bottom|over|none
		dock: 'false', // shows up when true and there's a plugin using it (like share)
		//provider: v_type,
		bufferlength: '1',
		autostart: 'false', // ALWAYS SET TO false!! set video_autoplay in the main section at top of this file
		repeat: 'none', // none|list|always|single
		smoothing: 'false', // Set to false for better performace!
		stretching: 'uniform', // uniform|none|exactfit|fill
		volume: '50', // 0-100
		backcolor: '#000', // comment out when using facebookit or tweetit plugins!
		screencolor: '#000',
		frontcolor: '#EEE',
		lightcolor: '#FFF',
		linktarget: '_blank',
		link: (num ? (rootPath + slideshow.portfolioDir +'?r='+num) : ''),
		plugins: 'gapro-1,sharing-1',
		'gapro.accountid': 'UA-7701128-4',
		'gapro.trackstarts': 'true',
		'gapro.trackpercentage': 'true',
		'gapro.tracktime': 'true',
		'gapro.trackingmode': 'as3',
		'gapro.idstring': '||streamer||/||file||',
		width: '1000', 
		playerready: 'playerReady'
	};
	/** SEE http://code.google.com/p/swfobject/wiki/documentation for a complete list of params and their values. Attribute info is there as well. **/
	params = {
		bgcolor: '#000',
		menu: 'true',
		allowfullscreen: 'true', 
		allowscriptaccess: 'always',
		allownetworking: 'all',
		wmode: 'opaque'
	};
	attributes = {
		id: 'vplayer',
		name: 'vplayer'
	};

	swfobject.embedSWF(rootPath+'shw_lib/mediaplayer/player-viral.swf', 'tmpvid_cntr', '100%', '100%', '9.0.115', rootPath+'shw_lib/swfobject/expressInstall.swf', flashvars, params, attributes);
}
//--------END VIDEO PLAYER SETTINGS ---------

function addListeners() {
	if (player) { 
		player.addModelListener("STATE", "stateListener");
		player.addModelListener('LOADED', 'medialoadedListener');
	} else {
		setTimeout(function(){addListeners();},100);
	}
}

function playerReady(thePlayer) {
	player = document.getElementById(thePlayer.id);
	addListeners();
//	printConfig();
}


var curPlayerState = "NONE"; 
var prevPlayerState = "NONE"; 
function stateListener(obj) { //IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
	curPlayerState = obj.newstate; 
	prevPlayerState = obj.oldstate; 
	if ((curPlayerState == "BUFFERING") || (curPlayerState == 'PLAYING')) {
		ssPause(0, true);
	}
//	if (curPlayerState == 'PAUSED') {
//		alert('PAUSED');
//	}
	if (curPlayerState == "COMPLETED") { //alert('video COMPLETED');
		if ((ss_resume_interval) || (ss_autorun)) {
			if (ssResumeTO) { window.clearTimeout(ssResumeTO); }
			ssResumeTO = window.setTimeout(function(){ssResume();}, ss_resume_interval);
		}
	}

}

if (ss_autorun === true) { var ss_autorun_start = 5000; } else { var ss_autorun_start = null; }
function medialoadedListener(obj) {
	player.sendEvent('PLAY', true);
	if ((video_autoplay === false)) {// || ((v_list.file).search(/mediaplayer\/loa\/der\./) > 0)) {
		//player.sendEvent('STOP');
		player.sendEvent('PLAY', false); //pause
		if (ss_autorun_start) {
			if (ssResumeTO) { window.clearTimeout(ssResumeTO); }
			ssResumeTO = window.setTimeout(function(){ssResume();}, ss_interval+ss_fade_duration+ss_autorun_start);
			ss_autorun_start = null;
		}
		if (ss_resume_interval) {
			if (ssResumeTO) { window.clearTimeout(ssResumeTO); }
			ssResumeTO = window.setTimeout(function(){ssResume();}, ss_resume_interval);
		}
	}
}


// -----------------------------------------------------------------------------------
ssn = slideshow.length;
slideshow.portfolioDir = (window.location.toString()).replace(rootPath, '');
slideshow.portfolioDir = (slideshow.portfolioDir.match(/\w+\//)).toString();
slideshow.imageDir = rootPath + slideshow.portfolioDir + 'images/';
slideshow.videoDir = rootPath + slideshow.portfolioDir + 'videos/';
slideshow.thumbDir = rootPath + slideshow.portfolioDir + 'thumbs/';

//auto-poplulate thumb filenames when left blank. image filename will be used.
for (i = 0; i < slideshow.length; i++) {
	if (slideshow[i].thumb === "") { 
		slideshow[i].thumb = slideshow[i].image;
	}
}