/*!
 *  \file  ccPlayer.js
 *  \brief Common functions for ccPlayer-enabled web broadcasts
 * 
 *  Copyright(c) 2007 by chinacache.com
 * 	All rights reserved. 
 * 
 */
 
//  设置播放器名称 
var g_PlayerID = "ChinaCache Live Streaming";

//  设置皮肤图片路径和格式后缀
var g_skinid = "SkinSample_Gray";
 var g_skinfmt = "gif";

//  设置状态栏字体/线条/背景颜色 
//  取值为颜色色度值
var g_StatusTextColor = 0xBFA489;
var g_StatusLineColor = 0xBFA489;
var g_StatusBgColor = 0x000000;

//  设置客户端版本号和下载地址
var g_cabversion = "1,2,17,26"
var g_caburl = "http://www.chinacache.com/ccplayer/ccPlayer.cab"

var g_ccPlayer;
var STOPBTNHEIGHT = 40;
var LEFTCOLWIDTH = 11;
var TOPHEIGHT = 24;
var RIGHTCOLWIDTH = 11;
var BOTTOMHEIGHT = 60;
var VOLUMEBGWIDTH = 63;
var VOLUMEBGHEIGHT = 11;
var FULLSCRNBTNHEIGHT = 16;
var CORNERWIDTH = 100;

/*!
 *  \class ccPlayer Class
 */
