// video embed parameters
//small player size = "260", "195"
//medium player size = "400", "300"
//large player size = "480", "380"
var vidHeight = 195;
var vidWidth = 350;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
var ytplayer = null;
var vidID = null;

// update css on video state changes
function onytplayerStateChange(newState) {
   	// state:
   	// 0: finished
   	// 1: play
   	// 2: pause
   	// 3: cue
   	var pauseBtn = $("pauseButton");
   	var playBtn = $("playButton");
	if ((pauseBtn) && (playBtn)) {
		switch(newState) {
			case 0:
				// switch active class to pause button
				pauseBtn.addClassName("active");
				playBtn.removeClassName("active");
				break;	
			case 1:
				// switch active class to play button
				pauseBtn.removeClassName("active");
				playBtn.addClassName("active");
				break;
			case 2:
				// switch active class to pause button
				pauseBtn.addClassName("active");
				playBtn.removeClassName("active");
				break;	
			default:
				// do nothing
				break;
		}
	}
}

// functions for the api calls
function loadNewVideo(id, startSeconds) {
	if (ytplayer) {
    	ytplayer.loadVideoById(id, parseInt(startSeconds));
    }
}
function cueNewVideo(id, startSeconds) {
	if (ytplayer) {
    	ytplayer.cueVideoById(id, startSeconds);
    	ytplayer.playVideo();						      	
	}
}
function play() {
	if (ytplayer) {
    	ytplayer.playVideo();
    	// blur selected a tag
    	if ($("playButton")) {
    		$("playButton").blur();	
    	}
	}
}
function pause() {
	if (ytplayer) {
    	ytplayer.pauseVideo();
    	// blur selected a tag
    	if ($("pauseButton")) {
    		$("pauseButton").blur();	
    	}
	}
}
function stop() {
	if (ytplayer) {
    	ytplayer.stopVideo();
	}
}
function getPlayerState() {
	if (ytplayer) {
    	return ytplayer.getPlayerState();
	}
}
function seekTo(seconds) {
	if (ytplayer) {
    	ytplayer.seekTo(seconds, true);
	}
}
function getBytesLoaded() {
    if (ytplayer) {
		return ytplayer.getVideoBytesLoaded();
    }
}
function getBytesTotal() {
	if (ytplayer) {
    	return ytplayer.getVideoBytesTotal();
	}
}
function getCurrentTime() {
	if (ytplayer) {
    	return ytplayer.getCurrentTime();
	}
}
function getDuration() {
	if (ytplayer) {
    	return ytplayer.getDuration();
	}
}
function getStartBytes() {
	if (ytplayer) {
    	return ytplayer.getVideoStartBytes();
	}
}
function mute() {
	if (ytplayer) {
    	ytplayer.mute();
    }
}
function unMute() {
	if (ytplayer) {
    	ytplayer.unMute();
	}
}
function getEmbedCode() {
	alert(ytplayer.getVideoEmbedCode());
}
function getVideoUrl() {
	alert(ytplayer.getVideoUrl());
}
function setVolume(newVolume) {
	if (ytplayer) {
    	ytplayer.setVolume(newVolume);
    }
}
function getVolume() {
	if (ytplayer) {
    	return ytplayer.getVolume();
	}
}
function clearVideo() {
	if (ytplayer) {
    	ytplayer.clearVideo();
    }
}

/* new video functions */
function showDetailVideo(videoId, productId) {
	try {
		// set global video id
	  	vidID = videoId;
	  	// blur link
		var linkObj = $("playVideoLink" + productId);
		if (linkObj) {
			linkObj.blur();		
		}
		// launch modal window center of page vertically and horizontally
		var obj = $("popupVideo");
		var wrapperObj = $("popupVideo_wrapper");
		var videoContainer = $("videoContainer");
		if (obj && wrapperObj && videoContainer) {
			// get the user's screen dimensions and calculate center point
			var screenWidth = getBrowserWidth();
			var screenHeight = getBrowserHeight();
			// get object's dimensions
			var objWidth = vidWidth;
			var objHeight = vidHeight;
			// scrolling offset
			var scrollY = getOffsetY();
			// set coordinates
			var x = Math.floor(screenWidth/2) - Math.floor(objWidth/2) + "px";
			var y = Math.floor(screenHeight/2) - Math.floor(objHeight/2) + scrollY + "px";
			// make visible
			obj.style.top = y;
			obj.style.left = x;
			// set wrapper height
			if( window.innerHeight && window.scrollMaxY ) // Firefox
			{
				pageWidth = window.innerWidth + window.scrollMaxX;
				pageHeight = window.innerHeight + window.scrollMaxY;
			}
			else if( document.body.scrollHeight > document.body.offsetHeight ) // all but Explorer Mac
			{
				pageWidth = document.body.scrollWidth;
				pageHeight = document.body.scrollHeight;
			}
			else // works in Explorer 6 Strict, Mozilla (not FF) and Safari
			{
				pageWidth = document.body.offsetWidth + document.body.offsetLeft;
				pageHeight = document.body.offsetHeight + document.body.offsetTop;
			}
			wrapperObj.style.height = pageHeight + "px";
			// create HTML content for SWF Object
			var embedCode = getVideoEmbedCode();
			// write HTML to page
			videoContainer.innerHTML = embedCode;
			// embed video
			swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", vidWidth, vidHeight, "8", null, null, params, atts);
			// display wrapper and video player
			wrapperObj.style.display = "block";
			obj.style.display = "block";
		}
	} catch (ex) {
		alert("showVideo: " + ex);	
	}
}	
function hideDetailVideo() {
	try {
		var wrapperObj = $("popupVideo_wrapper");
		var obj = $("popupVideo");
		if (obj && wrapperObj) {
			obj.style.display = "none";
			wrapperObj.style.display = "none";
		}
	} catch (ex) {
		alert("hideVideo: " + ex);	
	}
}
function getVideoEmbedCode() {
	/*
	 * current HTML rendering in production
	 *
		<div id="ytapiplayer">
			You need Flash player 8+ and JavaScript enabled to view this video.
		</div>
		<script type="text/javascript">
			swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", vidWidth, vidHeight, "8", null, null, params, atts);
			// called when page loads
			function onYouTubePlayerReady() {
		      	// set player div id
		      	ytplayer = document.getElementById("myytplayer");
		      	if (ytplayer) {
			      	// cue and play uo product detail video
				   	cueNewVideo('x0H_A0HYsKM', 0);
			      	//if using sound, set volume level here. 0-100
			    	setVolume(75);
			    	// track state changes
			    	ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
			    }
	        }
		</script>
		<ul id="controls">
			<li><a href="javascript:void(0)" onclick="pause()" id="pauseButton">pause</a></li>
			<li><div id="controlsDivider">/</div></li>
			<li><a href="javascript:void(0)" onclick="play()" id="playButton" class="active">play</a></li>
		</ul>	
	 *
	 */
	var str = '<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div>';
	/*
	str += '<ul id="controls"><li><a href="javascript:void(0)" onclick="pause()" id="pauseButton">pause</a></li>';
	str += '<li><div id="controlsDivider">/</div></li>';
	str += '<li><a href="javascript:void(0)" onclick="play()" id="playButton" class="active">play</a></li></ul>';
	*/
	return str;
}
//called when page loads
function onYouTubePlayerReady() {
	// set player div object
  	ytplayer = document.getElementById("myytplayer");
  	if (ytplayer) {
		// cue and play uo product detail video
	   	cueNewVideo(vidID, 0);
      	//if using sound, set volume level here. 0-100
    	setVolume(75);
    	// track state changes
    	ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }
}