function ccPlayerClass(playerWidth, playerHeight, csUrl, ppUrl)
{
	/************************************************************************/
	/*                           Member Variables                           */
	/************************************************************************/	
	
	/// Width of the player
	this.playerWidth = playerWidth;
	
	/// Height of the player
	this.playerHeight = playerHeight;
	
	/// URL used for C/S mode broadcast
	this.csUrl = csUrl;		 
		
	/// URL used for P2P mode broadcast
	this.ppUrl = ppUrl;

	/// Name of the player
	this.playerName = g_PlayerID;

        /// object type, mediaplayer or custom control
	this.playertype = "cc";
	
	/// player object 
	this.player = null;
	
	/// Color for status line
	this.StatusLineColor = g_StatusLineColor;
	
	/// Color for status text
	this.StatusTextColor = g_StatusTextColor;
	
	/// Color for status background
	this.StatusBgColor = g_StatusBgColor;
	
	/************************************************************************/
	/*                            Public Methods                            */
	/************************************************************************/
	
		this.create = function()
	{
		var retval = false;
		if (!this.createClient()) 
		{
				if (!this.createWindowsMediaPlayer())
				{
					document.writeln('启动失败，请安装Windows Media Player');
				}
				else
				{
					this.playertype = "mp";
					retval = true;
				}
					
		}
		else
		{
			this.playertype = "cc";
			retval = true;
		}
		
		if(retval)
		{
			this.attachplayer();
		}
		
		return retval;
		
	}
	
	this.adjustElemPos = function()
	{
	  //colume elements
	  document.getElementById("rightCol").style.left = this.playerWidth + 11;
		//document.getElementById("leftCol").clientWidth;
		document.getElementById("middleCol").style.width = this.playerWidth;
		//top elements
		document.getElementById("container").style.width = this.playerWidth + 
			document.getElementById("leftCol").clientWidth + document.getElementById("rightCol").clientWidth;
		document.getElementById("topMiddle").style.width = this.playerWidth;
			
		//middle elements
		document.getElementById("middleLeft").style.height = this.playerHeight;
		document.getElementById("middleMiddle").style.width = this.playerWidth;
		document.getElementById("middleMiddle").style.height = this.playerHeight;
		document.getElementById("middleRight").style.height = this.playerHeight;
		
		//bottom elements
		document.getElementById("bottomMiddle").style.width = this.playerWidth;
		
		//control buttons
		document.getElementById("leftButtons").style.width = (this.playerWidth - VOLUMEBGWIDTH - document.getElementById("leftButtons").offsetLeft)/2 - 10;
		document.getElementById("rightButtons").style.width = (this.playerWidth - VOLUMEBGWIDTH - document.getElementById("leftButtons").offsetLeft)/2 - 10;
		document.getElementById("volumeHolder").style.top = this.playerHeight + TOPHEIGHT + BOTTOMHEIGHT/2 - VOLUMEBGHEIGHT/2;
		document.getElementById("volumeHolder").style.left = this.playerWidth - VOLUMEBGWIDTH;
		document.getElementById("leftButtons").style.height = 3;
		
		
		
		
	}
	
	this.attachplayer = function()
	{
		this.player = document.getElementById(this.playerName);
	}
	
	
	/************************************************************************/
	/*                           Private Methods                            */
	/************************************************************************/
	
	this.hasPlugin = function(pluginName)
	{
		var result = false;
		
		if (navigator.plugins && navigator.plugins.length) 
		{
			for (i = 0; i < navigator.plugins.length; i++) 
			{
				if (navigator.plugins[i].name.indexOf(pluginName) != -1) 
				{
		        	result = true;
		        	break;
		      	}
		    }
		}
		
		return result;		
	}
	
	
	this.hasActiveX = function() 
	{
		// Annoyingly, window.ActiveXObject is defined on MacOS,
		// even though that OS can't load ActiveX objects!
		return (window.ActiveXObject && navigator.userAgent.indexOf("Windows") != -1);
	}
	
	
	this.tryExpression = function(expression) 
	{
		var result = null;
		if (document.getElementById)
		{
			// Only later-generation browsers support try..catch
			eval('try { result = ' + expression + '; } catch (e) { }');
		} 
		else 
		{
			eval('result = ' + expression + ';');
		}
  		
  		return result;
	}


	this.tryStatement = function(statement) 
	{
		var result = false;
		
		if (document.getElementById) 
		{
			// Only later-generation browsers support try..catch
			eval('try { ' + statement + '; result = true; } catch (e) { }');
  		} 
  		else 
  		{
			eval('' + statement + '; result = true;');
		}
  		return result;
	}	
	

	this.createActiveXObject = function(id) 
	{
		var control = null;
	
		// Annoyingly, window.ActiveXObject is defined on MacOS,
		// even though that OS can't load ActiveX objects!
		if (window.ActiveXObject && navigator.userAgent.indexOf('Windows') != -1) 
		{
			control = this.tryExpression('new ActiveXObject("' + id + '")');
		} 
		else if (this.hasPlugin('ActiveX') && window.GeckoActiveXObject) 
		{
			control = this.tryExpression('new GeckoActiveXObject("' + id + '")');
  		}
  		
  		return control;
	}
	
	this.hasClient = function()
	{
		return this.createActiveXObject("AxControl.ccPlayer.1") != null;
	}
	
	
	this.hasMediaPlayer = function()
	{
		return this.createActiveXObject("MediaPlayer.MediaPlayer.1") != null;
	}
	
	
	this.createClient = function()
	{
		var ret = true;
		
//		if (!this.hasClient())
//		{
//			var install = document.cookie.indexOf("install=");
//			if (install == -1)
//			{
//				ret = confirm('您还没有安装直播插件，请问您是否要安装该插件？\n\n- 选择确定，则进行安装。\n- 选择取消，则启动标准C/S直播，此时您将无法享受P2P直播带来的流畅效果。');				
//				if (ret)
//				{
//					document.cookie = "install=true";
//				}
//			}
//			else
//			{
//				// delete the cookie
//				var expires = new Date(); 
//				expires.setDate(expires.getDate() - 1); 
//			　 　	document.cookie = 'install=null;expires=' + expires.toGMTString(); 
//			}
//		}
		if (ret)
		{	
			document.writeln('<div id="playerContainer">');
			document.writeln('<div id="player_object">');
			document.writeln(' <object  alt="Loading ChinaCache Player ..." id="' + this.playerName + '" ');
			document.writeln('        classid="CLSID:3B050F2E-3F8E-4D91-90E6-72E32983AB5A" ');
			document.writeln('				codebase="' + g_caburl + '#version=' + g_cabversion + '"');
			document.writeln('        standby="Loading ChinaCache Player ..." ');
			document.writeln('        type="application/x-chinacache-stream" ');
			document.writeln('        width="' + this.playerWidth + '" ');
			document.writeln('        height="' + this.playerHeight + '">');
			document.writeln('  <param name="sourceURL" value="' + this.ppUrl + '"/>');
			document.writeln('  <param name="Logo" value="' + this.playerName + '"/>');
			document.writeln('  <param name="StatusTextColor" value="' + this.StatusTextColor + '"/>');
			document.writeln('  <param name="StatusLineColor" value="' + this.StatusLineColor + '"/>');
			document.writeln('  <param name="StatusBgColor" value="' + this.StatusBgColor + '"/>');
			document.writeln('  <param name="backURL" value="' + this.csUrl + '"/>');
			document.writeln(' </object>');
			document.writeln('</div>');
			
			document.writeln('<div id="video_controlbar_id">');
			document.writeln('<span id="play_button" class="btn">');
			document.writeln('<img style="CURSOR: hand" src="skin/play_btnnormal.gif" width="16" height="16" alt="点击播放" onClick="g_ccPlayer.play(); return false;" border="0" alt="play" onMouseOut="this.src=\'skin/play_btnnormal.gif\'" onMouseOver="this.src=\'skin/play_btnhover.gif\'"/>');
			document.writeln('</span>');
			document.writeln('<span id="stop_button" class="btn">');
			document.writeln('<img style="CURSOR: hand" src="skin/stop_btnnormal.gif" class="grayed" width="16" height="16" alt="点击停止播放" onClick="g_ccPlayer.stop(); return false;" border="0" alt="stop" onMouseOut="this.src=\'skin/stop_btnnormal.gif\'" onMouseOver="this.src=\'skin/stop_btnhover.gif\'"/>');
			document.writeln('</span>');
			document.writeln('<span id="mute_button" class="btn_mute">');
			document.writeln('<img style="CURSOR: hand" src="skin/muteoff_btnnormal.gif" id="mute_btn_image"  width="15" height="16" alt="点击静音" />');
			document.writeln('</span>');
			// ========================= slider bar =================================================
			document.writeln('<div class="horizontal_track" style="display:inline;margin-right:8px;" id="horizontal_track_1" >');
			document.writeln('<div class="horizontal_slit" id="horizontal_slit_1" >&nbsp;</div>');
			document.writeln('<div class="horizontal_slider" id="horizontal_slider_1" style="left: 30px;" onmousedown="slide(event, \'horizontal\', 63, 0, 63, 64, 0, \'value_display_1\');" >&nbsp;</div>');
			document.writeln('<div id="value_display_1"></div>');
			document.writeln('</div>')
			// ==========================================================================			
			document.writeln('<span id="volume_button" title="拖动或点击调整音量大小"><tt id="volume_point"></tt></span>');
			
			// <tt id="volume_point"></tt>
			// <img src="skin/volume_point.gif" width=7 height=8 id="volume_point" alt="音量调节" onMouseOut="this.src=\'skin/volume_point.gif\'; return false;">
			document.writeln('<span id="fullscreen_button">');
			document.writeln('<img src="skin/full_screen.gif" width="16" height="16" alt="全屏" onClick="g_ccPlayer.fullscreen(); return false;" />');
			document.writeln('</span>');
			// document.writeln('<span id="ChinaCache"><a href="http://www.chinacache.com" target="_blank">ChinaCache 2007</a></span>');
			document.writeln('</div>');	
			
			document.writeln('</div>');								
			return true;
		}
		
		return false;
	}
	

	this.createWindowsMediaPlayer = function()
	{
		if (this.hasMediaPlayer()) 
		{
			document.writeln('<div id="playerContainer">');
			document.writeln(' <object id="' + this.playerName + '" ');
			document.writeln('        classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" ');
			document.writeln('        codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ');
			document.writeln('        standby="Loading Microsoft Windows Media Player components..." ');
			document.writeln('        type="application/x-oleobject" ');
			document.writeln('        width="' + this.playerWidth + '" ');
			document.writeln('        height="' + this.playerHeight + '">');
			document.writeln('  <param name="Filename" value="' + this.csUrl + '"/>');
			document.writeln('  <param name="AnimationatStart" value="false"/>');
			document.writeln('  <param name="TransparentatStart" value="false"/>');
			document.writeln('  <param name="AutoStart" value="true"/>');
			document.writeln('  <param name="ShowControls" value="' + false + '"/>');
			document.writeln('  <param name="ShowAudioControls" value="fales"/>');
			document.writeln('  <param name="ShowPositionControls" value="true"/>');
			document.writeln('  <param name="ShowTracker" value="false"/>');
			document.writeln('  <param name="ShowDisplay" value="false"/>');
			document.writeln('  <param name="ShowCaptioning" value="false"/>');
			document.writeln('  <param name="ShowGotoBar" value="false"/>');
			document.writeln('  <param name="ShowStatusBar" value="true"/>');
			document.writeln(' </object>');
			document.writeln('</div>');
			
			return true;
		} 
		
		return false;
	}
	
	this.play = function()
	{
		if(this.player != null)
		{
			this.player.play();
		}
	}
	
	this.stop = function()
	{
		if(this.player != null)
		{
			this.player.stop();
		}
	}
	
	//switch mute status
	this.mute = function() 
	{
    if(this.player != null) {
    	this.player.Mute = !this.player.Mute;;
    	return this.player.Mute;
    }
    
  } 
  
  this.setmute = function(bmute)
  {
  	if(this.player != null)
  	{
  		this.player.Mute = bmute;
  	}
  }
  
  this.getmute = function()
  {
  	if(this.player != null)
  	{
  		return this.player.Mute;
  	}
  }
  
  this.setvolume = function(percentOfMax) {
  	// we use WMP 6.4 API for backwards compatibility
  	// Volume ranges from -10000 (silent) to 0 (load) but it
  	// isn't a linear scale so we have to do the following:
  	
  	if(this.player == null)
  		return;
  		
  	if(this.playertype == "cc")
  	{
  		this.player.Volume = percentOfMax;
  		return;
  	}
  		
  	if(percentOfMax == 0) { this.player.Volume = -10000; }
		else if(percentOfMax < 3) { this.player.Volume = -9000; }
		else if(percentOfMax < 6) { this.player.Volume = -3500; }
		else if(percentOfMax < 9) { this.player.Volume = -3300; }
		else if(percentOfMax < 12) { this.player.Volume = -3200; }
		else if(percentOfMax < 15) { this.player.Volume = -2900; }
		else if(percentOfMax < 18) { this.player.Volume = -2700; }
		else if(percentOfMax < 21) { this.player.Volume = -2500; }
		else if(percentOfMax < 24) { this.player.Volume = -2300; }
		else if(percentOfMax < 27) { this.player.Volume = -1900; }
		else if(percentOfMax < 30) { this.player.Volume = -1800; }
		else if(percentOfMax < 33) { this.player.Volume = -1700; }
		else if(percentOfMax < 36) { this.player.Volume = -1600; }
		else if(percentOfMax < 39) { this.player.Volume = -1500; }
		else if(percentOfMax < 42) { this.player.Volume = -1000; }
		else if(percentOfMax < 45) { this.player.Volume = -950; }
		else if(percentOfMax < 48) { this.player.Volume = -900; }
		else if(percentOfMax < 51) { this.player.Volume = -850; }
		else if(percentOfMax < 54) { this.player.Volume = -800; }
		else if(percentOfMax < 57) { this.player.Volume = -750; }
		else if(percentOfMax < 60) { this.player.Volume = -700; }
		else if(percentOfMax < 63) { this.player.Volume = -650; }
		else if(percentOfMax < 66) { this.player.Volume = -600; }
		else if(percentOfMax < 69) { this.player.Volume = -550; }
		else if(percentOfMax < 72) { this.player.Volume = -500; }
		else if(percentOfMax < 75) { this.player.Volume = -450; }
		else if(percentOfMax < 78) { this.player.Volume = -400; }
		else if(percentOfMax < 81) { this.player.Volume = -350; }
		else if(percentOfMax < 84) { this.player.Volume = -300; }
		else if(percentOfMax < 87) { this.player.Volume = -250; }
		else if(percentOfMax < 90) { this.player.Volume = -200; }
		else if(percentOfMax < 93) { this.player.Volume = -150; }
		else if(percentOfMax < 96) { this.player.Volume = -100; }
		else if(percentOfMax < 99) { this.player.Volume = -50; }
		else if(percentOfMax == 100) { this.player.Volume = 0; }
			
		//this.player.Volume = (percentOfMax - 100) * 100;
  }
  
   this.fullscreen = function(url) {

    if(this.player != null) {
    	if(this.playertype == "mp")
      	this.player.DisplaySize=3;
      else
      	this.player.FullScreen = true;
    }
  }
}


/*!
 *  Helper method to create Player
 *
 *	\param	playerWidth  [in] Width
 *	\param	playerHeight [in] Height
 *	\param	csUrl        [in] Standard C/S broadcasting URL, used only if the ccPlayer plugin is not installed.
 *	\param	ppUrl        [in] P2P URL. It is optional, since it can be converted from csUrl.
 *
 *	\return Object of ccPlayer
 */
function CreateCCPlayer(playerWidth, playerHeight, csUrl, ppUrl)
{
	if (arguments.length < 4) 
		ppUrl = csUrl.replace(/(\w)*(:\/\/)/g, "livesky://");

	var player = new ccPlayerClass(playerWidth, playerHeight, csUrl, ppUrl);
	g_ccPlayer = player;	
	
 	if(player.create())
  	{
 		// setSkin(g_skinid, g_skinfmt);
 		// player.adjustElemPos();
 		var muteobject = setMuteControl(player, "mute_btn_image", "skin/muteoff_btnnormal.gif", 
 			"skin/muteoff_btnhover.gif", "skin/muteon_btnnormal.gif");
 			
	 	// setSliderObject("horizontal_slider_1", player, 0, 63, muteobject);
 	}

	return player;
}

/*!
 *  Helper method to get ccPlayer
 *
 *	\return Object of ccPlayer
 */
function GetCCPlayer()
{
	var Player = document.getElementById(g_PlayerID);
	return Player;
}

function getObject(objectName)
{
	if(document.getElementById)
	{
		return document.getElementById(objectName);
	} else if(document.all)	{
		return document.all[objectName];
	} else if(document.layers) {
		return document.layers[objectName];
	}
	return null;
}

//////////////////////////////// Volume Slider functions ////////////////////////////////

var minSliderPosition;
var maxSliderPosition;
var sliderLength;
var dragOffset;
var intervalID;
var sliderObject;
var ourPlayer;
var ourmuteobject;

function setSliderObject(sliderObjectId, playerObject, minPosition, maxPosition, muteobject) {
	// set vars
	sliderObject = getObject(sliderObjectId);
	ourPlayer = playerObject;
	ourmuteobject = muteobject;
	minSliderPosition = minPosition;
	maxSliderPosition = maxPosition;
	sliderLength = maxSliderPosition - minSliderPosition;

	// set starting position
	sliderObject.style.pixelLeft = sliderLength/2;
	
  // assign handlers
  sliderObject.onmousedown = startDrag;
  sliderObject.onmouseup = stopDrag;
  // sliserObject.onmouseout = stopDrag;
}

function setVolumeSlider(sliderPosition) {
	if (sliderPosition < minSliderPosition) { sliderPosition = minSliderPosition }
	else if (sliderPosition > maxSliderPosition) { sliderPosition = maxSliderPosition }
  return sliderPosition;
}

function setTheVolume() {
	var currentPosition = sliderObject.style.pixelLeft - minSliderPosition;
	var percentOfTotal = Math.round((currentPosition / sliderLength) * 100);
	ourPlayer.setvolume(percentOfTotal);
}

function isDraggable() {
	if (ourPlayer == null || sliderObject == null || minSliderPosition == null || maxSliderPosition == null || sliderLength == null) {
		return false;
	}
	return true;
}

function startDrag() {
	if (isDraggable() && event.button == 1 && event.srcElement == sliderObject) {
		ourmuteobject.onvolumechange();
		sliderObject.onmousemove = drag;
		dragOffset = event.clientX - sliderObject.style.pixelLeft;
		//sets the value of the volume 10 times a second
		intervalID = setInterval("setTheVolume()",100);
	}
}

function drag() {
	sliderObject.style.pixelLeft = setVolumeSlider(event.clientX - dragOffset);
	return false;
}

function stopDrag() {
	if (isDraggable() && event.button == 1 && event.srcElement == sliderObject) {
		// stops setting the volume value every 10 seconds
		clearInterval(intervalID);
	}
	sliderObject.onmousemove = null;
	alert("stop drag");
}


//////////////////////////////////////////////////////////////////////////////

/////////////////Mute control fucntions///////////////////////////////////////
var g_mcobject;

function setMuteControl(player, muteobject, normalimg, hotimg, muteimg)
{
	g_mcobject = new CMuteControl(player, muteobject, normalimg, hotimg, muteimg);
	g_mcobject.SetControl();
	return g_mcobject;
}

function CMuteControl(player, muteobject, normalimg, hotimg, muteimg)
{
	//Member Variables
	//player: a player object support Mute property
	this.normalimg = normalimg;
	this.hotimg = hotimg;
	this.muteimg = muteimg;
	this.player = player;
	this.muteobject = getObject(muteobject);
	
	//Member Functions
	this.SetControl = function()
	{
		this.muteobject.onmousedown = mc_onmousedown;
		this.muteobject.onmouseover = mc_onmouseover;
		this.muteobject.onmouseout = mc_onmouseout;
	}
	
	this.onvolumechange = function()
	{
			this.muteobject.src = this.normalimg;
			this.player.setmute(false);
	}
	
	this.getmute = function()
	{
		return this.player.getmute();
	}
	
	this.mute = function()
	{
		return this.player.mute();
	}
}

//event handler must be global function
function mc_onmousedown()
{
	var bmute = g_mcobject.mute();
	if(bmute)
	{
		g_mcobject.muteobject.src = g_mcobject.muteimg;
		g_mcobject.muteobject.alt = "打开音量";
	}
	else
	{
		g_mcobject.muteobject.src = g_mcobject.hotimg;
		g_mcobject.muteobject.alt = "点击静音";
	}
}

function mc_onmouseover()
{
	if(!g_mcobject.getmute())
	{
		g_mcobject.muteobject.src = g_mcobject.hotimg;
	}
}

function mc_onmouseout()
{
	if(!g_mcobject.getmute())
	{
		g_mcobject.muteobject.src = g_mcobject.normalimg;
	}
}

/////////////////////////////////////////////////////////////////////////////

function setSkin(skinid, skinfmt)
{
	// set control bar ..
	document.writeln('<div id="video_controlbar_id">');
	document.writeln('<span id="play_button" class="btn">');
	document.writeln('<img src="skin/play_btnnormal.gif" width="16" height="16" alt="点击播放 或者暂停" />');
	document.writeln('</span>');
	document.writeln('<span id="stop_button" class="btn">');
	document.writeln('<img src="skin/stop_btnnormal.gif" class="grayed" width="16" height="16" alt="点击停止播放" />');
	document.writeln('</span>');
	document.writeln('<span id="mute_button" class="btn btn_mute">');
	document.writeln('<img src="skin/muteoff_btnnormal.gif" id="mute_btn_image" width="15" height="16" alt="点击静音" />');
	document.writeln('</span>');
	document.writeln('<span id="volume_button" title="拖动或点击调整音量大小"><tt id="Volbar"></tt></span>');
	document.writeln('<span id="fullscreen_button">');
	document.writeln('<img src="skin/full_screen.gif" width="16" height="16" alt="全屏" />');
	document.writeln('</span>');
	document.writeln('<div id="ChinaCache"><a href="http://www.chinacache.com" target="_blank">北京蓝汛</a></div>');
	document.writeln('</div>');	
}