// zorap.js

includeJavascriptFile('/zorap_settings.js');
includeJavascriptFile('/zorap_version.js');

// settings
var jsSettings = new Object(); // used by this file for values that change
var zorapCtrlInitialSettings = new Object(); // used to initialize ZorapCtrl

// globals
var jsGlobalObjects = new Object();
jsGlobalObjects.speakerSlider = null;
jsGlobalObjects.micQueue = null;

// initialize
function initJSSettings()
{
	// parameters used by this file which can change or depend on cookies
	jsSettings.Network = settings.Network;
	jsSettings.IsNewZorap = false;
	jsSettings.RealGID = settings.GID;
	jsSettings.UserId = settings.UserId;
	jsSettings.UID = '';
	jsSettings.UseSSL = true;
	jsSettings.MediaServerSecureIP = '';
	jsSettings.MediaServerUnsecureIP = '';

	jsSettings.IsOwner = settings.IsOwner;
	jsSettings.UserUniqueId = settings.UserUniqueId;
	jsSettings.DisplayName = settings.DisplayName;
	jsSettings.ModeratorId = settings.ModeratorID;
	jsSettings.ModeratorDisplayName = settings.ModeratorDisplayName;
    jsSettings.AvatarImageUrl = settings.AvatarImageUrl;
    
	jsSettings.EntryPoint = 0;
	jsSettings.IsFanPage = false;
	jsSettings.BackgroundImageURL = settings.DataDirectory + '/' + settings.BackgroundImageFileName;

	if(window.parent && window.parent.getRoomParams)
	{
		var p = window.parent.getRoomParams();
		
		jsSettings.Network = '11';
		jsSettings.IsNewZorap = true;
		jsSettings.EntryPoint = p.entryPoint;

		jsSettings.ModeratorId = p.moderatorIMID;
		jsSettings.ModeratorDisplayName = p.moderatorDisplayName;
		
		jsSettings.IsOwner = p.isOwner;
		
		jsSettings.UserId = p.userId;
		jsSettings.UserUniqueId = p.userId;
		jsSettings.DisplayName = p.displayName;
		
		if(p.entryPoint == 1)
		{
			jsSettings.RealGID = p.gid;
			jsSettings.UID = p.uid;
			jsSettings.UseSSL = p.useSSL;
			jsSettings.SecureMSIP = p.secureMSIP;
			jsSettings.UnsecureMSIP = p.unsecureMSIP;
		}		
		jsSettings.AvatarImageUrl = p.picbig;
		jsSettings.FacebookOwnerPicSquare = p.ownerpicsquare;
		
		jsSettings.IsFanPage = p.isFanPage;
		if(p.isFanPage)
		{
			jsSettings.FanPageImageUrl = p.fanPageImageUrl;
		}

		if(settings.UseBackgroundImage && jsSettings.IsFanPage && (settings.BackgroundImageFileName.toLowerCase() == 'defaultbackground.png'))
		{
			jsSettings.BackgroundImageURL = jsSettings.FanPageImageUrl;
		}
	}

    jsSettings.PageColor = settings.PageColor;
    jsSettings.ControlColor = settings.ControlColor;
    jsSettings.ButtonColor = settings.ButtonColor;
    jsSettings.TextColor = settings.TextColor;
	jsSettings.Font = settings.Font;
	jsSettings.Bold = settings.Bold;
	jsSettings.Italic = settings.Italic;
	
	jsSettings.BackgroundImageFillStyle = settings.BackgroundImagePos;
	jsSettings.BlendBackgroundImage = convertBoolToString(settings.BlendBackground);
	jsSettings.UseBackgroundImage = convertBoolToString(settings.UseBackgroundImage);
	
	jsSettings.CameraId = readCookie('camid');
	jsSettings.CameraState = readCookie_bool('camstate', false, bool_onoff);
	jsSettings.Mic = readCookie('mic');
	jsSettings.WearingHeadset = readCookie_bool('headset', true);
	jsSettings.RecordingLevel = readCookie_int('miclevel', 127);// 0-255 
	jsSettings.AGCMode = readCookie_bool('agcmode', true);
	jsSettings.Speakers = readCookie('speakers');
	jsSettings.PlaybackLevel = readCookie_int('speakerlevel', 127);// 0-255 
    jsSettings.EchoState = readCookie('echostate', 'TestNeverRan'); 
    jsSettings.EchoLevel = 0;
	jsSettings.TalkLock = readCookie_bool('talklock', false); 
	
	jsSettings.GoodToGo = false;
}

function isFirstTime()
{
	if(jsSettings.CameraId || jsSettings.Mic || jsSettings.Speakers)
	{
		 return false;
	}
	return true;
}

// initialize settings used to init ZorapCtrl
function initZorapCtrlInitialSettings()
{
	zorapCtrlInitialSettings.InstanceId = settings.InstanceId;

	var domain = location.host;
	if(domain.indexOf('localhost:') == 0)
	{
		domain += '/ZorapDotCom';
	}
	zorapCtrlInitialSettings.Domain = domain;

	zorapCtrlInitialSettings.UID = jsSettings.UID;
	zorapCtrlInitialSettings.UseSSL = jsSettings.UseSSL;
	zorapCtrlInitialSettings.MediaServerSecureIP = jsSettings.SecureMSIP;
	zorapCtrlInitialSettings.MediaServerUnsecureIP = jsSettings.UnsecureMSIP;

    zorapCtrlInitialSettings.PageName = location.href;
    zorapCtrlInitialSettings.SessionServerIP = SessionServerIP;
    zorapCtrlInitialSettings.SessionServerUnsecurePort = SessionServerUnsecurePort;
    zorapCtrlInitialSettings.SessionServerSecurePort = SessionServerSecurePort;
    zorapCtrlInitialSettings.LoadServerUnsecureIP = LoadServerUnsecureIP;
    zorapCtrlInitialSettings.LoadServerSecureIP = LoadServerSecureIP;
    zorapCtrlInitialSettings.AudioCodec = 'ISAC';
    zorapCtrlInitialSettings.VideoCodec = 'On2';

	zorapCtrlInitialSettings.Mode = settings.Mode;
    zorapCtrlInitialSettings.Network = jsSettings.Network;

    zorapCtrlInitialSettings.UserId = jsSettings.UserId;
    zorapCtrlInitialSettings.UserUniqueId = jsSettings.UserUniqueId;
	zorapCtrlInitialSettings.EntryPoint = jsSettings.EntryPoint;
	zorapCtrlInitialSettings.GID = jsSettings.RealGID;
    zorapCtrlInitialSettings.ModeratorId = jsSettings.ModeratorId;
    
    zorapCtrlInitialSettings.ParentRoom = settings.ParentRoom;
    zorapCtrlInitialSettings.ClubName = settings.ClubName;
    zorapCtrlInitialSettings.DisplayName = prependTemp(jsSettings.DisplayName);
    zorapCtrlInitialSettings.AvatarImageURL = jsSettings.AvatarImageUrl;
    zorapCtrlInitialSettings.UseBackgroundImage = jsSettings.UseBackgroundImage;
	zorapCtrlInitialSettings.BackgroundImageURL = jsSettings.BackgroundImageURL;
	zorapCtrlInitialSettings.BackgroundImageFillStyle = jsSettings.BackgroundImageFillStyle;
	zorapCtrlInitialSettings.BlendBackgroundImage = jsSettings.BlendBackgroundImage;
    zorapCtrlInitialSettings.ButtonColor = convertColorToCPlusPlusHex(jsSettings.ButtonColor);
	zorapCtrlInitialSettings.ControlColor = convertColorToCPlusPlusHex(jsSettings.ControlColor);
    zorapCtrlInitialSettings.TextColor = convertColorToCPlusPlusHex(jsSettings.TextColor);
    zorapCtrlInitialSettings.PageColor = convertColorToCPlusPlusHex(jsSettings.PageColor);
	zorapCtrlInitialSettings.SetupReport = settings.SetupReport;

    zorapCtrlInitialSettings.CameraId = jsSettings.CameraId;
    zorapCtrlInitialSettings.CameraState = convertBoolToString(jsSettings.CameraState, 'onoff');
    zorapCtrlInitialSettings.CaptureWidth = readCookie('capturewidth', '176');
    zorapCtrlInitialSettings.CaptureHeight = readCookie('captureheight', '144');
    zorapCtrlInitialSettings.CaptureRate = readCookie('capturerate', '15');
    zorapCtrlInitialSettings.Mic = jsSettings.Mic;
    zorapCtrlInitialSettings.WearingHeadset = jsSettings.WearingHeadset;
    zorapCtrlInitialSettings.RecordingLevel = jsSettings.RecordingLevel;
    zorapCtrlInitialSettings.AGCMode = convertBoolToString(jsSettings.AGCMode);
    zorapCtrlInitialSettings.Speakers = jsSettings.Speakers;
    zorapCtrlInitialSettings.PlaybackLevel = jsSettings.PlaybackLevel;
    zorapCtrlInitialSettings.EchoState = jsSettings.EchoState;
    zorapCtrlInitialSettings.TalkLock = convertBoolToString(jsSettings.TalkLock);
}

function convertBoolToString(value, mode)
{
	if(mode == 'onoff')
	{
		return value ? 'on' : 'off';
	}
	return value ? '1' : '0';
}

var	mediaServerIP = null;

var cacheItemWidth = 160;
var cacheItemHeight = 130;

// we want to get called when the page finishes loading
addEventSimple(window, 'load', onLoad);
addEventSimple(window, 'unload', onUnload);
addEventSimple(document, 'contextmenu', onContextMenu);
addEventSimple(document, 'mousemove', onMouseMove);
addEventSimple(document, 'mousedown', onMouseDown);
addEventSimple(document, 'mouseup', onMouseUp);
addEventSimple(window, 'resize', onResize);
addEventSimple(document, 'keydown', onKeyDown);

function onMouseDown()
{
	if(window.parent && window.parent.externRoomMouseDown)
	{
		window.parent.externRoomMouseDown();
	}
}

function onKeyDown(e)
{
	if(isEscKey(e))
	{
		if(window.parent && window.parent.externEscKey)
		{
			window.parent.externEscKey();
		}
	}
}

function onMouseUp() {
    var divLeftSlideBar = document.getElementById('zId_divLeftSlideBar');
    if(divLeftSlideBar) {
        divLeftSlideBar.setArrowImage(false);
    }
    var divRightSlideBar = document.getElementById('zId_divRightSlideBar');
    if(divRightSlideBar) {
        divRightSlideBar.setArrowImage(false);
    }
	slidingThing = null;
	
	if(window.parent && window.parent.externRoomMouseUp)
	{
		window.parent.externRoomMouseUp();
	}

}

var ie = false;
if(window.ActiveXObject) {
	ie = true;
}

var inviteWindow = '';
var helpWindow = '';
var directoryWindow = '';
var profileWindow = '';
var createWindow = '';
var loginWindow = '';
var webPopups = new Array();

var closeProfileWindow = true;

function closePopup(p) {
	if(p) {
		p.close();
		if(p == inviteWindow) inviteWindow = '';
		else if(p == helpWindow) helpWindows = '';
		else if(p == profileWindow) profileWindow = '';
		else if(p == createWindow) createWindow = '';
		else if(p == loginWindow) loginWindow = '';
	}
}

function closePopups() {
	closePopup(inviteWindow);
	closePopup(helpWindow);
	if(closeProfileWindow) {
		closePopup(profileWindow);
	}
	closePopup(createWindow);
	closePopup(loginWindow);
	closeWebPopups();
}

function closeWebPopups()
{
	for(var i = 0; i < webPopups.length; i++)
	{
		try
		{
			webPopups[i].close();
		}
		catch(e) {}
	}
	webPopups.length = 0;
}

function notifyProfileWindow(w) {
	profileWindow = w;
}

function notifyProfileWindowState(state) {
	closeProfileWindow = true;
	if(state == 'cancel') {
		closePopup(profileWindow);
	}
	else if(state == 'done') {
		window.location.reload();
	}
	else if(state == 'save') {
		closeProfileWindow = false;
		window.location.reload();
	}
	else if(state == 'doneRoom') {
		if(jsSettings.IsOwner) {
			if(!jsSettings.IsNewZorap)
			{
				window.location.reload();
			}
			else
			{
				closePopup(profileWindow);
			}
		}
		else {
			closePopup(profileWindow);
		}
	}
	else if(state == 'saveRoom') {
		closeProfileWindow = false;
		if(jsSettings.IsOwner) {
			window.location.reload();
		}
	}
}

function onUnload() {
	closePopups();
	
	saveSetting_bool('leftOpen', getLeftSlideBarState() == 'out', bool_outin);
	saveSetting_bool('rightOpen', getRightSlideBarState() == 'out', bool_outin);
	saveSetting_bool('chatOpen', chatOpen);
	saveSetting('devicesState', devicesState == 'open' ? 'open' : 'closed');
		
	if(startupDialogsDone)
	{
		createCookie('refresh' + settings.GID, 'true', 10);
	}
	
	onUnloadZorapVersion();
}

function fixElementColors(e)
{
	var classNames = e.className.split(' ');
	for(var whichClassName = 0; whichClassName < classNames.length; whichClassName += 1)
	{
		var thisClassName = classNames[whichClassName];
		if(thisClassName == 'zClass_controlColors')
		{
			e.style.borderColor = jsSettings.PageColor;
			e.style.backgroundColor = jsSettings.ControlColor;
		}
		else if(thisClassName == 'zClass_text')
		{
			e.style.color = jsSettings.TextColor;
		}
		else if(thisClassName == 'zClass_divPopupMenu')
		{
			e.style.borderColor = jsSettings.ButtonColor;
		}
		else if(thisClassName == 'zClass_divPopupMenuItem')
		{
			e.style.backgroundColor = jsSettings.PageColor;
		}
		else if(thisClassName == 'zClass_divPopupMenuItem_hover')
		{
			e.style.backgroundColor = jsSettings.ControlColor;
		}
		else if(thisClassName == 'zClass_divPopupMenuItem_inactive')
		{
			e.style.color = jsSettings.ControlColor;
		}
		else if(thisClassName == 'zClass_divPopupMenuItem_sep')
		{
			e.style.borderBottomColor = jsSettings.ButtonColor;
		}
	}
}

var PageColor = 'page_color';
var ControlColor = 'control_color';
var ButtonColor = 'button_color';
var TextColor = 'text_color';

function getColorFromType(colorType)
{
	if(colorType == PageColor)
	{
		return jsSettings.PageColor;
	}
	if(colorType == ControlColor)
	{
		return jsSettings.ControlColor;
	}
	if(colorType == ButtonColor)
	{
		return jsSettings.ButtonColor;
	}
	if(colorType == TextColor)
	{
		return jsSettings.TextColor;
	}
	alert('invalid color');
}

function updateColor(e)
{
	if(e.zColorType)
	{
		e.style.color = getColorFromType(e.zColorType);
	}
}

function updateBorderColor(e)
{
	if(e.zBorderColorType)
	{
		e.style.BorderColor = getColorFromType(e.zBorderColorType);
	}
}

function updateBackgroundColor(e)
{
	if(e.zBackgroundColorType)
	{
		e.style.backgroundColor = getColorFromType(e.zBackgroundColorType);
	}
}

function setColor(e, colorType)
{
	e.style.color = getColorFromType(colorType);
	e.zColorType = colorType;
}

function setBorderColor(e, colorType)
{
	e.style.BorderColor = getColorFromType(colorType);
	e.zBorderColorType = colorType;
}

function setBackgroundColor(e, colorType)
{
	e.style.backgroundColor = getColorFromType(colorType);
	e.zBackgroundColorType = colorType;
}

// covert "#ffffff" or "rgb(255,255,255)" to "0xffffff"
function convertColorToCPlusPlusHex(color)
{
    var c = color.toLowerCase();

    // change to 0x
    if(c.indexOf('#') == 0)
    {
        c = c.replace('#', '0x');
        return c;
    }
    else
    {
        var i = c.indexOf('rgb');
        if(i == 0)
        {
            i = c.indexOf('(');
            if(i > 0)
            {
                c = c.substring(i + 1);
                i = c.indexOf(',');
                if(i > 0)
                {
                    var r = c.substring(0, i);
                    r = r.trim();
                    c = c.substring(i + 1);
                    i = c.indexOf(',');
                    if(i > 0)
                    {
                        var g = c.substring(0, i);
                        g = g.trim();
                        c = c.substring(i + 1);
                        i = c.indexOf(')');
                        if(i > 0)
                        {
                            var b = c.substring(0, i);
                            b = b.trim();
                            
                            var result = "0x";
                            result += (r < 16 ? '0' : '') + parseInt(r).toString(16);
                            result += (g < 16 ? '0' : '') + parseInt(g).toString(16);
                            result += (b < 16 ? '0' : '') + parseInt(b).toString(16);
                            return result;
                       }
                    }
                }
            }
        }
    }
    return "";
}

function onResize() {
	if(ZorapCtrlError.length > 0) return;
	if(!zorapControlsInitialized) return;
	
	var divLeftSlideBar = getById('zId_divLeftSlideBar');
	if(!divLeftSlideBar) return;
	var divRightSlideBar = getById('zId_divRightSlideBar');

	// don't resize if drawers are moving, it's too complicated (but it would take dexterity for the user to even do this)
	var rightSlideBarState = divRightSlideBar.state;// out, disappearing, slidingin, in, slidingout, appearing
	var leftSlideBarState = divLeftSlideBar.state;
	if(rightSlideBarState == 'slidingin' || rightSlideBarState == 'slidingout' ||
		leftSlideBarState == 'slidingin' || leftSlideBarState == 'slidingout') {

		// ensure we do an extra resize a while later
		setTimeout(onResize, slideDuration);

		// don't resize now
		return;
	}
	
	var w = getWinWidth();
	w -= 2 * settings.BorderWidth;
	if(w < settings.MinWidth) w = settings.MinWidth;
	var h = getWinHeight();
	
	var divZorapHeight = h - (settings.IFrameHeaderHeight + settings.IFrameFooterHeight);
	var zorapMargins = settings.ZorapHeaderHeight + settings.ZorapFooterHeight;
	var divMainHeight = divZorapHeight - zorapMargins;
	if(divMainHeight < settings.MinHeight) divMainHeight = settings.MinHeight;
	divZorapHeight = divMainHeight + zorapMargins;

	var divZorap = getById('divZorap');
	var divMain = getById('zId_divMain');
	
	if(w == divZorap.offsetWidth && divZorapHeight == divZorap.offsetHeight) return;
	
	divZorap.style.width = px(w);
	divZorap.style.height = px(divZorapHeight);

	divMain.style.width = px(w);
	divMain.style.height = px(divMainHeight);
	
	var divButtonBar = getById('zId_divButtonBar');
	var divBottom = getById('zId_divBottom');	

	// set a bunch of sizes
	var h1 = divMain.offsetHeight - 2 - divButtonBar.offsetHeight;
	var h2 = h1 - divBottom.offsetHeight;

    divLeftSlideBar.style.height = px(h2);
    divLeftSlideBar.positionArrow();
	
	var rightPanelX = divMain.offsetWidth - divRightSlideBar.offsetWidth;
	var rightOpen = rightSlideBarState == 'out';
	if(rightOpen) {
		if(devicesState == 'open') {
			rightPanelX -= deviceSlideWidth;
		}
		else {
			rightPanelX -= chatSlideWidth;
		}
	}
    divRightSlideBar.style.left = px(rightPanelX);
	divBottom.style.width = px(rightPanelX);
	
	var divScrollingChatArea = getById('zId_divScrollingChatArea');
	divScrollingChatArea.style.left = px(287);
	divScrollingChatArea.style.width = px(rightPanelX - 287 - scrollingChatAreaRightMargin);
    divRightSlideBar.style.height = px(h1);
    divRightSlideBar.positionArrow();
    
    var divCenter = getById('zId_divCenter');
	divCenter.style.height = px(h1);
	divBottom.style.top = px(divCenter.offsetHeight - divBottom.offsetHeight);

	var divLeft = getById('zId_divLeft');
	divLeft.style.display = 'block';
    divLeft.style.height = px(h2);
    var divShareArea = getById('zId_divShareArea');
    divShareArea.style.height = px(h2);

	var divRight = getById('zId_divRight');
	divRight.style.display = 'block';
    divRight.style.height = px(h1);
	divRight.style.left = px(rightPanelX + divRightSlideBar.offsetWidth);
	if(devicesState == 'open') {
		divRight.style.width = px(deviceSlideWidth);
	}
	else {
		divRight.style.width = px(chatSlideWidth);
	}		
    
	var divZorapCtrlArea = getById('zId_divZorapCtrlArea');
    divZorapCtrlArea.style.height = px(h2);
	
	var divDevicePanel = getById('zId_divDevicePanel');
	divDevicePanel.style.display = 'block';

	var divZorapCtrlBackground = getById('zId_divZorapCtrlBackground');
	var divZorapCtrl = getById('zId_divZorapCtrl');
			
	// set the list height...if you don't, the list can suddenly become taller than the div sometimes.
	// and subtract 4 because it looks nicer if the text doesn't go too low.
	var ulHistory = document.getElementById('zId_ulHistory');
	var inputTextChat = document.getElementById('divTextChatBackgroundOuter');
	ulHistory.style.height = px(inputTextChat.offsetTop - ulHistory.offsetTop - 10);

	var leftOpen = leftSlideBarState == 'out';
	if(!leftOpen) {
		setAlpha(divLeft, 1);
		divLeft.style.display = 'none';
	}
	if(!(devicesState == 'open')) {
		divDevicePanel.style.display = 'none';
		showDeviceDropdowns(false);
	}
	if(!rightOpen) {
		setAlpha(divRight, 1);
		divRight.style.display = 'none';
	}
	
	var divErrorMessage = getById('zId_divErrorMessage');
	if(divErrorMessage)
	{
		divErrorMessage.style.left = px(divZorap.offsetWidth - 650);
	}
	var divErrorInfo = getById('zId_divErrorInfo');
	if(divErrorInfo)
	{
		divErrorInfo.style.left = px(divZorap.offsetWidth - 650 + 14);
	}

	var zorapCtrl = getZorapCtrl();
	if(zorapCtrl) {
		zorapCtrl.style.width = px(divZorapCtrlArea.offsetWidth);
		zorapCtrl.style.height = px(divZorapCtrlArea.offsetHeight);
		var leftPanelWidth = divLeft.offsetWidth + divLeftSlideBar.offsetWidth;
		zorapCtrl.SetControlSizeAndClipArea(
			divZorapCtrlArea.offsetWidth, divZorapCtrlArea.offsetHeight,
			leftPanelWidth, 0,
			rightPanelX - leftPanelWidth, divZorapCtrlArea.offsetHeight
			);
	}
	layoutShareButtons();
	layoutDevices();
}

function getPathCustomizedButtonOnControl() {
	var path = fixRoot('/images/custom/customized/') + jsSettings.ButtonColor.substring(1) + '_on_transparent' + '/';
	if(isThisIE6()) {
		path = path.replace('transparent',  jsSettings.ControlColor.substring(1));
	}
	return path;
}

function getPathCustomizedOnControl() {
	var path = fixRoot('/images/custom/customized/') + 'on_transparent' + '/';
	if(isThisIE6()) {
		path = path.replace('transparent',  jsSettings.ControlColor.substring(1));
	}
	return path;
}

function getPathCustomizedOnPage() {
	var path = fixRoot('/images/custom/customized/') + 'on_transparent' + '/';
	if(isThisIE6()) {
		path = path.replace('transparent',  jsSettings.PageColor.substring(1));
	}
	return path;
}

function setImgSrc(img, src) {
	img.src = src;
};

function customButtonWithText(
	parent,
	x, xIsLeft, y,
	buttonDef,
	hoverYOffset
	) {
	this.which = buttonDef.which;
	this.a = document.createElement('a');
	parent.appendChild(this.a);
    this.img = document.createElement('img');
    var path = getPathCustomizedButtonOnControl();
    this.src = path + buttonDef.src;
    setImgSrc(this.img, this.src);
    this.img.style.position = 'absolute';
	
	x = buttonDef.x ? buttonDef.x : x;
	
    if(xIsLeft) {
		this.img.style.left = px(x);
    }
    else {
		this.img.style.right = px(x);
	}
    this.img.style.top = px(y);
    this.img.style.border = 'none';
	this.a.appendChild(this.img);
	this.a.href = '#';
	if(!buttonDef.srcSelected) {
	    this.img.style.cursor = 'default';
	    return;
	}
	
    this.srcSelected = path + buttonDef.srcSelected;
    this.srcText = path + buttonDef.srcText;
    
    this.changeColor = function(oldColor, newColor)
    {
		this.img.src = this.img.src.replace(oldColor, newColor);
		this.src = this.src.replace(oldColor, newColor);	
		this.srcSelected = this.srcSelected.replace(oldColor, newColor);
		this.imgText.src = this.imgText.src.replace(oldColor, newColor);
		this.srcText = this.srcText.replace(oldColor, newColor);	
    }
   
	this.hoverYOffset = hoverYOffset;
	if(hoverYOffset) {
		this.imgText = document.createElement('img');
		setImgSrc(this.imgText, this.srcText);
		this.imgText.style.position = 'absolute';
		this.imgText.style.top = px(y - hoverYOffset);
		this.imgText.style.display = 'none';
		
	    if(buttonDef.textId) {
			this.imgText.id = buttonDef.textId;
		}

		this.imgText.midpoint = x + buttonWidth/2;
		var theX = this.imgText.midpoint - buttonDef.textWidth/2;
		if(xIsLeft) {
			this.imgText.style.left = px(theX);
		}
		else {
			this.imgText.style.right = px(Math.round(theX));
		}

		parent.appendChild(this.imgText);
	}
    this.img.zButton = this;

    this.img.onmousedown = function() {
		setImgSrc(this, this.zButton.srcSelected);
    }
	this.img.onmouseup = function() {
		setImgSrc(this, this.zButton.src);
    }
    this.img.onmouseover = function() {
		if(this.zButton.imgText) {
			this.zButton.imgText.style.display = 'inline';
		}
		else {
			setImgSrc(this, this.zButton.srcText);
		}
    }
    this.img.onmouseout = function() {
		if(this.zButton.imgText) {
			this.zButton.imgText.style.display = 'none';
		}
		setImgSrc(this, this.zButton.src);
	}
    this.img.onclick = buttonDef.onclick;
    
    this.show = function(s)
    {
		showElement(this.a, s);
    }
}

function removeNonAlphaNumeric(str, spacesOk, unicodeOk)
{
	var ret = '';
	for(var i = 0; i < str.length; i++)
	{
		var c = str.charAt(i);
		var cCode = str.charCodeAt(i);
		if(c >= 'a' && c <= 'z')
		{
			ret += c;
		}
		else if(c >= 'A' && c <= 'Z')
		{
			ret += c;
		}
		else if(c >= '0' && c <= '9')
		{
			ret += c;
		}
		else if(spacesOk && c == ' ')
		{
			ret += c;
		}
		else if(unicodeOk && cCode >= 128)
		{
			ret += c;
		}
	}
	return ret;
}

function shareButton(
	parent,
	buttonDef
	)
{
	this.a = document.createElement('a');
	parent.appendChild(this.a);
	this.a.href = '#';
    this.img = document.createElement('img');
    if(buttonDef.type == 'web')
    {
		this.src = fixRoot('/' + buttonDef.imgUrl);
		this.srcSelected = fixRoot('/' + buttonDef.imgUrlS);
		this.linkUrl = buttonDef.linkUrl;
		this.imgWidth = buttonDef.imgWidth;
		this.imgHeight = buttonDef.imgHeight;
		this.popupHeight = buttonDef.popupHeight;
		this.img.onclick = function()
		{
			if(jsSettings.IsNewZorap)
			{
				if(window.parent && window.parent.doShareDialog)
				{
					window.parent.doShareDialog(buttonDef.source);
				}
				return false;
			}
		
			var url = fixRoot('/' + this.zButton.linkUrl);
			url = url.replace('_familySafe', convertBoolToString(settings.FamilySafe));
			var features = buildShareWebMediaWindowFeaturesString(this.zButton.popupHeight);

			var popupWindow = window.open('', removeNonAlphaNumeric(buttonDef.linkUrl, false, false), features);
			if(popupWindow.closed ||
				(!popupWindow.document.URL) || 
				popupWindow.document.URL.indexOf("about") == 0
				)
			{
				popupWindow.location = url;
			}
			else if(popupWindow.document.URL.indexOf(url) < 0)
			{
				popupWindow.location = url;
				if (window.focus) popupWindow.focus();
			}
			else
			{
				if (window.focus) popupWindow.focus();
			}
			
			webPopups.push(popupWindow);
				
		    return false;
		}
    }
    else if(buttonDef.type == 'weblink')
    {
		this.src = fixRoot('/' + buttonDef.imgUrl);
		this.srcSelected = fixRoot('/' + buttonDef.imgUrlS);
		this.a.href = buttonDef.linkUrl;
		this.a.target = '_blank';
		this.imgWidth = buttonDef.imgWidth;
		this.imgHeight = buttonDef.imgHeight;
    }
    else
    {
		this.imgWidth = 48;
		this.imgHeight = 48;
		if(buttonDef.type == 'photo')
		{
		    this.src = fixRoot('/images/share/PhotosButtonD.png');
		    this.srcSelected = fixRoot('/images/share/PhotosButtonS.png');
		    this.img.onclick = onclickSharePhoto;
		}
		else if(buttonDef.type == 'audio')
		{
			this.src = fixRoot('/images/share/MusicButtonD.png');
			this.srcSelected = fixRoot('/images/share/MusicButtonS.png');
		    this.img.onclick = onclickShareMusic;			
		}
		else if(buttonDef.type == 'video')
		{
			this.src = fixRoot('/images/share/VideosButtonD.png');
			this.srcSelected = fixRoot('/images/share/VideosButtonS.png');
			this.img.onclick = onclickShareVideo;
		}
		else if(buttonDef.type == 'file')
		{
			this.src = fixRoot('/images/share/FilesButtonD.png');
			this.srcSelected = fixRoot('/images/share/FilesButtonS.png');
			this.img.onclick = onclickShareDocument;
		}
    }
    this.img.src = this.src;
    this.img.style.position = 'absolute';
	this.img.style.left = px(0);
    this.img.style.top = px(0);
    this.img.style.border = 'none';
	this.a.appendChild(this.img);

    this.img.zButton = this;
    this.img.onmousedown = function()
    {
		setImgSrc(this, this.zButton.srcSelected);
    }
	this.img.onmouseup = function()
	{
		setImgSrc(this, this.zButton.src);
    }
    this.img.onmouseout = function()
    {
		setImgSrc(this, this.zButton.src);
	}    
}

function getRoomUrl()
{
	var retUrl = location.href;
	retUrl = retUrl.toLowerCase();
	retUrl = retUrl.replace('http://www.', 'http://');
		
	return retUrl;
}

function doInvitePopup()
{
	if(popupExists(inviteWindow))
	{
		if(window.focus) {inviteWindow.focus()}
	}
	else
	{
		var url = fixRoot('/Invite/Invite.aspx?gid=' + settings.GID);
		var width = 548;
		var height = 500;
		var resizable = false;
		var scrollbars = false;
		
		var winX = getWinX();
		var winY = getWinY();
		var winWidth = getWinWidth();
		var winHeight = getWinHeight();

		var x = winX + winWidth / 2 - width / 2;
		var y = winY + winHeight / 2 - height / 2;
		
		var features = buildWindowFeaturesString(x, y, width, height, false, false, resizable, scrollbars);

		inviteWindow = window.open(url, 'zorapinvite', features);
		if(window.focus) {inviteWindow.focus()}
	}
    return false;
}

function onClickButtonInvite()
{
	if(!jsSettings.IsNewZorap)
	{
		doInvitePopup();
	}
	else
	{
		if(window.parent && window.parent.doInviteDialog)
		{
			window.parent.doInviteDialog();
		}
	}
    return false;
}

function popupExists(p) {
	if(p && !p.closed && p.location) {
		return true;
	}
	return false;
}
function onClickButtonShare() {
	if(getLeftSlideBarState() == 'out' || 
		getLeftSlideBarState() == 'in') {
		animateLeftSlideBar();
	}
	return false;
}

function getSiteId()
{
	var i = settings.GID.indexOf('/');
	if(i > 0)
	{
		return settings.GID.substring(0, i);
	}
	return '';
}

function onClickButtonRooms() {
	if(popupExists(directoryWindow)) {
		if(window.focus) {directoryWindow.focus()}
	}
	else {
		var url = fixRoot('/Directory/Directory.html');
		var width = 320;
		var height = 275;
		
		var siteId = getSiteId();
		if(siteId)
		{
			var width = 320;
			var height = 310;
			url = fixRoot('/ZorapClubs/ZorapClubsSample.html');
			url += '?siteid=' + siteId;
			url += '&parentroom=' + settings.ParentRoom;
		}
		
		var winX = getWinX();
		var winY = getWinY();
		var winWidth = getWinWidth();
		var winHeight = getWinHeight();

		var x = winX + winWidth / 2 - width / 2;
		var y = winY + winHeight / 2 - height / 2;
		
		var features = buildWindowFeaturesString(x, y, width, height, false, false, false, false);

		directoryWindow = window.open(url, 'zorapdirectory', features);
		if(window.focus) {directoryWindow.focus()}
	}
	return false;
}

function onClickButtonChat() {
	if(getRightSlideBarState() == 'out' || 
		getRightSlideBarState() == 'in') {
		if(devicesState == 'open') {
			chatOpen = true;
			devicesState = 'closing';
		}
		else {
			chatOpen = !chatOpen;
		}
		animateRightSlideBar();
	}
	return false;
}

function onClickButtonCamera()
{
	if(jsSettings.CameraState)
	{
		setCameraState(false);
	}
	else
	{
		setCameraState(true);
	}
	return false;
}

function setCameraState(on)
{
	if(jsSettings.GoodToGo ||
		(!isMac() && !versionCompare(installedVersion, '2,1,1,8')) ||
		(isMac() && !versionCompare(installedVersion, '2,0,3,8'))
		)
	{	
		try
		{
			if(on)
			{
				getZorapCtrl().ConnectToCam(jsSettings.CameraId);
			}
			else
			{
				getZorapCtrl().DisconnectFromCam();
			}
		}
		catch(e) {};
	}
	jsSettings.CameraState = on;
	saveSetting_bool("camstate", jsSettings.CameraState, bool_onoff);
	return false;
}

function onClickButtonSettings() {
	
	if(window.parent && window.parent.doDevicesDialog)
	{
		window.parent.doDevicesDialog();
	}
	else
	{
		openDevices();
	}
	return false;
}

function removeZorapControl()
{
	var divZorapCtrl = document.getElementById('zId_divZorapCtrl');
	if(divZorapCtrl)
	{
		var zorapCtrl = document.getElementById('zId_ZorapCtrl');
		if(zorapCtrl)
		{
			divZorapCtrl.removeChild(zorapCtrl);
			zorapCtrl = null;// needed

			// garbage collection doesn't seem to work in IE unless we add a dummy element
			// and then explicitly call this function
			divZorapCtrl.appendChild(document.createElement('a'));
			try {CollectGarbage()} catch(e) {};// needed
		}
	}	
}

function onClickButtonClose()
{
	if(readCookie_bool('showsurvey', true, bool_truefalse))
	{
		window.location = fixRoot('/Thanks.aspx');
	}
	else
	{
		window.location = location.host;
	}
	return false;
}

function onClickButtonHelp()
{
	if(popupExists(helpWindow))
	{
		if(window.focus) {helpWindow.focus()}
	}
	else {
		var url = fixRoot('/Tutorial/Tutorial.aspx');
		var width = 750;
		var height = 570;
		var resizable = false;
		var scrollbars = false;
		
		var winX = getWinX();
		var winY = getWinY();
		var winWidth = getWinWidth();
		var winHeight = getWinHeight();

		var x = winX + winWidth / 2 - width / 2;
		var y = winY + winHeight / 2 - height / 2;
		
		var features = buildWindowFeaturesString(x, y, width, height, false, false, resizable, scrollbars);

		helpWindow = window.open(url, 'zoraptutoriall', features);
		if(window.focus) {helpWindow.focus()}
	}
    return false;
}

function buildSettingsWindowFeaturesString() {
	var width = 550;
	var height = 510;
	
	if(jsSettings.IsNewZorap)
	{
		height = 572;
	}
	
	var windowFeatures = 'menubar=no,toolbar=no,resizable=not,scrollbars=no';
	var winX = (document.all) ? window.screenLeft : window.screenX;
	var winY = (document.all) ? window.screenTop : window.screenY;
	var winWidth = (document.all) ? document.body.clientWidth : window.innerWidth;
	var winHeight = (document.all) ? document.body.clientHeight : window.innerHeight;
	windowFeatures += ',width=_width,height=_height,screenX=_x,screenY=_y,left=_x,top=_y';
	windowFeatures = replaceAll(windowFeatures, '_height', height);
	windowFeatures = replaceAll(windowFeatures, '_width', width);
	windowFeatures = replaceAll(windowFeatures, '_x', winX + winWidth / 2 - width / 2);
	windowFeatures = replaceAll(windowFeatures, '_y', winY + winHeight / 2 - height / 2);
	return windowFeatures;
}

function buildCreateWindowFeaturesString() {
	var width = 500;
	var height = 276;
	var windowFeatures = 'menubar=no,toolbar=no,resizable=not,scrollbars=no';
	var winX = (document.all) ? window.screenLeft : window.screenX;
	var winY = (document.all) ? window.screenTop : window.screenY;
	var winWidth = (document.all) ? document.body.clientWidth : window.innerWidth;
	var winHeight = (document.all) ? document.body.clientHeight : window.innerHeight;
	windowFeatures += ',width=_width,height=_height,screenX=_x,screenY=_y,left=_x,top=_y';
	windowFeatures = replaceAll(windowFeatures, '_height', height);
	windowFeatures = replaceAll(windowFeatures, '_width', width);
	windowFeatures = replaceAll(windowFeatures, '_x', winX + winWidth / 2 - width / 2);
	windowFeatures = replaceAll(windowFeatures, '_y', winY + winHeight / 2 - height / 2);
	return windowFeatures;
}

function buildLoginWindowFeaturesString() {
	var width = 456;
	var height = 256;
	var windowFeatures = 'menubar=no,toolbar=no,resizable=not,scrollbars=no';
	var winX = (document.all) ? window.screenLeft : window.screenX;
	var winY = (document.all) ? window.screenTop : window.screenY;
	var winWidth = (document.all) ? document.body.clientWidth : window.innerWidth;
	var winHeight = (document.all) ? document.body.clientHeight : window.innerHeight;
	windowFeatures += ',width=_width,height=_height,screenX=_x,screenY=_y,left=_x,top=_y';
	windowFeatures = replaceAll(windowFeatures, '_height', height);
	windowFeatures = replaceAll(windowFeatures, '_width', width);
	windowFeatures = replaceAll(windowFeatures, '_x', winX + winWidth / 2 - width / 2);
	windowFeatures = replaceAll(windowFeatures, '_y', winY + winHeight / 2 - height / 2);
	return windowFeatures;
}

function onClickCustomizeRoom() {

	if(window.parent && window.parent.doCustomizeRoomDialog)
	{
		if(!jsSettings.IsOwner)
		{
			alert('You must be the page owner or admin to customized the room.');
			return false;
		}
			
		window.parent.doCustomizeRoomDialog(settings.GID);
		return false;
	}

	if(popupExists(profileWindow)) {
		if(window.focus) {profileWindow.focus()}
	}
	else {
		if(!jsSettings.IsNewZorap)
		{
			if(!settings.Authenticated)
			{
				alert('Please sign in to customize your room.');
				return false;
			}
		}
	
		var url = fixRoot('/Account/Profile/Room.aspx');
		var features = buildSettingsWindowFeaturesString();
		profileWindow = window.open(url, 'zorapsettings', features);
		if(window.focus) {profileWindow.focus()}
	}
    return false;
}

function onClickSettings() {
	if(popupExists(profileWindow)) {
		if(window.focus) {profileWindow.focus()}
	}
	else {
		var url = fixRoot('/Account/Profile/Account.aspx');
		var features = buildSettingsWindowFeaturesString();
		profileWindow = window.open(url, 'zorapsettings', features);
		if(window.focus) {profileWindow.focus()}
	}
    return false;
}

function removeChangeMyName() {
	var divChangeMyName = getById('zId_divChangeMyName');
	if(divChangeMyName) {
		divChangeMyName.parentNode.removeChild(divChangeMyName);
	}
}

function prependTemp(Name)
{
	if(!jsSettings.IsNewZorap &&
		!settings.Instant && 
		!settings.ClubRoom &&
		!settings.Authenticated
		)
	{
		if(Name.toLowerCase().indexOf('visitor.') != 0)
		{
			return 'visitor.' + Name;
		}
	}
	return Name;
}

function changeMyName(NewName, validate, invent)
{
	var newName = NewName;
	
	if(validate)
	{
		newName = removeNonAlphaNumeric(NewName, true, true);

		if(newName.length > 0)
		{
			// save it for next time
			saveSettingUnicode('dnunicode', newName);
		}
		else // if string is empty...
		{
			if(invent)
			{
				// if blank on Welcome screen, make one up
				newName = '' + Math.floor(Math.random()*10000);
			}
			else return;
		}
	}
	jsSettings.DisplayName = newName;

	// tell Zorap
	zorapCtrlChangeMyName(jsSettings.DisplayName);
	
	// set UI
	setProfileAreaName();
}

function zorapCtrlChangeMyName(name)
{
	try
	{
		getZorapCtrl().SetSetting('DisplayName', prependTemp(name));
		hackLateChangeMyName = false;
	}
	catch(e) {}
	try
	{
		getZorapCtrl().ChangeMyName(prependTemp(name));
	}
	catch(e) {}
}

function changeMyImage(NewImage)
{
	jsSettings.AvatarImageUrl = NewImage;
	try
	{
		getZorapCtrl().SetSetting('AvatarImageUrl', NewImage);
	}
	catch(e) {}
	try
	{
		getZorapCtrl().ChangeMyImage(NewImage);
	}
	catch(e) {}
}

var fadeDurationChangeMyName = 200;
function fadeInChangeMyName() {
	var divChangeMyName = getById('zId_divChangeMyName');
	var divProfileArea = getById('zId_divProfileArea');
	if(divChangeMyName && divProfileArea) {
		var dateTime = new Date();
		var elapsed = dateTime.getTime() - divChangeMyName.fadeInStartTime;

		var alpha = Math.round(elapsed*100/fadeDurationChangeMyName);
		if(alpha >= 100) {
			setAlpha(divChangeMyName, 100);
		}
		else {
			setAlpha(divChangeMyName, alpha);
			setTimeout(fadeInChangeMyName, 20);
		}
		var alpha2 = 100 - alpha;
		if(alpha2 <= 0) {
			divProfileArea.display = 'none';
		}
		else {
			setAlpha(divProfileArea, alpha2);
		}		
	}
}

function fadeOutChangeMyName() {
	var divChangeMyName = getById('zId_divChangeMyName');
	var divProfileArea = getById('zId_divProfileArea');
	if(divChangeMyName && divProfileArea) {
		var dateTime = new Date();
		var elapsed = dateTime.getTime() - divChangeMyName.fadeOutStartTime;

		var alpha = 100 - Math.round(elapsed*100/fadeDurationChangeMyName);
		if(alpha <= 0) {
			removeChangeMyName();
		}
		else {
			setAlpha(divChangeMyName, alpha);
			setTimeout(fadeOutChangeMyName, 20);
		}
		var alpha2 = 100 - alpha;
		divProfileArea.display = 'block';
		if(alpha2 >= 100) {
			setAlpha(divProfileArea, 100);
		}
		else {
			setAlpha(divProfileArea, alpha2);
		}		
	}
}

function startFadeOutChangeMyName() {
	var divChangeMyName = getById('zId_divChangeMyName');
	if(divChangeMyName) {
		var dateTime = new Date();
		divChangeMyName.fadeOutStartTime = dateTime.getTime();		
		setTimeout(fadeOutChangeMyName, 20);
	}
}

function setSex(sex)
{
	var oldAvatarImage = jsSettings.AvatarImage;
	saveSetting('sx', sex);
	jsSettings.AvatarImage = settings.DataDirectory + '/DefaultAvatarImage.png';
	if(sex == 'female')
	{
		jsSettings.AvatarImage = settings.DataDirectory + '/DefaultAvatarImageF.png';
	}
	if(settings.AvatarImage != oldAvatarImage)
	{
		try
		{
			getZorapCtrl().ChangeMyImage(jsSettings.AvatarImage);
		}
		catch(e) {};
	}
}

function onClickChangeMyName() {
	var divChangeMyName = getById('zId_divChangeMyName');
	if(divChangeMyName) return;
	
	var divChangeMyName = div('zId_divChangeMyName');
	setElementClassName(divChangeMyName, 'zClass_text zClass_textSmaller');
	setBackgroundColor(divChangeMyName, PageColor);//xxx
	var dateTime = new Date();
	divChangeMyName.fadeInStartTime = dateTime.getTime();
	
	var spanChangeMyName = span();
	spanChangeMyName.innerHTML = 'Your Name: ';
	divChangeMyName.appendChild(spanChangeMyName);
		
	var inputChangeName = input('text', 'zId_inputChangeMyName', 'zClass_text zClass_textSmaller');
    setBackgroundColor(inputChangeName, TextColor);//xxx
    setColor(inputChangeName, ControlColor);//xxx
    inputChangeName.value = jsSettings.DisplayName;

	fixSelect(inputChangeName);

    inputChangeName.onkeydown = function(e) {
		if(isEnterKey(e)) {
			changeMyName(this.value, true, false);
			startFadeOutChangeMyName();
			return false;
		}
		if(this.value.length > 40) return false;
    }
	divChangeMyName.appendChild(inputChangeName);
	
	divChangeMyName.appendChild(space());
	
	var aSaveNameMale = document.createElement('a');
	setElementClassName(aSaveNameMale, 'zClass_text zClass_textSmaller');
	aSaveNameMale.href = '#';
	aSaveNameMale.innerHTML = 'Male';
	aSaveNameMale.onclick = function() {
		var inputChangeMyName = getById('zId_inputChangeMyName');
		if(inputChangeMyName) {
			changeMyName(inputChangeMyName.value, true, false);
		}
		startFadeOutChangeMyName();
		setSex('male');
		return false;
	}
	divChangeMyName.appendChild(aSaveNameMale);
	
	divChangeMyName.appendChild(space());
	
	var aSaveNameFemale = document.createElement('a');
	setElementClassName(aSaveNameFemale, 'zClass_text zClass_textSmaller');
	aSaveNameFemale.href = '#';
	aSaveNameFemale.innerHTML = 'Female';
	aSaveNameFemale.onclick = function() {
		var inputChangeMyName = getById('zId_inputChangeMyName');
		if(inputChangeMyName) {
			changeMyName(inputChangeMyName.value, true, false);
		}
		startFadeOutChangeMyName();
		setSex('female');
		return false;
	}
	divChangeMyName.appendChild(aSaveNameFemale);
	
	divChangeMyName.appendChild(space());

	var aCancelName = document.createElement('a');
	setElementClassName(aCancelName, 'zClass_text zClass_textSmaller');
	aCancelName.href = '#';
	aCancelName.innerHTML = 'Cancel';
	aCancelName.onclick = function() {
		startFadeOutChangeMyName();
		return false;
	}
	divChangeMyName.appendChild(aCancelName);
	
	divChangeMyName.appendChild(space());

	var divZorap = getById('divZorap');
	if(divZorap) {
		divZorap.appendChild(divChangeMyName);
	}
    inputChangeName.select();
    
	setAlpha(divChangeMyName, 0);    
    setTimeout(fadeInChangeMyName, 20);
    
    return false;
}

function onClickSignIn() {
	if(popupExists(loginWindow)) {
		if(window.focus) {loginWindow.focus()}
	}
	else {
		var url = fixRoot('/Account/Login2.aspx');
		var features = buildLoginWindowFeaturesString();
		loginWindow = window.open(url, 'zoraplogin', features);
		if(window.focus) {loginWindow.focus()}
	}
    return false;
}

eraseCookie("signout");
function onClickSignOut() {
	createCookie("signout", "true", 1 * 60);
	window.location.reload();
	return false;
}

var buttonY = 26;
var buttonX = 288;
var buttonXNew = 115;
var buttonSep = 30;
var buttonWidth = 17;
var helpButtonX = 36;
var closeButtonX = 9;
var buttonTextOffsetY = 16;
var settingsButtonX = 74;
var buttonY2 = 28;

var buttonDefs = new Array();
function addButtons()
{
	buttonDefs.push(new Object({ 'src':'roombuttoninvite.png', 'srcSelected':'roombuttoninvites.png', 'srcText':'RoomButtonInviteText.png', 'textWidth':30, 'onclick':onClickButtonInvite }));
	buttonDefs.push(new Object({ 'src':'roombuttonsettings.png', 'srcSelected':'roombuttonsettingss.png', 'srcText':'roombuttonsettingstext.png', 'textWidth':44, 'onclick':onClickButtonSettings }));
	buttonDefs.push(new Object({ 'which':'customize', 'src':'roombuttoncustomize.png', 'srcSelected':'roombuttoncustomizes.png', 'srcText':'roombuttoncustomizetext.png', 'textWidth':50, 'onclick':onClickCustomizeRoom }));
	buttonDefs.push(new Object({ 'src':'roombuttonbrb.png', 'srcSelected':'roombuttonbrbs.png', 'srcText':'RoomButtonBRBOnText.png', 'textWidth':62, 'onclick':toggleBRB, 'textId':'zId_BRBButtonText' }));

	buttonDefs.push(new Object({ 'src':'roombuttonwebcam.png', 'srcSelected':'roombuttonwebcams.png', 'srcText':'RoomButtonWebcamOnText.png', 'textWidth':83, 'onclick':onClickButtonCamera, 'textId':'zId_CameraButton' }));
	buttonDefs.push(new Object({ 'which':'mic', 'src':'roombuttonmic.png', 'srcSelected':'roombuttonmics.png', 'srcText':'RoomButtonMicOnText.png', 'textWidth':60, 'onclick':toggleLock, 'textId':'zId_MicButtonText' }));
}

var closeButtonDef = new Object(
	{ 'src':'closebutton2.png', 'srcSelected':'closebutton2s.png', 'srcText':'CloseWord2.png', 'textWidth':28, 'onclick':onClickButtonClose }
);
var helpButtonDef = new Object(
{
	'src':'helpbutton.png', 'srcSelected':'helpbuttons.png', 'srcText':'HelpWord.png', 'textWidth':22, 'onclick':onClickButtonHelp }
);
var customizeRoomButtonDef = new Object(
	{ 'src':'CustomRoomWord.png', 'srcSelected':'CustomRoomWords.png', 'srcText':'CustomRoomWordh.png', 'textWidth':0, 'onclick':onClickCustomizeRoom }
);

var shareButtonDefs = null;
function addShareButtons()
{
	try
	{
		var d = eval("(" + customShareButtonDefsString + ")");
		shareButtonDefs = d.buttons;
	}
	catch(e)
	{
		var defaultShareButtons = new Array();

		if(jsSettings.IsNewZorap)
		{
			var b = new Object({ "type":"web", "source":"watch_source_hulu", "imgUrl":"images/share/HuluButtonD.png", "imgUrlS":"images/share/HuluButtonS.png", "imgWidth":48, "imgHeight":48 });
			defaultShareButtons.push(b);
		}
		defaultShareButtons.push(new Object({ "type":"web", "source":"watch_source_youtube", "imgUrl":"images/share/YouTubeButtonD.png", "imgUrlS":"images/share/YouTubeButtonS.png", "imgWidth":48, "imgHeight":48, "linkUrl":"shareyoutube.html?f=_familySafe" }));
		defaultShareButtons.push(new Object({ "type":"web", "source":"watch_source_googleimages", "imgUrl":"images/share/GoogleImagesButtonD.png", "imgUrlS":"images/share/GoogleImagesButtonS.png", "imgWidth":48, "imgHeight":48, "linkUrl":"sharegoogle.html?f=_familySafe" }));

		if(jsSettings.IsNewZorap)
		{
			var b = new Object({ "type":"web", "source":"watch_source_facebook", "imgUrl":"images/share/FacebookButtonD.png", "imgUrlS":"images/share/FacebookButtonS.png", "imgWidth":48, "imgHeight":48 });
			defaultShareButtons.push(b);
		}

		defaultShareButtons.push(new Object({ "type":"photo" }));
		defaultShareButtons.push(new Object({ "type":"audio" }));
		defaultShareButtons.push(new Object({ "type":"video" }));
		defaultShareButtons.push(new Object({ "type":"file" }));

		shareButtonDefs = defaultShareButtons;
	}
}

function createButtonBar(parent)
{
    var divButtonBar = document.createElement('div');
    divButtonBar.id = 'zId_divButtonBar';
    setElementClassName(divButtonBar, 'zClass_controlColors');
    parent.appendChild(divButtonBar);
	return divButtonBar;
}

var buttons = new Array();
var zButtons = new Array();

function createButtons()
{
	if(jsSettings.IsFanPage && window.parent && window.parent.checkFanPageOwnership)
	{
		window.parent.checkFanPageOwnership(
				jsSettings.ModeratorId,
				function(isOwner)
				{
					jsSettings.IsOwner = isOwner;
					createButtons1();
				}
			);
	}
	else
	{
		createButtons1();
	}
}

function createButtons1()
{
	var divButtonBar = getById('zId_divButtonBar');
	
	jsGlobalObjects.transferStatusIndicator = new TransferStatusIndicator(divButtonBar);

	var x = buttonX;
    if(jsSettings.IsNewZorap)
    {
		x = buttonXNew;
    }
    else
    {
		var roomName = settings.RoomName;
		if(roomName) {
			var spanRoomName = document.createElement('span');
			spanRoomName.id = 'zId_spanRoomName';
			setElementClassName(spanRoomName, 'zClass_text');
			setColor(spanRoomName, ButtonColor);//xxx
			spanRoomName.innerHTML = roomName;
			divButtonBar.appendChild(spanRoomName);
		}
		if(roomName != jsSettings.ModeratorDisplayName) {
			var spanDisplayName = document.createElement('span');
			spanDisplayName.id = 'zId_spanModeratorDisplayName';
			setElementClassName(spanDisplayName, 'zClass_text');
			setColor(spanDisplayName, ButtonColor);//xxx
			spanDisplayName.innerHTML = jsSettings.ModeratorDisplayName;
			divButtonBar.appendChild(spanDisplayName);
		}
	}
	if(jsSettings.IsNewZorap)
	{
		var imgAvatar = img();
		imgAvatar.style.position = 'absolute';
		imgAvatar.style.left = px(22);
		imgAvatar.style.top = px(3);
		imgAvatar.style.width = px(44);
		imgAvatar.style.height = px(44);
		imgAvatar.src = jsSettings.FacebookOwnerPicSquare;
		divButtonBar.appendChild(imgAvatar);		
	}
	else if(isThisIE6()) {
		var imgAvatar = img();
		imgAvatar.style.position = 'absolute';
		imgAvatar.style.left = px(17);
		imgAvatar.style.top = px(10);
		imgAvatar.src = fixRoot('/images/custom/customized/avatar/' + settings.ParentRoom + '_opaque.png');
		divButtonBar.appendChild(imgAvatar);
	}
	else {
		var imgAvatar = img();
		imgAvatar.style.position = 'absolute';
		imgAvatar.style.left = px(17);
		imgAvatar.style.top = px(10);
		imgAvatar.src = fixRoot('/images/custom/customized/avatar/' + settings.ParentRoom + '.png');
		divButtonBar.appendChild(imgAvatar);

		var imgAvatarFrame = img();
		imgAvatarFrame.style.position = 'absolute';
		imgAvatarFrame.style.left = px(17);
		imgAvatarFrame.style.top = px(10);
		imgAvatarFrame.src = getPathCustomizedButtonOnControl() + 'AvatarFrame.png';
		divButtonBar.appendChild(imgAvatarFrame);
	}

	for(var whichButton = 0; whichButton < buttonDefs.length; whichButton++)
	{
		var buttonDef = buttonDefs[whichButton];
		if(buttonDef.which != 'customize' || jsSettings.IsOwner)
		{
			buttons.push(new customButtonWithText(divButtonBar, x, true, buttonY, buttonDef, buttonTextOffsetY));
			x += buttonSep;
		}
	}
	createTalkControl(divButtonBar);
	
	if(jsSettings.IsNewZorap)
	{
		jsGlobalObjects.speakerSlider = new Slider(
			divButtonBar, null, 29, 51, null, 
			getPathCustomizedButtonOnControl() + 'RoomVolumeBar.png', 
			getPathCustomizedButtonOnControl() + 'RoomVolumeBar.png', 
			61, 3, 
			getPathCustomizedButtonOnControl() + 'RoomVolumeSlider.png', 
			getPathCustomizedButtonOnControl() + 'RoomVolumeSlider.png', 
			10, 10, 0, -3,
			getPathCustomizedButtonOnControl() + 'RoomVolumeText.png', 
			39, 9, 12, -21,
			255,
			function(level)
			{
				onSlideSpeak(level);
				
				var speakSlider = getById('zId_speakSlider');
				if(speakSlider) speakSlider.moveFromStringValue('' + level);
			}
		);
		jsGlobalObjects.speakerSlider.setLevel(jsSettings.PlaybackLevel);
	}
}

function createTalkButton(parent) {
	var aTalkButton = document.createElement('a');
	aTalkButton.href = '#';
	parent.appendChild(aTalkButton);
	var imgTalkButton = document.createElement('img');
	imgTalkButton.id = 'zId_imgTalkButton';
	var talkButtonUrl = getPathCustomizedButtonOnControl() + 'RoomButtonPushToTalk.png';
	setImgSrc(imgTalkButton, talkButtonUrl);
	
	if(!jsSettings.IsNewZorap || jsSettings.UserChoseUsePTT)
	{
	}
	else
	{
		imgTalkButton.style.display = 'none';
	}

	imgTalkButton.onmousedown = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'RoomButtonPushToTalkS.png');
		setBRB(false);
		setLock(false);
		onPushAir(true);
		try {
			getZorapCtrl().SetTalkMode(1, 1);
		} catch(e) {}
		this.talking = true;
		return false;
    }
	imgTalkButton.onmouseup = function() {
		if(this.talking) {
			this.doneTalking();
		}
		return false;
    }
    imgTalkButton.onmouseout = function() {
		if(this.talking) {
			this.doneTalking();
		}
		return false;
	}
    imgTalkButton.onmousemove = function() {
		return false;
	}
	imgTalkButton.onclick = function() {
		return false;
	}
	imgTalkButton.doneTalking = function() {
		this.talking = false;
		try {
			getZorapCtrl().SetTalkMode(0, 0);
		} catch(e) {}
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'RoomButtonPushToTalk.png');
		onPushAir(false);
	}
	
	aTalkButton.appendChild(imgTalkButton);
	
	var imgOnAir = document.createElement('img');
	imgOnAir.id = 'zId_imgOnAir';
	setImgSrc(imgOnAir, getPathCustomizedButtonOnControl() + 'onair.png');
	imgOnAir.style.position = 'absolute';
	imgOnAir.style.left = px(imgTalkButton.offsetLeft - 1);
	imgOnAir.style.top = px(18);
	imgOnAir.style.display = 'none';
	parent.appendChild(imgOnAir);
}

function onLockAir(mode)
{
	var imgOnAir = document.getElementById('zId_imgOnAir');
	var imgTalkButton = document.getElementById('zId_imgTalkButton');
	if(mode)
	{
		imgOnAir.style.display = 'block';
		imgTalkButton.style.display = 'none';
	}
	else
	{
		imgOnAir.style.display = 'none';
		if(!jsSettings.IsNewZorap || jsSettings.UserChoseUsePTT)
		{
			imgTalkButton.style.display = 'block';
		}
	}
}

function brbUpdateUI()
{
	var imgOnAir = document.getElementById('zId_imgOnAir');
	imgOnAir.style.display = 'none';
	var imgTalkButton = document.getElementById('zId_imgTalkButton');
	imgTalkButton.style.display = 'none';
	
	updateMicUI(false);
}

function onPushAir(mode)
{
	updateMicUI(mode);
}

function createTalkControl(parent)
{
	var divTalkControl = document.createElement('div');
	divTalkControl.id = 'zId_divTalkControl';
	parent.appendChild(divTalkControl);
	
	createTalkButton(divTalkControl);
	var talkLockOn = jsSettings.TalkLock;
	onLockAir(talkLockOn);
	createCustomCheckbox(divTalkControl, brbCheckboxDef, false, true);
	createCustomCheckbox(divTalkControl, lockCheckboxDef, talkLockOn, true);
	
	updateMicUI(talkLockOn);
}

function getCheckboxUrl(mode) {
	if(mode) {
		return getPathCustomizedButtonOnControl() + 'checkboxchecked.png';
	}
	else {
		return getPathCustomizedButtonOnControl() + 'checkbox.png';
	}
}

function getCheckbox2Url(mode) {
	if(mode) {
		return getPathCustomizedButtonOnControl() + 'checkbox2checked.png';
	}
	else {
		return getPathCustomizedButtonOnControl() + 'checkbox2.png';
	}
}

function SignalCameraResolutionChanged(Width, Height, Rate) {
	saveSetting("capturewidth", Width);
	saveSetting("captureheight", Height);
	saveSetting("capturerate", Rate);
}

function setBRB(mode) {
	var imgBRB = document.getElementById('zId_imgBRB');
	imgBRB.zchecked = mode;
	setImgSrc(imgBRB, getCheckbox2Url(mode));
	
	var img = getById('zId_BRBButtonText');
	if(img)
	{
		if(mode)
		{
			setImgSrc(img, getPathCustomizedButtonOnControl() + 'RoomButtonBRBOffText.png');
			img.style.width = px(66);
			img.style.left = px(img.midpoint - 66/2);
		}
		else
		{
			setImgSrc(img, getPathCustomizedButtonOnControl() + 'RoomButtonBRBOnText.png');
			img.style.width = px(62);
			img.style.left = px(img.midpoint - 62/2);
		}
	}

	try {
		getZorapCtrl().SetBRBMode(mode ? 1 : 0);
	} catch(e) {}
}

function toggleBRB() {
	var imgBRB = document.getElementById('zId_imgBRB');
	if(!imgBRB) return false;
	setBRB(!imgBRB.zchecked);
	
	if(imgBRB.zchecked) {
		brbUpdateUI(false);
	}
	else {
		var imgLock = document.getElementById('zId_imgLock');
		if(!imgLock) return false;
		if(imgLock.zchecked) {
			onLockAir(true);
			
			updateMicUI(true);
		}
		else
		{
			if(!jsSettings.IsNewZorap || jsSettings.UserChoseUsePTT)
			{
				var imgTalkButton = document.getElementById('zId_imgTalkButton');
				imgTalkButton.style.display = 'block';
			}
		}
	}

	return false;
}

function updateMicUI(mode)
{
	var imgLock = document.getElementById('zId_imgLock');
	setImgSrc(imgLock, getCheckbox2Url(mode));
	var img = getById('zId_MicButtonText');
	if(img)
	{
		if(mode)
		{
			setImgSrc(img, getPathCustomizedButtonOnControl() + 'RoomButtonMicOffText.png');
			img.style.width = px(64);
			img.style.left = px(img.midpoint - 64/2);
		}
		else
		{
			setImgSrc(img, getPathCustomizedButtonOnControl() + 'RoomButtonMicOnText.png');
			img.style.width = px(60);
			img.style.left = px(img.midpoint - 60/2);
		}
	}
}

function setLock(mode)
{
	if(mode)
	{
		setBRB(false);
	}
	if(zorapCtrlSetLock(mode))
	{
		jsSettings.TalkLock = mode;
		saveSetting_bool('talklock', mode);

		var imgLock = document.getElementById('zId_imgLock');
		imgLock.zchecked = mode;
		updateMicUI(mode);
				
		if(mode)
		{
			onLockAir(true);
		}
		else
		{
			onLockAir(false);
		}
	}
}

function zorapCtrlSetLock(on)
{
	try
	{
		getZorapCtrl().SetTalkMode(on ? 1 : 0, 0);
		return true;
	}
	catch(e)
	{
		return false;
	}
}

function toggleLock() {
	var imgLock = document.getElementById('zId_imgLock');
	setLock(!imgLock.zchecked);
	return false;
}

function setAutoAdjust(auto)
{
	try
	{
		getZorapCtrl().SetAGCMode(mode ? 1 : 0);
		jsSettings.AGCMode = mode;
		saveSetting_bool("agcmode", mode);
	} catch(e) {}
}

function setAGC(mode)
{
	try
	{
		getZorapCtrl().SetAGCMode(mode ? 1 : 0);
		jsSettings.AGCMode = mode;
		
		var imgAGC = document.getElementById('zId_imgAGC');
		imgAGC.zchecked = mode;
		setImgSrc(imgAGC, getCheckboxUrl(mode));
		
		var micSlider = document.getElementById('zId_micSlider');
		if(micSlider) micSlider.zenable(!mode);

		saveSetting_bool("agcmode", mode);
	} catch(e) {}
}

function toggleAGC() {
	var imgAGC = document.getElementById('zId_imgAGC');
	setAGC(!imgAGC.zchecked);
	return false;
}

var brbCheckboxDef = new Object(
	{ 'id':'zId_brbCheckbox', 'srcLabel':'brb.png', 'idImg':'zId_imgBRB', 'x':48, 'y':27, 'onclick':toggleBRB, 'alignRight':true }
);
var lockCheckboxDef = new Object(
	{ 'id':'zId_lockCheckboxDef', 'srcLabel':'micon.png', 'idImg':'zId_imgLock', 'x':48, 'y':13, 'onclick':toggleLock, 'alignRight':true }
);
var agcCheckboxDef = new Object(
	{ 'id':'zId_agcCheckbox', 'textLabel':'Auto', 'idImg':'zId_imgAGC', 'x':200, 'y':0, 'onclick':toggleAGC, 'alignRight':false }
);

function slideMic(level)
{
	try
	{
		getZorapCtrl().SetRecordingLevel(level);
		jsSettings.RecordingLevel = level;		
		saveSetting("miclevel", level);
	} catch(e) {}
}
function onSlideSpeak(level)
{
	try
	{
		getZorapCtrl().SetPlaybackLevel(level);
		jsSettings.PlaybackLevel = level;
		saveSetting("speakerlevel", level);
	} catch(e) {}
}
function slideSpeak(level)
{
	onSlideSpeak(level);
	if(jsGlobalObjects.speakerSlider)
	{
		jsGlobalObjects.speakerSlider.setLevel(level);
	}
}
function updateDevices() {
	try {
		if(devicesState == 'open') {
			var level = getZorapCtrl().GetRecordingLevel();
			var micSlider = document.getElementById('zId_micSlider');
			if(micSlider) {
				if(!micSlider.zenabled) {
					micSlider.moveFromStringValue(level);
				}
			}
			setTimeout(updateDevices, 500);
		}
	} catch(e) {}
}

var micSliderDef = new Object(
	{ 'id':'zId_micSlider', 'onslide':slideMic }
);
var speakSliderDef = new Object(
	{ 'id':'zId_speakSlider', 'onslide':slideSpeak }
);
var slidingThing = null;
var slidingThingAbsX = null;
var slidingThingRelX = null;
var sliderWidth = 72;
function createCustomSlider(parent, sliderDef, rangeMin, rangeMax, initValue, left, top, enabled) {
	var divSlider = div(sliderDef.id);
	divSlider.zenabled = enabled;
	divSlider.rangeMin = rangeMin;
	divSlider.rangeMax = rangeMax;
	divSlider.style.position = 'absolute';
	divSlider.style.left = px(left);
	divSlider.style.top = px(top);
	divSlider.style.display = 'inline';
	divSlider.zSlide = sliderDef.onslide;
	parent.appendChild(divSlider);
	divSlider.move = function(newX) {
		var elements = this.getElementsByTagName('img');
		elements[1].zX = newX;
		elements[1].style.left = px(newX - 1);
		var range = rangeMax - rangeMin;
		divSlider.zSlide(Math.round(range*newX/sliderWidth));
	}
	divSlider.moveFromStringValue = function(value) {
		var v = parseInt(value, 10);
		var range = rangeMax - rangeMin;
		var x = Math.round(v * sliderWidth / range);
		var elements = this.getElementsByTagName('img');
		elements[1].zX = x;
		elements[1].style.left = px(x - 1);
	}
	divSlider.trans = function(delta) {
		var moved = delta;
		var elements = this.getElementsByTagName('img');
		var oldX = slidingThing.zX;
		var newX = oldX + delta;
		var minX = 0;
		if(newX < minX) {
			newX = minX;
			moved = minX - oldX;
		}
		var maxX = sliderWidth;
		if(newX > maxX) {
			newX = maxX;
			moved = maxX - oldX;
		}
		this.move(newX);
		return moved;
	}
	divSlider.getBackImage = function() {
		if(this.zenabled) {
			return getPathCustomizedButtonOnControl() + 'slider.png';
		}
		else {
			return getPathCustomizedButtonOnControl() + 'sliderbard.png';
		}
	}
	divSlider.getBarImage = function() {
		if(this.zenabled) {
			return getPathCustomizedButtonOnControl() + 'sliderbar.png';
		}
		else {
			return getPathCustomizedButtonOnControl() + 'sliderd.png';
		}
	}
	divSlider.zenable = function(e) {
		this.zenabled = e;
		var elements = this.getElementsByTagName('img');
		setImgSrc(elements[0], this.getBackImage());
		setImgSrc(elements[1], this.getBarImage());
	}
	
	var imgBack = img();
	imgBack.style.position = 'absolute';
	imgBack.style.left = px(0);
	imgBack.style.top = px(4);
	imgBack.divSlider = divSlider;
	setImgSrc(imgBack, divSlider.getBackImage());
	imgBack.onmouseup = function(e) {
		if(this.divSlider.zenabled) {
			var relX = eventGetRelX(e);
			this.divSlider.move(relX);
		}
	}
	imgBack.onmousemove = function(e) {
		return false;
	}
	imgBack.onmousedown = function(e) {
		return false;
	}

	divSlider.appendChild(imgBack);

	var imgBar = img();
	imgBar.style.position = 'absolute';
	imgBar.style.left = px(0);
	imgBar.style.top = px(0);
	setImgSrc(imgBar, divSlider.getBarImage());

	imgBar.onmousemove = function(e) {
		return false;
	}
	imgBar.divSlider = divSlider;
	imgBar.onmousedown = function(e) {
		if(this.divSlider.zenabled) {
			slidingThing = this;
			slidingThingAbsX = eventGetAbsX(e);
			slidingThingRelX = eventGetRelX(e);
		}
		return false;
	}
	divSlider.appendChild(imgBar);
	divSlider.moveFromStringValue(initValue);
}

function createCustomCheckbox(parent, checkboxDef, checked, hide)
{
	var div = document.createElement('div');
	div.id = checkboxDef.id;
	div.style.position = 'absolute';
	if(checkboxDef.alignRight)
	{
		div.style.right = px(checkboxDef.x);
	}
	else
	{
		div.style.left = px(checkboxDef.x);
	}
	div.style.top = px(checkboxDef.y);
	parent.appendChild(div);
	
    var img = document.createElement('img');
    img.id = checkboxDef.idImg;
    img.zchecked = checked;
    if(checked) {
	    setImgSrc(img, getPathCustomizedButtonOnControl() + 'checkboxchecked.png');
    }
    else {
	    setImgSrc(img, getPathCustomizedButtonOnControl() + 'checkbox.png');
    }

	img.style.position = 'absolute';
	if(checkboxDef.alignRight)
	{
		img.style.right = px(0);
	}
	else
	{
		img.style.left = px(0);
	}
	img.style.top = px(0);

    img.style.border = 'none';
    img.onclick = checkboxDef.onclick;
	
    div.appendChild(img);
	
	if(checkboxDef.srcLabel) {
		var imgLabel = document.createElement('img');
		setImgSrc(imgLabel, getPathCustomizedButtonOnControl() + checkboxDef.srcLabel);
		imgLabel.style.position = 'absolute';
		
		if(checkboxDef.alignRight)
		{
			imgLabel.style.right = px(16);
		}
		else
		{
			imgLabel.style.left = px(16);
		}
		imgLabel.style.top = px(0);
		div.appendChild(imgLabel);
	}
	else if(checkboxDef.textLabel) {
		var spanLabel = span(null, 'zClass_text');
		spanLabel.innerHTML = checkboxDef.textLabel;
		spanLabel.style.position = 'absolute';
		if(checkboxDef.alignRight)
		{
			spanLabel.style.right = px(16);
		}
		else
		{
			spanLabel.style.left = px(16);
		}
		
		spanLabel.style.top = px(0);
		img.style.top = px(1);
		div.appendChild(spanLabel);
	}
	if(hide) div.style.display = 'none';
}

function messageBoxOkCancel(message, onOk) {
    var divMain = document.getElementById('zId_divMain');
    if(divMain) {
		var divMessageBoxArea = document.createElement('div');
		divMessageBoxArea.id = 'zId_divMessageBoxArea';
		divMain.appendChild(divMessageBoxArea);
		var divMessageBoxBackground = document.createElement('div');
		divMessageBoxBackground.id = 'zId_divMessageBoxBackground';
		divMessageBoxArea.appendChild(divMessageBoxBackground);

		var divMessageBox = document.createElement('div');
		divMessageBox.id = 'zId_divMessageBox';
		
		divMessageBox.appendChild(document.createElement('br'));
        
		var spanMessageBox = document.createElement('span');
		setElementClassName(spanMessageBox, 'zClass_text');
		spanMessageBox.innerHTML = message;
		divMessageBox.appendChild(spanMessageBox);

		divMessageBox.appendChild(document.createElement('br'));
		divMessageBox.appendChild(document.createElement('br'));

		var inputButtonMessageBox = document.createElement('input');
		inputButtonMessageBox.id = 'zId_inputButtonMessageBox'
		inputButtonMessageBox.onOk = onOk;
		setElementClassName(inputButtonMessageBox, 'zClass_text zClass_textChatControls');
		inputButtonMessageBox.type = 'button';
		inputButtonMessageBox.value = 'OK';
		inputButtonMessageBox.style.width = px(40);
		inputButtonMessageBox.onclick = onclickInputButtonMessageBoxOk;
		divMessageBox.appendChild(inputButtonMessageBox);

		divMessageBox.appendChild(document.createTextNode('\u00a0')); 
		divMessageBox.appendChild(document.createTextNode('\u00a0'));

		var inputButtonCancel = document.createElement('input');
		setElementClassName(inputButtonCancel, 'zClass_text zClass_textChatControls');
		inputButtonCancel.type = 'button';
		inputButtonCancel.value = 'Cancel';
		inputButtonCancel.style.width = px(55);
		inputButtonCancel.onclick = onclickInputButtonMessageBoxCancel;
		divMessageBox.appendChild(inputButtonCancel);
		
		divMessageBox.appendChild(document.createElement('br'));
		divMessageBox.appendChild(document.createElement('br'));
		
		divMessageBoxArea.appendChild(divMessageBox);
		divMessageBox.style.left = px((divMain.offsetWidth - divMessageBox.offsetWidth)/2);
		divMessageBox.style.top = px((divMain.offsetHeight - divMessageBox.offsetHeight)/2);
	}
}

function messageBox(message) {
    var divMain = document.getElementById('zId_divMain');
    if(divMain) {
		var divMessageBoxArea = document.createElement('div');
		divMessageBoxArea.id = 'zId_divMessageBoxArea';
		divMain.appendChild(divMessageBoxArea);
		var divMessageBoxBackground = document.createElement('div');
		divMessageBoxBackground.id = 'zId_divMessageBoxBackground';
		divMessageBoxArea.appendChild(divMessageBoxBackground);

		var divMessageBox = document.createElement('div');
		divMessageBox.id = 'zId_divMessageBox';
		
		divMessageBox.appendChild(document.createElement('br'));
        
		var spanMessageBox = document.createElement('span');
		setElementClassName(spanMessageBox, 'zClass_text');
		spanMessageBox.innerHTML = message;
		divMessageBox.appendChild(spanMessageBox);

		divMessageBox.appendChild(document.createElement('br'));
		divMessageBox.appendChild(document.createElement('br'));

		var inputButtonMessageBox = document.createElement('input');
		inputButtonMessageBox.id = 'zId_inputButtonMessageBox'
		setElementClassName(inputButtonMessageBox, 'zClass_text zClass_textChatControls');
		inputButtonMessageBox.type = 'button';
		inputButtonMessageBox.value = 'OK';
		inputButtonMessageBox.style.width = px(40);
		inputButtonMessageBox.onclick = onclickInputButtonMessageBoxClose;
		divMessageBox.appendChild(inputButtonMessageBox);

		divMessageBox.appendChild(document.createElement('br'));
		divMessageBox.appendChild(document.createElement('br'));
		
		divMessageBoxArea.appendChild(divMessageBox);
		divMessageBox.style.left = px((divMain.offsetWidth - divMessageBox.offsetWidth)/2);
		divMessageBox.style.top = px((divMain.offsetHeight - divMessageBox.offsetHeight)/2);
	}
}

function onclickInputButtonMessageBoxClose() {
    var zId_divMain = document.getElementById('zId_divMain');
    if(zId_divMain) {
        var divMessageBoxArea = document.getElementById('zId_divMessageBoxArea');
        if(divMessageBoxArea) {
			zId_divMain.removeChild(divMessageBoxArea);
        }
	}
}

function onclickInputButtonMessageBoxOk() {
	try {
		var inputButtonMessageBox = document.getElementById('zId_inputButtonMessageBox');
		if(inputButtonMessageBox) {
			if(inputButtonMessageBox.onOk) {
				eval(inputButtonMessageBox.onOk);
			}
		}
	}
	catch(e) {
	}
	onclickInputButtonMessageBoxClose();
}

function onclickInputButtonMessageBoxCancel() {
	onclickInputButtonMessageBoxClose();
}

function onclickInputButtonMessageBoxClose() {
    var zId_divMain = document.getElementById('zId_divMain');
    if(zId_divMain) {
        var divMessageBoxArea = document.getElementById('zId_divMessageBoxArea');
        if(divMessageBoxArea) {
			zId_divMain.removeChild(divMessageBoxArea);
        }
	}
}

var shareButtons = new Array();

var shareButtonX = 14;
var shareButtonIconWidth = 36;
function createShare(parent) {
	var divShare = document.createElement('div');
	divShare.id = 'zId_divShare';
	setElementClassName(divShare, 'zClass_controlColors');
	parent.appendChild(divShare);
	
	var imgSharesHeader = document.createElement('img');
	imgSharesHeader.id = 'zId_imgSharesHeader';
	imgSharesHeader.style.position = 'absolute';
	imgSharesHeader.style.left = '17px';
	imgSharesHeader.style.top = '10px';
	setImgSrc(imgSharesHeader, getPathCustomizedButtonOnControl() + 'RoomChannelText.png');
	divShare.appendChild(imgSharesHeader);
	
	var nButtons = shareButtonDefs.length;
	for(var whichButton = 0; whichButton < nButtons; whichButton += 1) {
		var iconButton = new shareButton(divShare, shareButtonDefs[whichButton]);
		shareButtons.push(iconButton);
//		var wordX = shareButtonX + shareButtonIconWidth/2 - shareButtonDefs[whichButton + 1].width/2;
//		var wordButton = new customButtonWithText(divShare, wordX, true, 0, shareButtonDefs[whichButton + 1], 0);
//		shareButtons.push(wordButton);
	}
 	return divShare;
}

var shareButtonY = 26;
var maxShareButtonSep = 16;
var minShareButtonSep = 1;

function layoutShareButtons() {

	var divMain = getById('zId_divMain');
	if(!divMain) return;
	
	var totalButtonHeight = 0;
	for(var whichButton = 0; whichButton < shareButtons.length; whichButton += 1)
	{
		var iconButton = shareButtons[whichButton];
		totalButtonHeight += iconButton.imgHeight;
	}
	
	var divShare = getById('zId_divShare');
	
	var freeSpace = divShare.offsetHeight - shareButtonY - totalButtonHeight;
	var shareButtonSep = minShareButtonSep;
	if(freeSpace > 0)
	{
		shareButtonSep = freeSpace / (shareButtons.length - 1);
		shareButtonSep = Math.max(shareButtonSep, minShareButtonSep);
		shareButtonSep = Math.min(shareButtonSep, maxShareButtonSep);
	}

	var y = shareButtonY;
	for(var whichButton = 0; whichButton < shareButtons.length; whichButton += 1)
	{
		var iconButton = shareButtons[whichButton];
		iconButton.img.style.top = px(y);
		y += iconButton.imgHeight + shareButtonSep;
	}

	var yBottom = 0;
	if(shareButtons.length > 0)
	{
		var bottomIcon = shareButtons[shareButtons.length - 1].img;
		yBottom = bottomIcon.offsetTop + bottomIcon.offsetHeight;
	}
	
	var x = shareButtonX;
	var wordX = 17;
	if(yBottom > divShare.offsetHeight)
	{
		x -= 10;
		wordX -= 10;		
	}
	setLeft(getById('zId_imgSharesHeader'), wordX);
	
	for(var whichButton = 0; whichButton < shareButtons.length; whichButton += 1)
	{
		var iconButton = shareButtons[whichButton];
		iconButton.img.style.left = px(x);
	}
}

function createHistory(parent) {
    var divHistory = document.createElement('div');
    divHistory.id = 'zId_divHistory';
    setElementClassName(divHistory, 'zClass_controlColors');
    parent.appendChild(divHistory);
    
   	var imgChatHeader = document.createElement('img');
   	imgChatHeader.id = 'zId_imgChatHeader';
	setImgSrc(imgChatHeader, getPathCustomizedButtonOnControl() + 'RoomChatText.png');
	divHistory.appendChild(imgChatHeader);
    
    var ulHistory = document.createElement('ul');
    ulHistory.id = 'zId_ulHistory';
    divHistory.appendChild(ulHistory);
    
	fixSelect(ulHistory);
    
	createTextChat(parent);

    return divHistory;
}

function createTextChat(parent)
{
	var divTextChatBackgroundOuter = div('divTextChatBackgroundOuter');
	setBackgroundColor(divTextChatBackgroundOuter, PageColor);//xxx
	var divTextChatBackgroundInner = div('divTextChatBackgroundInner');
	setBackgroundColor(divTextChatBackgroundInner, ControlColor);//xxx
	
	append(parent, divTextChatBackgroundOuter, divTextChatBackgroundInner);
	
    var inputTextChat = document.createElement('textarea');
    inputTextChat.id = 'zId_inputTextChat';
    setElementClassName(inputTextChat, 'zClass_text');
    setBackgroundColor(inputTextChat, TextColor);//xxx
    setColor(inputTextChat, ControlColor);//xxx
    inputTextChat.style.borderColor = '#a0a0a0';
    if(ie) {
		inputTextChat.style.overflow = 'hidden';
	}
	fixSelect(inputTextChat);

    inputTextChat.onkeydown = onkeydownInputTextZorapTextChat;
    
    inputTextChat.onblur = function()
    {
		if(!this.value)
		{
			makeTextChatHint();
		}
    }
    
    inputTextChat.onclick = function()
    {
		removeTextChatHint();
    }   
    divTextChatBackgroundInner.appendChild(inputTextChat);

	makeTextChatHint();
	
	var _enterButton = new ZButton(
		divTextChatBackgroundInner,
		getPathCustomizedButtonOnControl() + 'RoomButtonSendText.png',
		getPathCustomizedButtonOnControl() + 'RoomButtonSendText.png',
		getPathCustomizedButtonOnControl() + 'RoomButtonSendTextS.png',
		'',
		'',
		null, null,
		10, 6,
		23,
		18,
		sendText
	);
	zButtons.push(_enterButton);
}

function makeTextChatHint()
{
	removeTextChatHint();
	
	var divHistoryBackground = getById('divTextChatBackgroundInner');
	if(!divHistoryBackground) return;

    var divTextChatHint = div('divTextChatHint');
    setElementClassName(divTextChatHint, 'zClass_text');
    
   	var r = getRed(jsSettings.TextColor);
	var g = getGreen(jsSettings.TextColor);
	var b = getBlue(jsSettings.TextColor);
    backgroundBrightness = computeBrightness(jsSettings.TextColor);
	var f = .7;
	if(backgroundBrightness < 128)
    {
		r = Math.min(r + Math.round((255 - r) * (1 - f)), 255);
		g = Math.min(g + Math.round((255 - g) * (1 - f)), 255);
		b = Math.min(b + Math.round((255 - b) * (1 - f)), 255);
    }
    else
    {
		r = Math.max(Math.round(r * f), 0);
		g = Math.max(Math.round(g * f), 0);
		b = Math.max(Math.round(b * f), 0);
    }
    var hintColor = 'rgb(' + r + ', ' + b + ', ' + g + ')';
    divTextChatHint.style.color = hintColor;
    
    divTextChatHint.appendChild(document.createTextNode('\u00a0enter text'));

    divHistoryBackground.appendChild(divTextChatHint);
    divTextChatHint.onclick = function()
    {
		removeTextChatHint();
		var inputTextChat = getById('zId_inputTextChat');
		if(inputTextChat)
		{
			inputTextChat.focus();
		}
    }
}

function removeTextChatHint()
{
	var divTextChatHint = getById('divTextChatHint');
	if(divTextChatHint)
	{
		divTextChatHint.parentNode.removeChild(divTextChatHint);
	}
}

function pingZorapCtrl() {
	try {
		getZorapCtrl().Ping(settings.InstanceId);
		setTimeout(pingZorapCtrl, 200);
	}
	catch(e) {
	}
}

function createZorapCtrl(parent, clipAreaX, clipAreaY, clipAreaWidth, clipAreaHeight)
{
    var divVideoGallery = document.createElement('div');
    divVideoGallery.id = 'zId_divVideoGallery';
    parent.appendChild(divVideoGallery);

    var divDiagnostics = document.createElement('div');
    divDiagnostics.id = 'zId_divDiagnostics';
    parent.appendChild(divDiagnostics);
    
    initZorapCtrlInitialSettings();

	// initial clip area
    zorapCtrlInitialSettings.ClipAreaX = clipAreaX;
    zorapCtrlInitialSettings.ClipAreaY = clipAreaY;
    zorapCtrlInitialSettings.ClipAreaWidth = clipAreaWidth;
    zorapCtrlInitialSettings.ClipAreaHeight = clipAreaHeight;

    // set video gallery location from div
    zorapCtrlInitialSettings.VideoGalleryX = divVideoGallery.offsetLeft;
    zorapCtrlInitialSettings.VideoGalleryY = divVideoGallery.offsetTop;
    zorapCtrlInitialSettings.VideoGalleryWidth = divVideoGallery.offsetWidth;
    zorapCtrlInitialSettings.VideoGalleryHeight = divVideoGallery.offsetHeight;
    
    // set diagnostics location from div
    zorapCtrlInitialSettings.DiagnosticsX = divDiagnostics.offsetLeft;
    zorapCtrlInitialSettings.DiagnosticsY = divDiagnostics.offsetTop;
    zorapCtrlInitialSettings.DiagnosticsWidth = divDiagnostics.offsetWidth;
    zorapCtrlInitialSettings.DiagnosticsHeight = divDiagnostics.offsetHeight;
    
    // remove useless divs
    parent.removeChild(divVideoGallery);
    parent.removeChild(divDiagnostics);

	try {
        if(!window.ActiveXObject)
        {
            throw 'not IE';
        }
        else
        {
			// zorap control - note that one must call createElement() with the entire
			// object string. you can't just create it with 'object', because things go
			// wrong...like setting the version number on the cab won't result in an update.
			var objectString = '<object';
			objectString += ' width="100%"';
			objectString += ' height="100%"';
			objectString += ' id="zId_ZorapCtrl"';
			objectString += ' classid="CLSID:74BDA0D0-1AD9-45C7-BDC6-7A1879CCBF06"';
			objectString += '></object>';

            // try to make ActiveX version for IE
            var embedZorapCtrl = document.createElement(objectString);

            // create params
            for(var i in zorapCtrlInitialSettings) {
                var param = document.createElement('param');
                param.name = i;
                param.value = zorapCtrlInitialSettings[i];
                embedZorapCtrl.appendChild(param);
                }

            parent.appendChild(embedZorapCtrl);
        }
    }
    catch(e)
    {
        // try to make for non-IE browsers
        var embedZorapCtrl = document.createElement('object');
        
        embedZorapCtrl.setAttribute('id', 'zId_ZorapCtrl');
        embedZorapCtrl.setAttribute('width', '100%');
        embedZorapCtrl.setAttribute('height', '100%');
        embedZorapCtrl.setAttribute('type', zorapMIMEType);

        // create params
        for(var i in zorapCtrlInitialSettings)
        {
            var param = document.createElement('param');
            param.name = i;
            param.value = zorapCtrlInitialSettings[i];
            embedZorapCtrl.appendChild(param);
        }
        parent.appendChild(embedZorapCtrl);
        
        setTimeout(pingZorapCtrl, 200);
    }
}

var devicesState = readCookie('devicesState', 'closed');// closed, opening, open, closing
var chatOpen = readCookie_bool('chatOpen', true);
var animateRightSlideBarStateStartTime = 0;
var fadeDuration = 300;
var slideDuration = 300;
var rightSlideStartX = 0;
var rightSlideEndX = 0;
var chatSlideWidth = 160;
var deviceSlideWidth = 320;
var rightSlideWidth = 0;
var arrowWidth = 6;
function openDevices() {
	if(getRightSlideBarState() == 'out' || 
		getRightSlideBarState() == 'in') {
		if(devicesState == 'open') {
			devicesState = 'closing';
		}
		else if(devicesState == 'closed') {
			devicesState = 'opening';
		}
		animateRightSlideBar();
	}
}

function setHClipArea(x, Width) {
	var zorapCtrl = getZorapCtrl();
	if(zorapCtrl) {
		zorapCtrl.SetClipArea(x, 0, Width, zorapCtrl.offsetHeight);
	}
}

function getClipLeft() {
	var divLeftSlideBar = getById('zId_divLeftSlideBar');
	if(divLeftSlideBar) {
		return divLeftSlideBar.offsetLeft + divLeftSlideBar.offsetWidth;
	}
	return 0;
}

function getClipRight() {
	var divRightSlideBar = getById('zId_divRightSlideBar');
	if(divRightSlideBar) {
		return divRightSlideBar.offsetLeft;
	}
	return 1000;
}

function animateRightSlideBar() {
	var divRight = document.getElementById('zId_divRight');
	var dateTime = new Date();
	var elapsed = dateTime.getTime() - animateRightSlideBarStateStartTime;
	
	if(getRightSlideBarState() == 'out') {
		setRightSlideBarState('disappearing');
		animateRightSlideBarStateStartTime = dateTime.getTime();
		rightSlideStartX = divRight.offsetLeft;
		rightSlideWidth = divRight.offsetWidth;

		setTimeout(animateRightSlideBar, 20);
	}
	else if(getRightSlideBarState() == 'disappearing') {
		var alpha = 100 - Math.round(elapsed*100/fadeDuration);
		if(alpha <= 0) {
			divRight.style.display = 'none';
			setRightSlideBarState('slidingin');
			animateRightSlideBarStateStartTime = dateTime.getTime();
		}
		else {
			setAlpha(divRight, alpha);
		}
		setTimeout(animateRightSlideBar, 20);
	}
	else if(getRightSlideBarState() == 'slidingin') {
		var delta = Math.round(elapsed*rightSlideWidth/slideDuration);
		var done = false;
		if(delta > rightSlideWidth) {
			delta = rightSlideWidth;
			done = true;
		}
		var divRightSlideBar = document.getElementById('zId_divRightSlideBar');
		var edge = (rightSlideStartX + delta - divRightSlideBar.offsetWidth);
		divRightSlideBar.style.left = px(edge);
		
		var clipLeft = getClipLeft();
		setHClipArea(
			clipLeft,
			edge - clipLeft
			);
		
		var divBottom = document.getElementById('zId_divBottom');
		divBottom.style.width = px(edge);
		var divScrollingChatArea = document.getElementById('zId_divScrollingChatArea');
		if(divScrollingChatArea) {
			divScrollingChatArea.style.width = px(edge - divScrollingChatArea.offsetLeft - scrollingChatAreaRightMargin);
		}
		
		if(done) {
			setRightSlideBarState('in');

			if(devicesState == 'closing') {
				devicesState = 'closed';
			}
			if(chatOpen || devicesState == 'opening') {
				setRightSlideBarState('in2');
				setTimeout(animateRightSlideBar, 20);
			}
			else {
				divRightSlideBar.setArrowImage(false);
			}
		}
		else {
			setTimeout(animateRightSlideBar, 20);
		}
	}
	else if(getRightSlideBarState() == 'in' || getRightSlideBarState() == 'in2') {
		if(devicesState == 'opening') {
			rightSlideWidth = deviceSlideWidth;
			divRight.style.width = px(deviceSlideWidth);
			divRight.style.left = px(document.getElementById('zId_divMain').offsetWidth - deviceSlideWidth);
		}
		else {
			rightSlideWidth = chatSlideWidth;
			divRight.style.width = px(chatSlideWidth);
			divRight.style.left = px(document.getElementById('zId_divMain').offsetWidth - chatSlideWidth);
		}
		rightSlideEndX = document.getElementById('zId_divMain').offsetWidth - rightSlideWidth;
		animateRightSlideBarStateStartTime = dateTime.getTime();
		setRightSlideBarState('slidingout');
		setTimeout(animateRightSlideBar, 20);		
	}
	else if(getRightSlideBarState() == 'slidingout') {
		var delta = Math.round(elapsed*rightSlideWidth/slideDuration);
		var done = false;
		if(delta > rightSlideWidth) {
			delta = rightSlideWidth;
			done = true;
		}
		var divRightSlideBar = document.getElementById('zId_divRightSlideBar');
		var edge = (rightSlideEndX + rightSlideWidth - delta - divRightSlideBar.offsetWidth);
		divRightSlideBar.style.left = px(edge);
		
		var clipLeft = getClipLeft();
		setHClipArea(
			clipLeft,
			edge - clipLeft
			);
		
		var divBottom = document.getElementById('zId_divBottom');
		divBottom.style.width = px(edge);
		var divScrollingChatArea = document.getElementById('zId_divScrollingChatArea');
		if(divScrollingChatArea) {
			divScrollingChatArea.style.width = px(edge - divScrollingChatArea.offsetLeft - scrollingChatAreaRightMargin);
		}
		if(done) {
			setRightSlideBarState('appearing');
			animateRightSlideBarStateStartTime = dateTime.getTime();
			divRightSlideBar.setArrowImage(false);
			divRight.style.display = 'block';
			showDeviceDropdowns(false);
			
			if(devicesState == 'opening') {
				getDevices();
			}
		}
		setTimeout(animateRightSlideBar, 20);
	}
	else if(getRightSlideBarState('appearing')) {
		if(devicesState == 'opening') {
			document.getElementById('zId_divDevicePanel').style.display = 'block';
			showDeviceDropdowns(true);
			document.getElementById('zId_divDevicePanel').style.width = px(deviceSlideWidth);
		}
		else {
			document.getElementById('zId_divDevicePanel').style.display = 'none';
		}
		var alpha = Math.round(elapsed*100/fadeDuration);
		if(alpha >= 100) {
			setAlpha(divRight, 100);
			setRightSlideBarState('out');
			if(devicesState == 'opening') {
				devicesState = 'open';
				setTimeout(updateDevices, 500);
			}
		}
		else {
			setAlpha(divRight, alpha);
			setTimeout(animateRightSlideBar, 20);
		}
	}
}

// IE6 is bad at fading/hiding the html dropdowns
function showDeviceDropdowns(show) {
	var selectCam = getById('zId_selectCam');
	if(selectCam) {
		selectCam.style.display = show ? 'block' : 'none';
	}
	var selectMic = getById('zId_selectMic');
	if(selectMic) {
		selectMic.style.display = show ? 'block' : 'none';
	}
	var selectSpeak = getById('zId_selectSpeak');
	if(selectSpeak) {
		selectSpeak.style.display = show ? 'block' : 'none';
	}
}

var animateLeftSlideBarStateStartTime = 0;
var leftSlideWidth = 83;
function animateLeftSlideBar() {
	var divLeft = document.getElementById('zId_divLeft');
	var dateTime = new Date();
	var elapsed = dateTime.getTime() - animateLeftSlideBarStateStartTime;
	
	if(getLeftSlideBarState() == 'out') {
		setLeftSlideBarState('disappearing');
		animateLeftSlideBarStateStartTime = dateTime.getTime();
		
		setTimeout(animateLeftSlideBar, 20);
	}
	else if(getLeftSlideBarState() == 'disappearing') {
		var alpha = 100 - Math.round(elapsed*100/fadeDuration);
		if(alpha <= 0) {
			divLeft.style.display = 'none';
			setLeftSlideBarState('slidingin');
			animateLeftSlideBarStateStartTime = dateTime.getTime();
		}
		else {
			setAlpha(divLeft, alpha);
		}
		setTimeout(animateLeftSlideBar, 20);
	}
	else if(getLeftSlideBarState() == 'slidingin') {
		var delta = Math.round(elapsed*leftSlideWidth/slideDuration);
		var done = false;
		if(delta > leftSlideWidth) {
			delta = leftSlideWidth;
			done = true;
		}
		var divLeftSlideBar = document.getElementById('zId_divLeftSlideBar');
		var edge = leftSlideWidth - delta;
		divLeftSlideBar.style.left = px(edge);
		
		var clipLeft = edge + divLeftSlideBar.offsetWidth;
		setHClipArea(
			clipLeft,
			getClipRight() - clipLeft
			);
		
		if(done) {
			setLeftSlideBarState('in');
			divLeftSlideBar.setArrowImage(false);
		}
		else {
			setTimeout(animateLeftSlideBar, 20);
		}
	}
	else if(getLeftSlideBarState() == 'in') {
		setLeftSlideBarState('slidingout');
		
		animateLeftSlideBarStateStartTime = dateTime.getTime();
		setTimeout(animateLeftSlideBar, 20);		
	}
	else if(getLeftSlideBarState() == 'slidingout') {
		var delta = Math.round(elapsed*leftSlideWidth/slideDuration);
		var done = false;
		if(delta > leftSlideWidth) {
			delta = leftSlideWidth;
			done = true;
		}
		var divLeftSlideBar = document.getElementById('zId_divLeftSlideBar');
		var edge = delta;
		divLeftSlideBar.style.left = px(edge);
		
		var clipLeft = edge + divLeftSlideBar.offsetWidth;
		setHClipArea(
			clipLeft,
			getClipRight() - clipLeft
			);

		
		if(done) {
			setLeftSlideBarState('appearing');
			animateLeftSlideBarStateStartTime = dateTime.getTime();
			divLeftSlideBar.setArrowImage(false);
			divLeft.style.display = 'block';
		}
		setTimeout(animateLeftSlideBar, 20);
	}
	else if(getLeftSlideBarState('appearing')) {
		var alpha = Math.round(elapsed*100/fadeDuration);
		if(alpha >= 100) {
			setAlpha(divLeft, 100);
			setLeftSlideBarState('out');
		}
		else {
			setAlpha(divLeft, alpha);
			setTimeout(animateLeftSlideBar, 20);
		}
	}
}

function createSlideBar(parent, id, onclick, closesRight, out) {
    var divSlideBar = document.createElement('div');
    divSlideBar.id = id;
    setElementClassName(divSlideBar, 'zClass_divSlideBar zClass_controlColors');
    divSlideBar.state = 'out';// out, disappearing, slidingin, in, slidingout, appearing
    if(!out) divSlideBar.state = 'in';
    divSlideBar.closesRight = closesRight;
    
    divSlideBar.setArrowImage = function(selected) {
        this.setArrowImage2(selected, this.getArrow());
    }
    divSlideBar.setArrowImage2 = function(selected, imgArrow) {
	    var filename = null;
	    if(this.state == 'in') {
		    if(selected) {
		        if(closesRight)
			        filename = 'RoomButtonPointingLeftS.png';
			     else
					filename = 'RoomButtonPointingRightS.png';
		    }
		    else {
		        if(closesRight)
				    filename = 'RoomButtonPointingLeft.png';
				else
					filename = 'RoomButtonPointingRight.png';
		    }
	    }
	    else {
		    if(selected) {
			    if(this.state == 'out') {
			        if(closesRight)
					    filename = 'RoomButtonPointingRightS.png';
					else
						filename = 'RoomButtonPointingLeftS.png';
			    }
		    }
		    else {
		        if(closesRight)
				    filename = 'RoomButtonPointingRight.png';
				else
					filename = 'RoomButtonPointingLeft.png';
		    }
	    }
	    if(filename) {
		    if(imgArrow) {
			    setImgSrc(imgArrow, getPathCustomizedButtonOnControl() + filename);
		    }
	    }
    }
    
    var imgArrow = document.createElement('img');
    imgArrow.id = 'zId_imgArrow';
    imgArrow.style.position = 'absolute';
    divSlideBar.setArrowImage2(false, imgArrow);
    divSlideBar.appendChild(imgArrow);
    
    divSlideBar.onmousedown = function(e) {
		if(!eventIsRightClick(e)) {
			this.setArrowImage(true);
		}
    }
    
    parent.appendChild(divSlideBar);
    divSlideBar.onclick = onclick;
    divSlideBar.getArrow = function() {
        return getChildElement(this, 'img', 'zId_imgArrow');
    }
    divSlideBar.positionArrow = function() {
        var imgArrow = this.getArrow();
        if(imgArrow) {
		    imgArrow.style.left = px(divSlideBar.offsetWidth/2 - arrowWidth/2);
		    imgArrow.style.top = px(divSlideBar.offsetHeight/2 - arrowWidth/2);
        }
    }
    return divSlideBar;
}

function onclickLeftSlideBar() {
	animateLeftSlideBar();
}

function onclickRightSlideBar() {
	if(getRightSlideBarState() == 'out') {
		if(devicesState == 'open') {
			devicesState = 'closing';
		}
		else {
			chatOpen = false;
		}
	}
	if(getRightSlideBarState() == 'in') {
		chatOpen = true;
	}
	animateRightSlideBar();
}

function getChildElement(parent, type, id) {
    var elements = parent.getElementsByTagName(type);
    for(var which = 0; which < elements.length; which++) {
        if(elements[which].id == id) {
            return elements[which];
        }
    }
    return null;
}

var signalStrengthIndicators = new Array();
function SignalSignalStrengthUpdate2(IndicatorString) {
	for(var which = 0; which < IndicatorString.length; which++) {
		for(w = 0; w < 2; w++) {
			if(IndicatorString.charAt(which) == w) {
				signalStrengthIndicators[which][w].style.display = 'block';
			}
			else {
				signalStrengthIndicators[which][w].style.display = 'none';
			}
		}
	}
}

function createSignalStrength(parent) {
	var divSignalStrength = document.createElement('div');
	divSignalStrength.id = 'zId_divSignalStrength';

	var spanSignalStrength = document.createElement('span');
	spanSignalStrength.id = 'zId_spanSignalStrength';
	setElementClassName(spanSignalStrength, 'zClass_text zClass_textSmaller');
	spanSignalStrength.innerHTML = 'Signal Strength';
	
	var divSignalStrengthMeterBack = document.createElement('div');
	divSignalStrengthMeterBack.id = 'zId_divSignalStrengthMeterBack';
	setElementClassName(divSignalStrengthMeterBack, 'zClass_divMeterBack');
	setBackgroundColor(divSignalStrengthMeterBack, ButtonColor);//xxx
	
	var divSignalStrengthMeterFront = document.createElement('div');
	divSignalStrengthMeterFront.id = 'zId_divSignalStrengthMeterFront';
	setElementClassName(divSignalStrengthMeterFront, 'zClass_divMeterFront');
	setBackgroundColor(divSignalStrengthMeterFront, ControlColor);//xxx
	
	var left = 0;
	for(var which = 0; which < 10; which++) {
		signalStrengthIndicators[which] = new Array();
		
		var imgOff = document.createElement('img');
		setImgSrc(imgOff, fixRoot('/images/indicators/SignalStrengthOff.png'));
		imgOff.style.position = 'absolute';
		imgOff.style.left = px(left);
		imgOff.style.top = px(0);
		divSignalStrengthMeterFront.appendChild(imgOff);
		signalStrengthIndicators[which].push(imgOff);

		var imgOn = document.createElement('img');
		setImgSrc(imgOn, fixRoot('/images/indicators/SignalStrengthOn.png'));
		imgOn.style.position = 'absolute';
		imgOn.style.left = px(left);
		imgOn.style.top = px(0);
		imgOn.style.display = 'none';
		divSignalStrengthMeterFront.appendChild(imgOn);
		signalStrengthIndicators[which].push(imgOn);
		
		left += 5;
	}
	parent.appendChild(divSignalStrength);
	divSignalStrength.appendChild(spanSignalStrength);
	divSignalStrength.appendChild(divSignalStrengthMeterBack);
	divSignalStrength.appendChild(divSignalStrengthMeterFront);
}

var activityIndicators = new Array();
function SignalNetworkActivityUpdate2(IndicatorString) {
	
	if(window.parent && window.parent.externSignalNetworkActivityUpdate2)
	{
		window.parent.externSignalNetworkActivityUpdate2(IndicatorString);
	}

	for(var which = 0; which < IndicatorString.length; which++) {
		if(which < activityIndicators.length) {
			for(w = 0; w < 3; w++) {
				if(IndicatorString.charAt(which) == w) {
					activityIndicators[which][w].style.display = 'block';
				}
				else {
					activityIndicators[which][w].style.display = 'none';
				}
			}
		}
	}
}

function createActivity(parent) {
	var divActivity = document.createElement('div');
	divActivity.id = 'zId_divActivity';

	var spanActivity = document.createElement('span');
	spanActivity.id = 'zId_spanActivity';
	setElementClassName(spanActivity, 'zClass_text zClass_textSmaller');
	spanActivity.innerHTML = 'Activity';
	
	var divActivityMeterBack = document.createElement('div');
	divActivityMeterBack.id = 'zId_divActivityMeterBack';
	setElementClassName(divActivityMeterBack, 'zClass_divMeterBack');
	setBackgroundColor(divActivityMeterBack, ButtonColor);//xxx
	
	var divActivityMeterFront = document.createElement('div');
	divActivityMeterFront.id = 'zId_divActivityMeterFront';
	setElementClassName(divActivityMeterFront, 'zClass_divMeterFront');
	setBackgroundColor(divActivityMeterFront, ControlColor);//xxx
	
	var left = 0;
	for(var which = 0; which < 25; which++) {
		activityIndicators[which] = new Array();

		var imgIndOff = document.createElement('img');
		setImgSrc(imgIndOff, fixRoot('/images/Indicators/ActivityOff.png'));
		imgIndOff.style.position = 'absolute';
		imgIndOff.style.left = px(left);
		imgIndOff.style.top = px(0);
		divActivityMeterFront.appendChild(imgIndOff);
		activityIndicators[which].push(imgIndOff);

		var imgInd = document.createElement('img');
		setImgSrc(imgInd, fixRoot('/images/Indicators/ActivityMiddle.png'));
		imgInd.style.position = 'absolute';
		imgInd.style.left = px(left);
		imgInd.style.top = px(0);
		imgInd.style.display = 'none';
		divActivityMeterFront.appendChild(imgInd);
		activityIndicators[which].push(imgInd);

		var imgEnd = document.createElement('img');
		setImgSrc(imgEnd, fixRoot('/images/Indicators/ActivityEnd.png'));
		imgEnd.style.position = 'absolute';
		imgEnd.style.left = px(left);
		imgEnd.style.top = px(0);
		imgEnd.style.display = 'none';
		divActivityMeterFront.appendChild(imgEnd);
		activityIndicators[which].push(imgEnd);

		left += 2;
	}
	parent.appendChild(divActivity);
	divActivity.appendChild(spanActivity);
	divActivity.appendChild(divActivityMeterBack);
	divActivity.appendChild(divActivityMeterFront);
//	divActivity.style.display = 'none';
}

function showUploadMeter(show) {
	var divUpload = document.getElementById('zId_divUpload');
	var divActivity = document.getElementById('zId_divActivity');
	if(divUpload && divActivity) {
		if(show) {
			divActivity.style.display = 'none';
			divUpload.style.display = 'block';
		}
		else {
			divActivity.style.display = 'block';
			divUpload.style.display = 'none';
		}
	}
}

var uploadIndicators = new Array();
function SignalProgressUpdate2(IndicatorString, MessageText) {
	if(IndicatorString == '0000000000' || IndicatorString == '2222222222') {
		showUploadMeter(false);
		return;
	}
	var spanUpload = document.getElementById('zId_spanUpload');
	if(spanUpload) {
		spanUpload.innerHTML = MessageText;
	}
	showUploadMeter(true);
	for(var which = 0; which < IndicatorString.length; which++) {
		if(which < uploadIndicators.length) {
			for(w = 0; w < 3; w++) {
				if(IndicatorString.charAt(which) == w) {
					uploadIndicators[which][w].style.display = 'block';
				}
				else {
					uploadIndicators[which][w].style.display = 'none';
				}
			}
		}
	}
}

function createUpload(parent) {
	var divUpload = document.createElement('div');
	divUpload.id = 'zId_divUpload';

	var spanUpload = document.createElement('span');
	spanUpload.id = 'zId_spanUpload';
	setElementClassName(spanUpload, 'zClass_text zClass_textSmaller');
	spanUpload.style.right = px(3);
	spanUpload.style.position = 'absolute';
	spanUpload.innerHTML = '';
	
	var divUploadMeterBack = document.createElement('div');
	divUploadMeterBack.id = 'zId_divUploadMeterBack';
	setElementClassName(divUploadMeterBack, 'zClass_divMeterBack');
	setBackgroundColor(divUploadMeterBack, ButtonColor);//xxx
	
	var divUploadMeterFront = document.createElement('div');
	divUploadMeterFront.id = 'zId_divUploadMeterFront';
	setElementClassName(divUploadMeterFront, 'zClass_divMeterFront');
	setBackgroundColor(divUploadMeterFront, ControlColor);//xxx
	
	var left = 0;
	for(var which = 0; which < 10; which++) {
		uploadIndicators[which] = new Array();
		
		var imgOff = document.createElement('img');
		setImgSrc(imgOff, fixRoot('/images/indicators/UploadOff.png'));
		imgOff.style.position = 'absolute';
		imgOff.style.left = px(left);
		imgOff.style.top = px(0);
		divUploadMeterFront.appendChild(imgOff);
		uploadIndicators[which].push(imgOff);
		
		var imgLowQ = document.createElement('img');
		setImgSrc(imgLowQ, fixRoot('/images/indicators/UploadLowQ.png'));
		imgLowQ.style.position = 'absolute';
		imgLowQ.style.left = px(left);
		imgLowQ.style.top = px(0);
		imgLowQ.style.display = 'none';
		divUploadMeterFront.appendChild(imgLowQ);
		uploadIndicators[which].push(imgLowQ);
		
		var imgNormalQ = document.createElement('img');
		setImgSrc(imgNormalQ, fixRoot('/images/indicators/UploadNormalQ.png'));
		imgNormalQ.style.position = 'absolute';
		imgNormalQ.style.left = px(left);
		imgNormalQ.style.top = px(0);
		imgNormalQ.style.display = 'none';
		divUploadMeterFront.appendChild(imgNormalQ);
		uploadIndicators[which].push(imgNormalQ);
		
		left += 5;
	}
	parent.appendChild(divUpload);
	divUpload.appendChild(spanUpload);
	divUpload.appendChild(divUploadMeterBack);
	divUpload.appendChild(divUploadMeterFront);
	divUpload.style.display = 'none';
}

function GetCamMonikers()
{
	return getZorapCtrl().GetCamMonikers();
}

function GetRecordingDevices()
{
	return getZorapCtrl().GetRecordingDevices();
}

function GetPlaybackDevices()
{
	return getZorapCtrl().GetPlaybackDevices();
}

var gotDevicesOnce = false;
function getDevices() {
	try {
		var selectCam = document.getElementById('zId_selectCam');
		removeChildren(selectCam);
		var selectMic = document.getElementById('zId_selectMic');
		removeChildren(selectMic);
		var selectSpeak = document.getElementById('zId_selectSpeak');
		removeChildren(selectSpeak);

		var camString = getZorapCtrl().GetCamMonikers();
		var cams = camString.split('~');

		for(var which = 0; which < cams.length; which += 2) {
			var o = document.createElement('option');
			var name = cams[which];
			if(name.length > 0) {
				o.innerHTML = name;
				o.zId = cams[which + 1];
				selectCam.appendChild(o);
				if(jsSettings.CameraId == o.zId) {
					selectCam.selectedIndex = which / 2;
				}
			}
		}

		var micString = getZorapCtrl().GetRecordingDevices();
		var mics = micString.split('~');

		for(var which = 0; which < mics.length; which += 1) {
			var o = document.createElement('option');
			var id = mics[which];
			if(id.length > 0) {
				o.innerHTML = id;
				selectMic.appendChild(o);
				if(jsSettings.Mic == id) {
					selectMic.selectedIndex = which;
				}
			}
		}

		var speakString = getZorapCtrl().GetPlaybackDevices();
		var speaks = speakString.split('~');

		for(var which = 0; which < speaks.length; which += 1) {
			var o = document.createElement('option');
			var id = speaks[which];
			if(id.length > 0) {
				o.innerHTML = id;
				selectSpeak.appendChild(o);
				if(jsSettings.Speakers == id) {
					selectSpeak.selectedIndex = which;
				}
			}
		}
		gotDevicesOnce = true;
	}
	catch(e) {
	}
}

function onchangeCam() {
	var s = document.getElementById('zId_selectCam');
	var sIndex = s.selectedIndex;
	var sValue = s.options[sIndex].value;
	var id = s.options[sIndex].zId;
	onChangeCam(id);
}

function onChangeCam(id) {
	try {
		var connected = getZorapCtrl().ConnectToCam(id);
        if(connected != 0) {
            jsSettings.CameraId = id;
            saveSetting("camid", id);
		}
	} catch(e) {}
}

function onchangeMic()
{
	var s = document.getElementById('zId_selectMic');
	var sIndex = s.selectedIndex;
	var id = s.options[sIndex].innerHTML;
	onChangeMic(id);
}

function onChangeMic(id)
{
	try
	{
		var connected = getZorapCtrl().ConnectToRecordingDevice(id);
        if(connected != 0)
        {
            jsSettings.Mic = id;
            saveSetting("mic", id);
		}
	} catch(e) {}
}

function onchangeSpeak()
{
	var s = document.getElementById('zId_selectSpeak');
	var sIndex = s.selectedIndex;
	var id = s.options[sIndex].innerHTML;
	onChangeSpeakers(id)
}

function onChangeSpeakers(id)
{
	try
	{
		var connected = getZorapCtrl().ConnectToPlaybackDevice(id);
        if(connected != 0)
        {
            jsSettings.Speakers = id;
            saveSetting("speakers", id);
		}
	} catch(e) {}
}

function createCamWord(divDevice) {
	var imgCamWord = document.createElement('img');
	imgCamWord.id = 'zId_imgCamWord';
	setImgSrc(imgCamWord, getPathCustomizedButtonOnControl() + 'WebcamWord.png');
	imgCamWord.style.position = 'absolute';
	imgCamWord.style.left = px(0);
	divDevice.appendChild(imgCamWord);
}

function layoutCamWord(y) {
	var imgCamWord = getById('zId_imgCamWord');
	if(imgCamWord) {
		imgCamWord.style.top = px(y);
	}
}

function createCamLabel(divDevice) {
	var spanCamLabel = span('zId_spanCamLabel', 'zClass_text');
	spanCamLabel.style.position = 'absolute';
	spanCamLabel.style.right = px(devicesRight);
	spanCamLabel.innerHTML = 'Webcam:';
	divDevice.appendChild(spanCamLabel);
}

function layoutCamLabel(y) {
	var spanCamLabel = getById('zId_spanCamLabel');
	if(spanCamLabel) {
		spanCamLabel.style.top = px(y);
	}
}

function createCamSelect(divDevice) {
	var selectCam = document.createElement('select');
	selectCam.id = 'zId_selectCam';
	setElementClassName(selectCam, 'zClass_deviceOption');
	selectCam.style.position = 'absolute';
	selectCam.style.left = px(devicesLeft);
	selectCam.onchange = onchangeCam;
	divDevice.appendChild(selectCam);
}

function layoutCamSelect(y) {
	var selectCam = getById('zId_selectCam');
	if(selectCam) {
		selectCam.style.top = px(y);
	}
}

function createMicWord(divDevice) {
	var imgMicWord = document.createElement('img');
	imgMicWord.id = 'zId_imgMicWord';
	imgMicWord.style.position = 'absolute';
	imgMicWord.style.left = px(0);
	setImgSrc(imgMicWord, getPathCustomizedButtonOnControl() + 'MicrophoneWord.png');
	divDevice.appendChild(imgMicWord);
}

function layoutMicWord(y) {
	var imgMicWord = getById('zId_imgMicWord');
	if(imgMicWord) {
		imgMicWord.style.top = px(y);	
	}
}

function createMicLabel(divDevice) {
	var spanMicLabel = span('zId_spanMicLabel', 'zClass_text');
	spanMicLabel.style.position = 'absolute';
	spanMicLabel.style.right = px(devicesRight);
	spanMicLabel.innerHTML = 'Microphone:';
	divDevice.appendChild(spanMicLabel);
}

function layoutMicLabel(y) {
	var spanMicLabel = getById('zId_spanMicLabel');
	if(spanMicLabel) {
		spanMicLabel.style.top = px(y);	
	}
}

var devicesRight = 200;
var devicesLeft = 110;
function createMicSelect(divDevice) {
	var selectMic = document.createElement('select');
	selectMic.id = 'zId_selectMic';
	setElementClassName(selectMic, 'zClass_deviceOption');
	selectMic.style.position = 'absolute';
	selectMic.style.left = px(devicesLeft);
	selectMic.onchange = onchangeMic;
	divDevice.appendChild(selectMic);
}

function layoutMicSelect(y) {
	var selectMic = getById('zId_selectMic');
	if(selectMic) {
		selectMic.style.top = px(y);
	}
}

function createRecLevelLabel(divDevice) {
	var spanRecLevel = span('zId_spanRecLevel', 'zClass_text');
	spanRecLevel.innerHTML = 'Recording Level:';
	spanRecLevel.style.position = 'absolute';
	spanRecLevel.style.right = px(devicesRight);
	divDevice.appendChild(spanRecLevel);
}

function layoutRecLevelLabel(y) {
	var spanRecLevel = getById('zId_spanRecLevel');
	if(spanRecLevel) {
		spanRecLevel.style.top = px(y);
	}
}

function createSaySomething(divDevice) {
	var spanSaySomething = span('zId_spanSaySomething', 'zClass_text');
	spanSaySomething.innerHTML = 'Volume Meter:';
	spanSaySomething.style.position = 'absolute';
	spanSaySomething.style.right = px(devicesRight);
	divDevice.appendChild(spanSaySomething);
}

function layoutSaySomething(y) {
	var spanSaySomething = getById('zId_spanSaySomething');
	if(spanSaySomething) {
		spanSaySomething.style.top = px(y);
	}
}

function createSpeakerWord(divDevice) {
	var imgSpeakersWord = document.createElement('img');
	imgSpeakersWord.id = 'zId_imgSpeakersWord';
	setImgSrc(imgSpeakersWord, getPathCustomizedButtonOnControl() + 'SpeakersWord.png');
	imgSpeakersWord.style.position = 'absolute';
	imgSpeakersWord.style.left = px(0);
	divDevice.appendChild(imgSpeakersWord);
}

function layoutSpeakerWord(y) {
	var imgSpeakersWord = getById('zId_imgSpeakersWord');
	if(imgSpeakersWord) {
		imgSpeakersWord.style.top = px(y);
	}
}

function createAudioOutputLabel(divDevice) {
	var spanAudioOutput = span('zId_spanAudioOutput', 'zClass_text');
	spanAudioOutput.innerHTML = 'Audio Output:';
	spanAudioOutput.style.position = 'absolute';
	spanAudioOutput.style.right = px(devicesRight);
	divDevice.appendChild(spanAudioOutput);
}

function layoutAudioOutputLabel(y) {
	var spanAudioOutput = getById('zId_spanAudioOutput');
	if(spanAudioOutput) {
		spanAudioOutput.style.top = px(y);
	}
}

function createSpeakSelect(divDevice) {
	var selectSpeak = document.createElement('select');
	selectSpeak.id = 'zId_selectSpeak';
	setElementClassName(selectSpeak, 'zClass_deviceOption');
	selectSpeak.style.position = 'absolute';
	selectSpeak.style.left = px(devicesLeft);
	selectSpeak.onchange = onchangeSpeak;
	divDevice.appendChild(selectSpeak);
}

function layoutSpeakSelect(y) {
	var selectSpeak = getById('zId_selectSpeak');
	if(selectSpeak) {
		selectSpeak.style.top = px(y);
	}
}

function createPlaybackLevelLabel(divDevice) {
	var spanPlaybackLevel = span('zId_spanPlaybackLevel', 'zClass_text');
	spanPlaybackLevel.innerHTML = 'Playback Level:';
	spanPlaybackLevel.style.position = 'absolute';
	spanPlaybackLevel.style.right = px(devicesRight);
	divDevice.appendChild(spanPlaybackLevel);
}

function layoutPlaybackLevelLabel(y) {
	var spanPlaybackLevel = getById('zId_spanPlaybackLevel');
	if(spanPlaybackLevel) {
		spanPlaybackLevel.style.top = px(y);
	}
}

function createClickToTestLabel(divDevice) {
	var spanClickToTest = span('zId_spanClickToTest', 'zClass_text');
	spanClickToTest.innerHTML = 'Click to Test:';
	spanClickToTest.style.position = 'absolute';
	spanClickToTest.style.right = px(devicesRight);
	divDevice.appendChild(spanClickToTest);
}

function layoutClickToTestLabel(y) {
	var spanClickToTest = getById('zId_spanClickToTest');
	if(spanClickToTest) {
		spanClickToTest.style.top = px(y);
	}
}

var runningUpFrontEchoTest = false;
function onclickGoDing() {
	try {
		getZorapCtrl().EchoTest();
	} catch(e) {}
	return false;
}
function doEchoTest()
{
	try {
		getZorapCtrl().EchoTest();
	} catch(e) {}
	return false;
}

function SignalEchoTestResult(Level, ResultString) {
	var update = false;
	
	if(window.parent && window.parent.externSignalEchoTestResult)
	{
		window.parent.externSignalEchoTestResult(ResultString);
	}

	if(jsSettings.EchoState != ResultString) {
		jsSettings.EchoState = ResultString;
		saveSetting("echostate", ResultString);
		update = true;
		if(runningUpFrontEchoTest) {
			showUpFrontEchoTestResult2(ResultString);
		}
		else {
			if(ResultString == 'Passed') {
				setLock(true);
			}
		}
	}
	var level = parseInt(Level);
	if(jsSettings.EchoLevel != level) {
		jsSettings.EchoLevel = level;
		update = true;
	}
	if(!runningUpFrontEchoTest && update) {
		updateEchoLevel(level, ResultString);
	}
}

function showUpFrontEchoTestResult2(result)
{
	if(result == 'Passed' ||
		result == 'NoiseFailure' ||
		result == 'EchoFailure' ||
		result == 'ZeroSignalFailure' ||
		result == 'MicFailure')
	{
		hideElement('divWelcomeRemainSilent');
	
		var checkboxInstantMicOn = getById('checkboxInstantMicOn');
		checkboxInstantMicOn.disabled = false;

		var checkboxInstantHeadsetOn = getById('checkboxInstantHeadsetOn');
		checkboxInstantHeadsetOn.disabled = false;

		if(result == 'Passed')
		{
			showElementById('divWelcomeTestPassed');
		}
		else if(result == 'NoiseFailure')
		{
			showElementById('divWelcomeNoiseDetected');
			showElementById('divWelcomeUsePushToTalk');
		}
		else if(result == 'EchoFailure')
		{
			showElementById('divWelcomeEchoDetected');
			showElementById('divWelcomeUsePushToTalk');
		}
		else if(result == 'ZeroSignalFailure')
		{
			showElementById('divWelcomeFaultyMic');
			showElementById('divWelcomeUsePushToTalk');
		}
		else if(result == 'MicFailure')
		{
			showElementById('divWelcomeFaultyMic');
			showElementById('divWelcomeUsePushToTalk');
		}

		runningUpFrontEchoTest = false;
	}
}

function getEchoResultMessageAndFontWeight(ResultString) {
	var o = new Object();
	o.fontWeight = 'normal';
	if(ResultString == 'Startup') {
		o.message = "Testing your microphone";
	}
	else if(ResultString == 'TestNeverTriggered' || ResultString == 'TestNeverRan') {
		o.message = "Press DING to test your microphone";
	}
	else if(ResultString == 'TestOngoing') {
		o.message = "Avoid speaking while we test your microphone";
	}
	else if(ResultString == 'TestComplete') {
		o.message = "Avoid speaking while we test your microphone";
	}
	else if(ResultString == 'Passed') {
		o.message = "Microphone test successfull!";
	}
	else if(ResultString == 'NoiseFailure') {
		o.fontWeight = 'bold';
		o.message = "Background noise detected.";
	}
	else if(ResultString == 'EchoFailure') {
		o.fontWeight = 'bold';
		o.message = "Echo detected, use Push to Talk OR reduce playback level and test again.";
	}
	else if(ResultString == 'ZeroSignalFailure') {
		o.fontWeight = 'bold';
		o.message = "Your microphone is muted, unplugged, or not working";
	}
	else if(ResultString == 'MicFailure') {
		o.fontWeight = 'bold';
		o.message = "Your microphone is unplugged or not working";
	}
	return o;
}
function updateEchoLevel(Level, resultString) {
	var nOn = Math.round(Level * levelIndicatorSlots / 255);
	
	for(var which = 0; which < nOn; which++) {
		echoLevelIndicators[which][0].style.display = 'none';
		echoLevelIndicators[which][1].style.display = 'block';
	}
	for(; which < levelIndicatorSlots; which++) {
		echoLevelIndicators[which][0].style.display = 'block';
		echoLevelIndicators[which][1].style.display = 'none';
	}
	var spanEchoResult = document.getElementById('zId_spanEchoResult');
	if(spanEchoResult) {
		var echoResultMessageAndFontWeight = getEchoResultMessageAndFontWeight(resultString);
		spanEchoResult.style.fontWeight = echoResultMessageAndFontWeight.fontWeight;
		spanEchoResult.innerHTML = echoResultMessageAndFontWeight.message;
 	}
}

function createGoDingButton(divDevice, y) {
	var aClickToTest = _a('zId_aClickToTest');
	aClickToTest.href = '#';
	aClickToTest.onclick = onclickGoDing;
	var imgClickToTest = img();
	setImgSrc(imgClickToTest, getPathCustomizedButtonOnControl() + 'DingButton.png');
	imgClickToTest.onmousedown = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'DingButtons.png');
		return false;
	}
	imgClickToTest.onmouseup = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'DingButton.png');
		return false;
	}
	imgClickToTest.onmouseout = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'DingButton.png');
		return false;
	}
	imgClickToTest.onmousemove = function() {
		return false;
	}
	imgClickToTest.style.border = 'none';

	aClickToTest.style.position = 'absolute';
	aClickToTest.style.left = px(devicesLeft);
	divDevice.appendChild(aClickToTest);
	aClickToTest.appendChild(imgClickToTest);
}

function layoutGoDingButton(y) {
	var aClickToTest = getById('zId_aClickToTest');
	if(aClickToTest) {
		aClickToTest.style.top = px(y);
	}
}

function createEchoLabel(divDevice) {
	var spanEcho = span('zId_spanEcho', 'zClass_text');
	spanEcho.innerHTML = 'Echo:';
	spanEcho.style.position = 'absolute';
	spanEcho.style.right = px(devicesRight);
	divDevice.appendChild(spanEcho);
}

function layoutEchoLabel(y) {
	var spanEcho = getById('zId_spanEcho');
	if(spanEcho) {
		spanEcho.style.top = px(y);
	}
}

function createEchoResult(divDevice) {
	var spanEchoResult = span('zId_spanEchoResult', 'zClass_text');
	spanEchoResult.style.position = 'absolute';
	spanEchoResult.style.left = px(devicesLeft);
	spanEchoResult.style.width = px(200);
	divDevice.appendChild(spanEchoResult);
}

function layoutEchoResult(y) {
	var spanEchoResult = getById('zId_spanEchoResult');
	if(spanEchoResult) {
		spanEchoResult.style.top = px(y);
	}
}

var levelIndicatorSlots = 24;
var micLevelIndicators = new Array();
function createMicLevelIndicator(parent) {
	var divMicLevel = document.createElement('div');
	divMicLevel.id = 'zId_divMicLevel';
	divMicLevel.style.position = 'absolute';
	divMicLevel.style.left = px(devicesLeft);

	var divMicLevelMeterBack = document.createElement('div');
	divMicLevelMeterBack.id = 'zId_divMicLevelMeterBack';
	setElementClassName(divMicLevelMeterBack, 'zClass_divMeterBack2');
	setBackgroundColor(divMicLevelMeterBack, ButtonColor);//xxx
	
	var divMicLevelMeterFront = document.createElement('div');
	divMicLevelMeterFront.id = 'zId_divMicLevelMeterFront';
	setElementClassName(divMicLevelMeterFront, 'zClass_divMeterFront2');
	setBackgroundColor(divMicLevelMeterFront, ControlColor);//xxx
	
	var left = 0;
	for(var which = 0; which < levelIndicatorSlots; which++) {
		micLevelIndicators[which] = new Array();
	
		var imgOff = document.createElement('img');
		setImgSrc(imgOff, fixRoot('/images/indicators/MicLevelOff.png'));
		imgOff.style.position = 'absolute';
		imgOff.style.left = px(left);
		imgOff.style.top = px(0);
		divMicLevelMeterFront.appendChild(imgOff);
		micLevelIndicators[which].push(imgOff);

		var imgOn = document.createElement('img');
		setImgSrc(imgOn, fixRoot('/images/indicators/MicLevelOn.png'));
		imgOn.style.position = 'absolute';
		imgOn.style.left = px(left);
		imgOn.style.top = px(0);
		imgOn.style.display = 'none';
		divMicLevelMeterFront.appendChild(imgOn);
		micLevelIndicators[which].push(imgOn);

		left += 5;
	}
	divMicLevel.appendChild(divMicLevelMeterBack);
	divMicLevel.appendChild(divMicLevelMeterFront);
	parent.appendChild(divMicLevel);
}

function layoutMicLevelIndicator(y) {
	var divMicLevel = getById('zId_divMicLevel');
	if(divMicLevel) {
		divMicLevel.style.top = px(y);
	}
}

var echoLevelIndicators = new Array();
function createEchoLevelIndicator(parent) {
	var divEchoLevel = document.createElement('div');
	divEchoLevel.id = 'zId_divEchoLevel';
	divEchoLevel.style.position = 'absolute';
	divEchoLevel.style.left = px(devicesLeft);

	var divEchoLevelMeterBack = document.createElement('div');
	divEchoLevelMeterBack.id = 'zId_divEchoLevelMeterBack';
	setElementClassName(divEchoLevelMeterBack, 'zClass_divMeterBack2');
	setBackgroundColor(divEchoLevelMeterBack, ButtonColor);//xxx
	
	var divEchoLevelMeterFront = document.createElement('div');
	divEchoLevelMeterFront.id = 'zId_divEchoLevelMeterFront';
	setElementClassName(divEchoLevelMeterFront, 'zClass_divMeterFront2');
	setBackgroundColor(divEchoLevelMeterFront, ControlColor);//xxx
	
	var left = 0;
	for(var which = 0; which < levelIndicatorSlots; which++) {
		echoLevelIndicators[which] = new Array();
		
		var imgOff = document.createElement('img');
		setImgSrc(imgOff, fixRoot('/images/indicators/EchoLevelOff.png'));
		imgOff.style.position = 'absolute';
		imgOff.style.left = px(left);
		imgOff.style.top = px(0);
		divEchoLevelMeterFront.appendChild(imgOff);
		echoLevelIndicators[which].push(imgOff);
		
		var imgOn = document.createElement('img');
		setImgSrc(imgOn, fixRoot('/images/indicators/EchoLevelOn.png'));
		imgOn.style.position = 'absolute';
		imgOn.style.left = px(left);
		imgOn.style.top = px(0);
		imgOn.style.display = 'none';
		divEchoLevelMeterFront.appendChild(imgOn);
		echoLevelIndicators[which].push(imgOn);

		left += 5;
	}
	divEchoLevel.appendChild(divEchoLevelMeterBack);
	divEchoLevel.appendChild(divEchoLevelMeterFront);
	parent.appendChild(divEchoLevel);
}

function layoutEchoLevelIndicator(y) {
	var divEchoLevel = getById('zId_divEchoLevel');
	if(divEchoLevel) {
		divEchoLevel.style.top = px(y);
	}
}

function SignalMicrophoneLevel(Level)
{
	if(window.parent && window.parent.externSignalMicrophoneLevel)
	{
		window.parent.externSignalMicrophoneLevel(Level);
	}

	
	var level = parseInt(Level, 10);
	var nOn = Math.round(level * levelIndicatorSlots / 255);
	
	for(var which = 0; which < nOn; which++)
	{
		micLevelIndicators[which][0].style.display = 'none';
		micLevelIndicators[which][1].style.display = 'block';
	}
	for(; which < levelIndicatorSlots; which++)
	{
		micLevelIndicators[which][0].style.display = 'block';
		micLevelIndicators[which][1].style.display = 'none';
	}
}

function createDeviceCloseButton(divDevice) {
	var aDeviceClose = _a();
	aDeviceClose.href = '#';
	aDeviceClose.onclick = function() {
		openDevices();
		return false;
	}
	var imgDeviceClose = img();
	setImgSrc(imgDeviceClose, getPathCustomizedButtonOnControl() + 'CloseButtonWord.png');
	imgDeviceClose.onmousedown = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'CloseButtonWords.png');
		return false;
	}
	imgDeviceClose.onmouseup = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'CloseButtonWord.png');
		return false;
	}
	imgDeviceClose.onmouseout = function() {
		setImgSrc(this, getPathCustomizedButtonOnControl() + 'CloseButtonWord.png');
		return false;
	}
	imgDeviceClose.onmousemove = function() {
		return false;
	}
	imgDeviceClose.style.border = 'none';

	aDeviceClose.style.position = 'absolute';
	aDeviceClose.style.right = px(16);
	aDeviceClose.style.bottom = px(16);
	divDevice.appendChild(aDeviceClose);
	aDeviceClose.appendChild(imgDeviceClose);
}

function createDevice(parent) {
	var divDevice = document.createElement('div');
	divDevice.id = 'zId_divDevice';
	setElementClassName(divDevice, 'zClass_controlColors');
	parent.appendChild(divDevice);
	
//	createDeviceCloseButton(divDevice);
	
	// WEBCAM:
	createCamWord(divDevice);
	createCamLabel(divDevice);
	createCamSelect(divDevice);
	
	// MICROPHONE:
	createMicWord(divDevice);
	createMicLabel(divDevice);
	createMicSelect(divDevice);
	createRecLevelLabel(divDevice);
	var agcEnabled = jsSettings.AGCMode;
	createCustomCheckbox(divDevice, agcCheckboxDef, agcEnabled);
	createCustomSlider(divDevice, micSliderDef, 0, 255, jsSettings.RecordingLevel, devicesLeft, 0, !agcEnabled);
	createSaySomething(divDevice);
	createMicLevelIndicator(divDevice);
	
	// SPEAKERS OR HEADSET:
	createSpeakerWord(divDevice);
	createAudioOutputLabel(divDevice);
	createSpeakSelect(divDevice);
	createPlaybackLevelLabel(divDevice);
	createCustomSlider(divDevice, speakSliderDef, 0, 255, jsSettings.PlaybackLevel, devicesLeft, 0, true);
	createClickToTestLabel(divDevice);

	createGoDingButton(divDevice);
	createEchoLabel(divDevice);
	createEchoLevelIndicator(divDevice);
	
	createEchoResult(divDevice);
	updateEchoLevel(jsSettings.EchoLevel, jsSettings.EchoState);
	
	layoutDevices();
	
	setTimeout(initGetDevices, 250);
	
	return divDevice;
}

var maxDevicesSep = 33;
function layoutDevices() {

	var divMain = getById('zId_divMain');
	if(!divMain) return;
	
	var sep = maxDevicesSep;
	var lack = 470 - divMain.offsetHeight;
	if(lack > 0) {
		var shift = lack / 11;
		sep = maxDevicesSep - shift;
	}
	
	y = 0;
	var headerOffsetCorrection = 10;
	
	// WEBCAM:
	layoutCamWord(y); y += sep - headerOffsetCorrection;
	layoutCamLabel(y); layoutCamSelect(y); y += sep;
	
	// MICROPHONE:
	layoutMicWord(y); y += sep - headerOffsetCorrection;
	layoutMicLabel(y); layoutMicSelect(y); y += sep;
	
	layoutRecLevelLabel(y);
	var agcCheckBox = getById('zId_agcCheckbox');
	if(agcCheckBox) {
		agcCheckBox.style.top = px(y);
	}
	var micSlider = getById('zId_micSlider');
	if(micSlider) {
		micSlider.style.top = px(y + 3);
	}
	y += sep;

	layoutSaySomething(y);
	layoutMicLevelIndicator(y + 2); y += sep;
	
	// SPEAKERS OR HEADSET:
	layoutSpeakerWord(y); y += sep - headerOffsetCorrection;
	
	layoutAudioOutputLabel(y);
	layoutSpeakSelect(y); y += sep;
	
	layoutPlaybackLevelLabel(y);
	var speakSlider = getById('zId_speakSlider');
	if(speakSlider) {
		speakSlider.style.top = px(y);
	}
	y += sep;
	
	layoutClickToTestLabel(y);
	layoutGoDingButton(y); y += sep;
	
	layoutEchoLabel(y);
	layoutEchoLevelIndicator(y + 2); y += sep;
	
	layoutEchoResult(y);
}

function initGetDevices() {
	getDevices();
	if(!gotDevicesOnce) {
		setTimeout(initGetDevices, 250);
	}
}

function createZorapCtrlBackground() {
	var divZorapCtrlBackground = div('zId_divZorapCtrlBackground');
	return divZorapCtrlBackground;
}

function getRightSlideBarState() {
    var divRightSlideBar = document.getElementById('zId_divRightSlideBar');
    if(divRightSlideBar) {
        return divRightSlideBar.state;
    }
    return 'out';
}

function setRightSlideBarState(state) {
    var divRightSlideBar = document.getElementById('zId_divRightSlideBar');
    if(divRightSlideBar) {
        divRightSlideBar.state = state;
    }
}

function getLeftSlideBarState() {
    var divLeftSlideBar = document.getElementById('zId_divLeftSlideBar');
    if(divLeftSlideBar) {
        return divLeftSlideBar.state;
    }
    return 'out';
}

function setLeftSlideBarState(state) {
    var divLeftSlideBar = document.getElementById('zId_divLeftSlideBar');
    if(divLeftSlideBar) {
        divLeftSlideBar.state = state;
    }
}

var scrollingChatAreaRightMargin = 14;
function createScrollingChatArea(parent) {
	var divScrollingChatArea = div('zId_divScrollingChatArea', 'zClass_controlColors');
	divScrollingChatArea.onmouseover = function() {
		scrollingMessagesPause = true;
	}
	divScrollingChatArea.onmouseout = function() {
		scrollingMessagesPause = false;
	}
	parent.appendChild(divScrollingChatArea);
	return divScrollingChatArea;
}

function MicQueueMenu(parent)
{
	var _button = new ZButton(
		parent.getDiv(),
		getPathCustomizedButtonOnControl() + 'RoomButtonPointingDown.png',
		getPathCustomizedButtonOnControl() + 'RoomButtonPointingDown.png',
		getPathCustomizedButtonOnControl() + 'RoomButtonPointingDownS.png',
		'',
		'',
		0, 0,
		null, null,
		10,
		8,
		function()
		{
			var info = new Object();
			info.itemSource = 'PartList';
			info.senderName = parent.getName();
			info.uid = parent.getId();
			
			// queue messages while menu is displayed, so that participant list doesn't jump around
			parent.setLocked(true);
			doPopupMenu(
				info,
				_button.getAbsX(),
				_button.getAbsY() + _button.getHeight(),
				getWinWidth() + getWindowScrollX() - 1 
			)
		}
	);
	zButtons.push(_button);
}

function MicQueueMeter(parent)
{
	var _div = div();
	_div.style.position = 'absolute';
	setLeft(_div, 9);
	append(parent.getDiv(), _div);

	var _awayIndicator = new _Indicator('Images/Room/AudioLevelAway.png', 'Away');
	var _blockedIndicator = new _Indicator('Images/Room/AudioLevelBlocked.png', 'Blocked');

	var _audioLevelIndicators = new Array();
	for(var which = 0; which < 8; which++)
	{
		_audioLevelIndicators.push(new _Indicator('Images/Room/AudioLevel' + which + '.png', ''));
	}	

	var _level = -1;
	var _status = '';
	
	this.setLevel = function(level, status)
	{
		if(level != _level || status != _status)
		{
			_level = level;
			_status = status;
			
			_awayIndicator.show(false);
			_blockedIndicator.show(false);
			for(var which = 0; which < 8; which++)
			{
				_audioLevelIndicators[which].show(false);
			}				
			
			if(status == 'away')
			{
				_awayIndicator.show(true);
			}
			else if(status == 'blocked')
			{
				_blockedIndicator.show(true);
			}
			else
			{
				level = Math.round(level * 9 / 256);
				if(level > _audioLevelIndicators.length)
				{
					level = _audioLevelIndicators.length;
				}
				if(level > 0)
				{
					_audioLevelIndicators[level - 1].show(true);
				}
			}
		}
	}

	function _Indicator(image, title)
	{
		var _divIndicator = div();
		_divIndicator.title = title;
		_divIndicator.style.position = 'absolute';
		_divIndicator.style.backgroundImage = makeCSSUrl(image);
		setLeft(_divIndicator, 0);
		setTop(_divIndicator, -1);
		setWidth(_divIndicator, 18);
		setHeight(_divIndicator, 15);
		append(_div, _divIndicator);	
		showElement(_divIndicator, false);
		
		this.show = function(s)
		{
			showElement(_divIndicator, s);
		}
	}
}

function MicQueueRoleIndicator(parent)
{
	var _div = div();
	_div.style.position = 'absolute';
	setLeft(_div, 21);
	append(parent.getDiv(), _div);
	
	var _role = '';

	var _divModerator = new _Indicator('Images/Room/RoleModerator.png', 'Moderator');
	var _divObserver = new _Indicator('Images/Room/RoleObserver.png', 'Observer');
	var _divParticipant = new _Indicator('Images/Room/RoleParticipant.png', 'Participant');
	var _divPresenter = new _Indicator('Images/Room/RolePresenter.png', 'Presenter');
	
	function _Indicator(image, title)
	{
		var _divIndicator = div();
		_divIndicator.title = title;
		_divIndicator.style.position = 'absolute';
		_divIndicator.style.backgroundImage = makeCSSUrl(image);
		setLeft(_divIndicator, 0);
		setTop(_divIndicator, -1);
		setWidth(_divIndicator, 18);
		setHeight(_divIndicator, 15);
		append(_div, _divIndicator);	
		showElement(_divIndicator, false);
		
		this.show = function(s)
		{
			showElement(_divIndicator, s);
		}
	}
	
	this.setRole = function(role)
	{
		if(role != _role)
		{
			_role = role;
			
			_divModerator.show(false);
			_divObserver.show(false);
			_divParticipant.show(false);
			_divPresenter.show(false);

			if(role == 'moderator')
			{
				_divModerator.show(true);
			}
			else if(role == 'observer')
			{
				_divObserver.show(true);
			}
			else if(role == 'participant')
			{
				_divParticipant.show(true);
			}
			else if(role == 'presenter')
			{
				_divPresenter.show(true);
			}
		}
	}
}

function MicQueueElement(parent, pos, what)
{
	var _div = div();
	this.getDiv = function()
	{
		return _div;
	}
	_div.style.position = 'absolute';
	setLeft(_div, 0);
	setTop(_div, pos * 15);
	append(parent.getDiv(), _div);
	
	var _micQueueMenu = new MicQueueMenu(this);	
	var _micQueueMeter = new MicQueueMeter(this);	

	var oldWay = !jsSettings.IsNewZorap;
	var _micQueueRoleIndicator = oldWay ? null : new MicQueueRoleIndicator(this);
	
	var _spanName = span('', 'zClass_spanMicQueue');
	_spanName.style.position = 'absolute';
	append(_div, _spanName);
	var nameLeft = _micQueueRoleIndicator ? 37 : 26;
	setLeft(_spanName, nameLeft);
	
	var _what = null;
	
	this.getName = function()
	{
		if(_what && _what.name) return _what.name;
		return '';
	}
	
	this.getId = function()
	{
		if(_what && _what.uid) return _what.uid;
		return '';
	}

	this.setLocked = function(l)
	{
		parent.setLocked(l);
	}
	
	this.update = function(what)
	{
		_what = what;
		_what.name = unescape(what.name);
		if(what)
		{
			if(what.name && what.name != '(unknown)')
			{
				setElementText(_spanName, what.name);
			}
			if(what.role && _micQueueRoleIndicator)
			{
				_micQueueRoleIndicator.setRole(what.role);
			}
			if(what.level || what.level === 0)
			{
				var status = what.status ? what.status : '';
				
				if(what.AlertStatus)
				{
					if(what.AlertStatus == 'Away')
					{
						status = 'away';					
					}
					else if(what.AlertStatus == 'BlockedYou')
					{
						status = 'blocked';
					}
					else if(what.AlertStatus == 'BlockedThem')
					{
						status = 'blocked';
					}
				}
				_micQueueMeter.setLevel(what.level, status);
			}
		}
	}
	this.update(what);
	
	this.remove = function()
	{
		removeElement(_div);
	}
}

function MicQueue(parent)
{
	var _this = this;
	var _div = div('', 'zClass_text zClass_textSmaller');
	this.getDiv = function()
	{
		return _div;
	}
	_div.style.position = 'absolute';
	_div.style.overflowX = 'hidden';
	_div.style.overflowY = 'auto';
	setLeft(_div, 4);
	setTop(_div, 4);
	setRight(_div, 1);
	setBottom(_div, 4);
	append(parent, _div);
	
	var _elements = new Array();

	var _locked = false;
	var _messageQueue = new Array();
	
	function _executeQueuedMessages()
	{
		for(var which = 0; which < _messageQueue.length; which++)
		{
			var what = _messageQueue[which];
			if(what.type == 'sizechange')
			{
				_sizeList(what.size);
			}
			else
			{
				if(what.type == 'update')
				{
					_updateList(what.info);
				}
			}
		}
		_messageQueue.length = 0;
	}

	this.setLocked = function(l)
	{
		_locked = l;
		
		if(l == false)
		{
			_executeQueuedMessages();
		}
	}

	function _sizeList(size)
	{
		for(var which = size; which < _elements.length; which++)
		{
			_elements[which].remove();
		}
		if(size < _elements.length)
		{
			_elements.splice(size, _elements.length - size);
		}
	}
	
	function _updateList(what)
	{
		if(what.pos < _elements.length)
		{
			_elements[what.pos].update(what);
		}
		else
		{
			for(var which = _elements.length; which <= what.pos; which++)
			{
				if(which == what.pos)
				{
					_elements[which] = new MicQueueElement(_this, which, what);
				}
				else
				{
					_elements[which] = new MicQueueElement(_this, which, null);
				}
			}
		}
	}
	
	this.signalSizeChanged = function(size)
	{
		if(_locked)
		{
			var what = new Object();
			what.type = 'sizechange';
			what.size = size;
			
			_messageQueue.push(what);
		}
		else
		{
			_sizeList(size);
		}
	}
	
	this.signalUpdate = function(info)
	{
		if(_locked)
		{
			var what = new Object();
			what.type = 'update';
			what.info = info;

			_messageQueue.push(what);
		}
		else
		{
			_updateList(info);
		}	
	}
}

function sizeParticipantList(size)
{
	if(jsGlobalObjects.micQueue)
	{
		jsGlobalObjects.micQueue.signalSizeChanged(size);
	}
}

function signalParticipantListSizeChanged(size)
{
	if(jsGlobalObjects.micQueue)
	{
		jsGlobalObjects.micQueue.signalSizeChanged(size);
	}
}

// find the zorap div, and add our controls
var zorapControlsInitialized = false;
function initZorapControls()
{
    // use the hook to find our home div
    var divMain = document.getElementById('zId_divMain');
    if(divMain)
    {
		var divButtonBar = createButtonBar(divMain);

        var divCenter = document.createElement('div');
        divCenter.id = 'zId_divCenter';
        divMain.appendChild(divCenter);	

		var leftOpen = readCookie_bool('leftOpen', true, bool_outin);
		var divLeftSlideBar = createSlideBar(divMain, 'zId_divLeftSlideBar', onclickLeftSlideBar, false, leftOpen);
		var rightOpen = readCookie_bool('rightOpen', true, bool_outin);
		var divRightSlideBar = createSlideBar(divMain, 'zId_divRightSlideBar', onclickRightSlideBar, true, rightOpen);

        var divRight = document.createElement('div');
        divRight.id = 'zId_divRight';
        setElementClassName(divRight, 'zClass_controlColors');
        divMain.appendChild(divRight);

        var divLeft = document.createElement('div');
        divLeft.id = 'zId_divLeft';
        setElementClassName(divLeft, 'zClass_controlColors');
        divMain.appendChild(divLeft);

        var divZorapCtrlArea = document.createElement('div');
        divZorapCtrlArea.id = 'zId_divZorapCtrlArea';
        divCenter.appendChild(divZorapCtrlArea);
        
        var divZorapCtrlBackground = createZorapCtrlBackground();
        divZorapCtrlArea.appendChild(divZorapCtrlBackground);

        var divZorapCtrl = document.createElement('div');
        divZorapCtrl.id = 'zId_divZorapCtrl';
        divZorapCtrlArea.appendChild(divZorapCtrl);
        
        var divBottom = document.createElement('div');
        divBottom.id = 'zId_divBottom';
        setElementClassName(divBottom, 'zClass_controlColors');
        divCenter.appendChild(divBottom);	
        
        divScrollingChatArea = createScrollingChatArea(divBottom);
        createSignalStrength(divBottom);
        createActivity(divBottom);
        createUpload(divBottom);
        if(jsSettings.IsNewZorap)
        {
			divBottom.style.display = 'none';
		}
        
        var divShareArea = div('zId_divShareArea');
        append(divLeft, divShareArea);
        var divShareBackground = div('zId_divShareBackground');
		setBackgroundColor(divShareBackground, PageColor);//xxx
		append(divShareArea, divShareBackground);
        var divShare = createShare(divShareBackground);

		var divChatPanel = document.createElement('div');
		divRight.appendChild(divChatPanel);

		var divMicQueueBackgroundOuter = div('divMicQueueBackgroundOuter');
		setBackgroundColor(divMicQueueBackgroundOuter, PageColor);//xxx
		append(divChatPanel, divMicQueueBackgroundOuter);
		var divMicQueueBackgroundInner = div('divMicQueueBackgroundInner');
		setBackgroundColor(divMicQueueBackgroundInner, ControlColor);//xxx
		append(divMicQueueBackgroundOuter, divMicQueueBackgroundInner);
		jsGlobalObjects.micQueue = new MicQueue(divMicQueueBackgroundInner);

		var divHistoryBackgroundOuter = div('zId_divHistoryBackgroundOuter');
		setBackgroundColor(divHistoryBackgroundOuter, PageColor);//xxx
		append(divChatPanel, divHistoryBackgroundOuter);
		var divHistoryBackgroundInner = div('zId_divHistoryBackgroundInner');
		setBackgroundColor(divHistoryBackgroundInner, ControlColor);//xxx
		append(divHistoryBackgroundOuter, divHistoryBackgroundInner);
		var divHistory = createHistory(divHistoryBackgroundInner);
        
		var divDevicePanel = document.createElement('div');
		divDevicePanel.id = 'zId_divDevicePanel';
		divRight.appendChild(divDevicePanel);

		var divDeviceBackgroundOuter = div('zId_divDeviceBackgroundOuter');
		setBackgroundColor(divDeviceBackgroundOuter, PageColor);//xxx
		append(divDevicePanel, divDeviceBackgroundOuter);
		var divDeviceBackgroundInner = div('zId_divDeviceBackgroundInner');
		setBackgroundColor(divDeviceBackgroundInner, ControlColor);//xxx
		append(divDeviceBackgroundOuter, divDeviceBackgroundInner);
		var divDevice = createDevice(divDeviceBackgroundInner);

		// set a bunch of sizes
		var h1 = divMain.offsetHeight - divButtonBar.offsetHeight;
		if(!jsSettings.IsNewZorap )
		{
			h1 -= 2;
		}
		var h2 = h1 - divBottom.offsetHeight;

		divLeftSlideBar.style.top = px(divButtonBar.offsetHeight);
        divLeftSlideBar.style.height = px(h2);
        if(leftOpen) {
			divLeftSlideBar.style.left = px(divLeft.offsetWidth);
		}
		else divLeftSlideBar.style.left = px(0);
        divLeftSlideBar.positionArrow();
		
		divRightSlideBar.style.top = px(divButtonBar.offsetHeight);
		var rightPanelX = divMain.offsetWidth - divRightSlideBar.offsetWidth;
		if(rightOpen)
		{
			if(devicesState == 'open')
			{
				rightPanelX -= deviceSlideWidth;
			}
			else
			{
				rightPanelX -= chatSlideWidth;
			}
		}
        divRightSlideBar.style.left = px(rightPanelX);
		divBottom.style.width = px(rightPanelX);
		
		divScrollingChatArea.style.left = px(287);
		divScrollingChatArea.style.width = px(rightPanelX - 287 - scrollingChatAreaRightMargin);
        divRightSlideBar.style.height = px(h1);
        divRightSlideBar.positionArrow();
        
        divCenter.style.top = px(divButtonBar.offsetHeight);
		divCenter.style.height = px(h1);
		divBottom.style.top = px(divCenter.offsetHeight - divBottom.offsetHeight);

		divLeft.style.top = px(divButtonBar.offsetHeight);
        divLeft.style.height = px(h2);
        divShareArea.style.height = px(h2);

		divRight.style.top = px(divButtonBar.offsetHeight);
        divRight.style.height = px(h1);
		divRight.style.left = px(rightPanelX + divRightSlideBar.offsetWidth);
		if(devicesState == 'open')
		{
			divRight.style.width = px(deviceSlideWidth);
		}
		else
		{
			divRight.style.width = px(chatSlideWidth);
		}		
        
        divZorapCtrlArea.style.height = px(h2);
//		divHistoryBackgroundOuter.style.height = px(divRight.offsetHeight - 122);
//		divDeviceArea.style.width = px(deviceSlideWidth);
//		divDeviceArea.style.height = px(divRight.offsetHeight);

       	layoutShareButtons();
        
//       	var ulMicQueue = document.getElementById('zId_ulMicQueue');//ntrjnn:
//		ulMicQueue.style.height = px(divMicQueue.offsetHeight - ulMicQueue.offsetTop - 4);//ntrjnn:
//		ulMicQueue.style.width = px(divMicQueue.offsetWidth - 2);//ntrjnn:
		
		// set the list height...if you don't, the list can suddenly become taller than the div sometimes.
		// and subtract 4 because it looks nicer if the text doesn't go too low.
		var ulHistory = document.getElementById('zId_ulHistory');
		var inputTextChat = document.getElementById('divTextChatBackgroundOuter');
		ulHistory.style.height = px(inputTextChat.offsetTop - ulHistory.offsetTop - 10);
		ulHistory.style.width = px(divHistory.offsetWidth - 2);
		
		if(!leftOpen)
		{
			setAlpha(divLeft, 1);
			divLeft.style.display = 'none';
		}
		if(!(devicesState == 'open'))
		{
			divDevicePanel.style.display = 'none';
			showDeviceDropdowns(false);
		}
		if(!rightOpen)
		{
			setAlpha(divRight, 1);
			divRight.style.display = 'none';
		}
    }
    zorapControlsInitialized = true;
}

var justRefreshing = false;

var startupDialog_zorapCtrl = 'zorap_ctrl';
var startupDialog_welcome = 'welcome';
var startupDialog_welcome_wait = 'welcome_wait';
var startupDialog_welcome_done = 'welcome_done';
var startupDialog_invite = 'invite';
var startupDialogsDone = false;

// This is a hack cause clients prior to 2.1.0.8 didn't have a way to modify initial settings before calling GoodToGo()
var hackLateChangeMyName = true;
var hackLateSetLock = true;

var startupDialogs = new Array();

function signalStartupDialogsDone()
{
	if(!startupDialogsDone)
	{
		startupDialogsDone = true;
		var popupBackground = getById('popupBackground');
		popupBackground.parentNode.removeChild(popupBackground);
	}
}

function showPTT(s)
{
	showElement(getById('zId_divTalkControl'), s);
	onLockAir(false);
}

function showMicButton(s)
{
	onLockAir(false);
	for(var whichButton = 0; whichButton < buttons.length; whichButton++)
	{
		var button = buttons[whichButton];
		if(button.which == 'mic')
		{
			button.show(s);
		}
	}
}

function onCloseDevicesDialog(userChoseDeadMic, userChoseUsePTT)
{
	jsSettings.UserChoseDeadMic = userChoseDeadMic;
	jsSettings.UserChoseUsePTT = userChoseUsePTT;
	
	if(userChoseDeadMic)
	{
		showMicButton(false);
		showPTT(false);
	}
	else if(userChoseUsePTT)
	{
		showMicButton(false);
		showPTT(true);
	}
	else
	{
		showMicButton(true);
		showPTT(false);
	}
}

function waitForDevicesDialog()
{
	if(window.parent && window.parent.hasDevicesDialog)
	{
		var has = window.parent.hasDevicesDialog();
		if(has)
		{
			setTimeout(waitForDevicesDialog, 100);
		}
		else
		{
			runNextStartupDialog();
		}
	}
	else runNextStartupDialog();
}

function signalParentGoodToGo()
{
	if(window.parent && window.parent.onRoomGoodToGo)
	{
		window.parent.onRoomGoodToGo();
	}
}

function runNextStartupDialog()
{
	if(jsSettings.GoodToGo) return;
	var inviteBackground = getById('inviteBackground');
	if(inviteBackground)
	{
		inviteBackground.parentNode.removeChild(inviteBackground);
	}

	var dialog = '';
	if(startupDialogs.length > 0)
	{
		dialog = startupDialogs.shift();
	}
	else
	{
		signalStartupDialogsDone();
		
		if(zorapStarted ||
			(!isMac() && versionCompare(installedVersion, '2,1,1,8')) ||
			(isMac() && versionCompare(installedVersion, '2,0,3,8'))
		)
		{
			try
			{
				getZorapCtrl().GoodToGo();
				setTimeout(signalParentGoodToGo, 2500);
				jsSettings.GoodToGo = true;
				
				if(hackLateChangeMyName)
				{
					setTimeout
					(
						function()
						{
							zorapCtrlChangeMyName(jsSettings.DisplayName);
						}
						,
						1000
					);
				}
				
				if(hackLateSetLock)
				{
					setTimeout
					(
						function()
						{
							zorapCtrlSetLock(jsSettings.TalkLock);
						}
						,
						1000
					);
				}
			}
			catch(e)
			{
			}
			if(!jsSettings.GoodToGo)
			{
				setTimeout(runNextStartupDialog, 500);
			}
			return;
		}
		setTimeout(runNextStartupDialog, 500);
	}
	
	if(dialog == startupDialog_zorapCtrl)
	{
		createButtons();	
		var divMain = getById('zId_divMain');
		var divLeft = getById('zId_divLeft');
		var divLeftSlideBar = getById('zId_divLeftSlideBar');
		var divZorapCtrl = getById('zId_divZorapCtrl');
		var divRightSlideBar = getById('zId_divRightSlideBar');
		var leftPanelWidth = divLeft.offsetWidth + divLeftSlideBar.offsetWidth;
		var rightPanelX = divMain.offsetWidth - divRightSlideBar.offsetWidth;
		var rightSlideBarState = divRightSlideBar.state;
		var rightOpen = rightSlideBarState == 'out';
		if(rightOpen) {
			if(devicesState == 'open') {
				rightPanelX -= deviceSlideWidth;
			}
			else {
				rightPanelX -= chatSlideWidth;
			}
		}		
		createZorapCtrl(divZorapCtrl, leftPanelWidth, 0, rightPanelX - leftPanelWidth, divZorapCtrl.offsetHeight);
		
		if(justRefreshing)
		{
		    setTimeout(runNextStartupDialog, 500);// wait, to make sure Ping gets called before GoodToGo() // ntrjn: rewrite this stuff
		}
		else
		{
			runNextStartupDialog();
		}
	}
	else if(dialog == startupDialog_welcome)
	{
		doWelcome();
	}
	else if(dialog == startupDialog_welcome_wait)
	{
		if(window.parent && window.parent.doWelcomeWait)
		{
			var type = isFirstTime() ? 'wait' : 'connecting';
			window.parent.doWelcomeWait(type);
		}
		else
		{
			runNextStartupDialog();
		}
	}
	else if(dialog == startupDialog_welcome_done)
	{
		if(jsSettings.AudioSetupResult == 'ok')
		{
			if(isFirstTime() && window.parent && window.parent.doWelcomeDone)
			{
				window.parent.doWelcomeDone();
				setTimeout(
					function()
					{
						if(window.parent && window.parent.removeWelcomeDone)
						{
							window.parent.removeWelcomeDone();
						}
						runNextStartupDialog();
					},
					2000
				);
			}
			else
			{
				runNextStartupDialog();
			}
		}
		else
		{
			if(window.parent && window.parent.doDevicesDialog)
			{
				window.parent.doDevicesDialog();
				waitForDevicesDialog();
			}
			else
			{
				runNextStartupDialog();
			}		
		}
	}
	else if(dialog == startupDialog_invite)
	{
		doInvite(false);
	}
}

function SignalAudioSetupResult(status, recordingDevice, playbackDevice)
{
	if(window.parent && window.parent.removeWelcomeWait)
	{
		window.parent.removeWelcomeWait();
	}
    jsSettings.Mic = recordingDevice;
    saveSetting('mic', recordingDevice);
    jsSettings.Speakers = playbackDevice;
    saveSetting('speakers', playbackDevice);
    
    jsSettings.AudioSetupResult = status;
    
    if(jsSettings.IsNewZorap)
    {
		setTimeout(runNextStartupDialog, 500);// wait, to make sure Ping gets called before GoodToGo() // ntrjn: rewrite this stuff
	}
}

function SignalMicStatus(status)
{
	jsSettings.MicStatus = status;
	if(window.parent && window.parent.externSignalMicStatus)
	{
		window.parent.externSignalMicStatus(status);
	}
}

function doStartupDialogs()
{
	var divMain = getById('zId_divMain');
	var popupBackground = div('popupBackground');
	append(divMain, popupBackground);
	
	if(checkInstall(divMain))
	{
		if(settings.ShowDialogs)
		{
			var refreshCookie = readCookie('refresh' + settings.GID);
			if(refreshCookie && refreshCookie == 'true')
			{
				justRefreshing = true;
			}
			
			startupDialogs.push(startupDialog_zorapCtrl);
			
			if(justRefreshing)
			{
				changeMyName(jsSettings.DisplayName, true, true);
			}
			else
			{
				// Okay, here is a crazy hack:
				// Firefox 3.0.15 goes blank on my Vista laptop upon attempting
				// to show the Invite dialog (below). However, the problem goes away
				// if we simply create a hidden Invite dialog beforehand. JNE Dec 14 2009
				if(settings.ShowInvitationDialog && 
					readCookie_bool('showinvite', true) &&
					BrowserDetect.browser == 'Firefox')
				{
					doInvite(true);
					var inviteBackground = getById('inviteBackground');
					if(inviteBackground)
					{
						inviteBackground.parentNode.removeChild(inviteBackground);
					}
				}
				if(!jsSettings.IsNewZorap)
				{
					startupDialogs.push(startupDialog_welcome);
				}
			}
			if(!justRefreshing)
			{
				if(jsSettings.IsNewZorap)
				{
					startupDialogs.push(startupDialog_welcome_wait);
					startupDialogs.push(startupDialog_welcome_done);
				}
			}

			if(!justRefreshing)
			{
				if(!jsSettings.IsNewZorap && settings.ShowInvitationDialog && readCookie_bool('showinvite', true))
				{
					startupDialogs.push(startupDialog_invite);
				}
			}
		}
		else
		{
			startupDialogs.push(startupDialog_zorapCtrl);
		}
		runNextStartupDialog();
	}
}

// getting our own control is more complicated than one would like, due to an apparent bug in Firefox 2.0
// document.getElementById() sometimes throws an exception, in which case we display an error, which seems to
// cause getElementById() to wfork the next time.
function getZorapCtrl() {
    
    // try to get in ordinary fashion
    try {    
        var zorapCtrl = document.getElementById('zId_ZorapCtrl');
        return zorapCtrl;
    }
    catch (e) {
        alert('JavaScript error. Please try again.');
    }
    return null;
}

function onLoad() {
    // done with it
    removeEventSimple(window, 'load', onLoad);
    var ready = false;
    try
    {
		// wait for files to load
        if(requiredV1Win && requiredV1Mac && SessionServerIP)
        {
            ready = true;
        }
    }
    catch(e)
    {
    }
    if(!ready)
    {
        setTimeout(onLoad, 500);
        return;
    }
    
    onLoadZorapVersion();
    initJSSettings();
	addButtons();
	addShareButtons();
	
	var roomName = settings.RoomName;
	if(roomName)
	{
		document.title = "Zorap - " + roomName;
	}
	
	initUI();
}

function getRed(colorString) {
	var c = colorString.substring(1, 3);
	return parseInt(c, 16);
}

function getGreen(colorString) {
	var c = colorString.substring(3, 5);
	return parseInt(c, 16);
}

function getBlue(colorString) {
	var c = colorString.substring(5);
	return parseInt(c, 16);
}

function computeBrightness(colorString) {
	var r = getRed(colorString);
	var g = getGreen(colorString);
	var b = getBlue(colorString);
	
	return Math.round(Math.sqrt(.241 * r * r + .691 * g * g + .068 * b * b ));
}

function createLogo(parent) {
	
	var logoUrl = settings.LogoUrl;
	if(logoUrl)
	{
		var imgLogoSquares = document.createElement('img');
		imgLogoSquares.id = 'zId_imgLogoSquares';
		imgLogoSquares.src = fixRoot('/' + logoUrl);
		parent.appendChild(imgLogoSquares);
		
		var pageColorTileUrl = settings.PageColorTileUrl;
		if(pageColorTileUrl)
		{
			var pageColorTileUrl = fixRoot('/' + pageColorTileUrl);
	
			document.body.style.backgroundImage = "url('" + pageColorTileUrl + "')";
		}
		return;
	}
	
	var brightness = computeBrightness(jsSettings.PageColor);

	var imgLogoSquares = document.createElement('img');
	imgLogoSquares.id = 'zId_imgLogoSquares';
	if(brightness > 224) {
		setImgSrc(imgLogoSquares, fixRoot('/images/ZorapLogoSquaresBlack.png'));
	}
	else {
		setImgSrc(imgLogoSquares, fixRoot('/images/ZorapLogoSquaresWhite.png'));
	}
	parent.appendChild(imgLogoSquares);

	var imgLogoWord = document.createElement('img');
	imgLogoWord.id = 'zId_imgLogoWord';
	if(brightness < 64) {
		setImgSrc(imgLogoWord, fixRoot('/images/ZorapLogoWordWhite.png'));
	}
	else {
		setImgSrc(imgLogoWord, fixRoot('/images/ZorapLogoWordBlack.png'));
	}
	parent.appendChild(imgLogoWord);
}

function onclickAlert() {
	var aErrorMessage = document.getElementById('zId_aErrorMessage');
	if(aErrorMessage) {
		if(aErrorMessage.zLink) {
			if(aErrorMessage.zLink == 'audiosettings') {
				if(getRightSlideBarState() == 'out' || 
					getRightSlideBarState() == 'in') {
					if(devicesState == 'open') {
					}
					else if(devicesState == 'closed') {
						devicesState = 'opening';
						animateRightSlideBar();
					}
				}
			}
		}
	}
	return false;
}

function createErrorMessage(parent) {
	var divErrorMessage = div('zId_divErrorMessage');
	var imgErrorMessage = img('zId_imgErrorMessage');
	imgErrorMessage.src = '';
	divErrorMessage.appendChild(imgErrorMessage);
	divErrorMessage.appendChild(document.createTextNode('\u00a0'));
	var aErrorMessage = document.createElement('a');
	aErrorMessage.href = '#';
	aErrorMessage.id = 'zId_aErrorMessage';
	aErrorMessage.style.textDecoration = 'none';
	aErrorMessage.onclick = onclickAlert;
	var spanErrorMessage = span('zId_spanErrorMessage', 'zClass_text');
	aErrorMessage.appendChild(spanErrorMessage);
	divErrorMessage.appendChild(aErrorMessage);
	parent.appendChild(divErrorMessage);
    divErrorMessage.style.left = px(parent.offsetWidth - 650);

	var divErrorInfo = div('zId_divErrorInfo');
	
	if(settings.ZorapHeaderLayout == 'normal')
	{
		divErrorMessage.style.top = px(-3);
		divErrorInfo.style.top = px(14);
	}
	
	var aErrorInfo = _a('zId_aErrorInfo');
	divErrorInfo.appendChild(aErrorInfo);
   	
	var spanErrorInfo = span('zId_spanErrorInfo', 'zClass_text zClass_textSmaller');
	aErrorInfo.href = '#';
	aErrorInfo.style.textDecoration = 'none';
	aErrorInfo.onclick = onclickAlert;
	spanErrorInfo.innerHTML = 'what';
    aErrorInfo.appendChild(spanErrorInfo);
	divErrorInfo.style.left = px(divErrorMessage.offsetLeft + 14);
	parent.appendChild(divErrorInfo);
	
	divErrorMessage.style.display = 'none';
	divErrorInfo.style.display = 'none';
	
	return divErrorMessage;
}

function signalAlertStatus(alert) {
	if(alert.severity) {
		var aErrorMessage = document.getElementById('zId_aErrorMessage');
		if(aErrorMessage) {
			aErrorMessage.zLink = alert.link;
			if(alert.link) {
				aErrorMessage.style.cursor = 'pointer';
			}
			else {
				aErrorMessage.style.cursor = 'default';
			}
		}
		var divErrorMessage = document.getElementById('zId_divErrorMessage')
		if(divErrorMessage) {
			divErrorMessage.style.display = 'block';
			var imgErrorMessage = document.getElementById('zId_imgErrorMessage')
			if(imgErrorMessage) {
				var imgPath = getPathCustomizedOnPage();
				if(alert.severity == 'Ok') {
					setImgSrc(imgErrorMessage, imgPath + 'GreenDot.png');
				}
				else if(alert.severity == 'Info') {
					setImgSrc(imgErrorMessage, imgPath + 'BlueDot.png');		
				}
				else if(alert.severity == 'Warning') {
					setImgSrc(imgErrorMessage, imgPath + 'YellowDot.png');
				}
				else if(alert.severity == 'Critical') {
					setImgSrc(imgErrorMessage, imgPath + 'RedDot.png');
				}
				else {
					setImgSrc(imgErrorMessage, imgPath + 'GreenDot.png');
				}
			}
			var spanErrorMessage = document.getElementById('zId_spanErrorMessage')
			if(spanErrorMessage) {
				spanErrorMessage.innerHTML = alert.keyword;
			}
		}
		var divErrorInfo = document.getElementById('zId_divErrorInfo')
		if(divErrorInfo) {
			divErrorInfo.style.display = 'block';

			var spanErrorInfo = document.getElementById('zId_spanErrorInfo');
			if(spanErrorInfo) {
				spanErrorInfo.innerHTML = unescape(alert.infoString);
			}
			var aErrorInfo = document.getElementById('zId_aErrorInfo');
			if(aErrorInfo) {
				if(alert.link) {
					aErrorInfo.style.cursor = 'pointer';
				}
				else {
					aErrorInfo.style.cursor = 'default';
				}
			}			
		}
	}
	else {
		var divErrorMessage = document.getElementById('zId_divErrorMessage')
		if(divErrorMessage) {
			divErrorMessage.style.display = 'none';
		}
		var divErrorInfo = document.getElementById('zId_divErrorInfo')
		if(divErrorInfo) {
			divErrorInfo.style.display = 'none';
		}
	}
}

function signal(what) {
	var w = eval('(' + what + ')');
	if(w.func == 'MicQueueUpdate')
	{
		if(jsGlobalObjects.micQueue)
		{
			jsGlobalObjects.micQueue.signalUpdate(w);
		}
	}
	else if(w.func == 'AlertStatus') {
		if(window.parent && window.parent.externSignalAlertStatus)
		{
			window.parent.externSignalAlertStatus(w);
		}
		else
		{
			signalAlertStatus(w);
		}
	}
	else if(w.func == 'Chain') {
		chainURL = w.URL;
		setTimeout(chain, 250);
	}
	else if(w.func == 'SignalAudioSetupResult')
	{
		SignalAudioSetupResult(w.status, w.recorddevice, w.playdevice);
	}
	else if(w.func == 'SignalMicStatus')
	{
		SignalMicStatus(w.status);
	}
	else if(w.func == 'SignalInfoMessage')
	{
		addScrollingTextChatMessage(w.info);
	}
	else if(w.func == 'SignalTransferStatus')
	{
		jsGlobalObjects.transferStatusIndicator.signalStatus(w.state);
	}
}

function TransferStatusIndicator(parent)
{
	var _div = div();
	append(parent, _div);
	_div.style.position = 'absolute';
	setLeft(_div, 339);
	setTop(_div, 32);
	var _uploadingIndicator = new _Indicator2(getPathCustomizedButtonOnControl() + 'RoomButtonUploadingText.png', 62, 9);
	var _downloadingIndicator = new _Indicator2(getPathCustomizedButtonOnControl() + 'RoomButtonDownloadingText.png', 78, 9);

	var _state = '';
	this.signalStatus = function(state)
	{
		if(state != _state)
		{
			_state = state;
			
			_uploadingIndicator.show(false);
			_downloadingIndicator.show(false);
			
			if(state == 'uploading')
			{
				_uploadingIndicator.show(true);
			}
			else if(state == 'downloading')
			{
				_downloadingIndicator.show(true);
			}
		}
	}
	function _Indicator2(image, width, height)// ntrjn: convert these to picture class or something
	{
		var _divIndicator = div();
		_divIndicator.style.position = 'absolute';
		_divIndicator.style.backgroundImage = makeCSSUrl(image);
		setLeft(_divIndicator, 0);
		setTop(_divIndicator, 0);
		setWidth(_divIndicator, width);
		setHeight(_divIndicator, height);
		append(_div, _divIndicator);	
		showElement(_divIndicator, false);
		
		this.show = function(s)
		{
			showElement(_divIndicator, s);
		}
	}
}

var chainURL = '';
function chain() {
	location.href = chainURL;
}

function createSupport(parent) {
	
	var aSupport = document.createElement('a');
	setElementClassName(aSupport, 'zClass_text');
	aSupport.style.position = 'absolute';
	aSupport.style.right = px(1);
	aSupport.href = 'mailto:support@zorap.com?body=Please%20describe%20your%20problem:';
	aSupport.innerHTML = 'Support';
	parent.appendChild(aSupport);
	aSupport.style.top = px(settings.ZorapHeaderHeight - aSupport.offsetHeight - 4);
}

function createCopyright(parent) {
	var divCopyrightWord = document.createElement('div');
	divCopyrightWord.id = 'zId_spanCopyrightWord';
	parent.appendChild(divCopyrightWord);

	var spanCopyrightWord = document.createElement('span');
	setElementClassName(spanCopyrightWord, 'zClass_text zClass_textSmaller zClass_textBold');
	spanCopyrightWord.innerHTML = 'Copyright 2009, Zorap Inc. All rights reserved.';
	divCopyrightWord.appendChild(spanCopyrightWord);
	
	var aCopyrightPolicy = _a('aCopyrightPolicy');
	aCopyrightPolicy.target = '_blank';
	aCopyrightPolicy.href = 'http://www.zorap.com/About/Terms/CopyrightPolicy.aspx';
	
	divCopyrightWord.appendChild(space());
	divCopyrightWord.appendChild(space());
	
	var spanCopyrightPolicy = document.createElement('span');
	setElementClassName(spanCopyrightPolicy, 'zClass_text zClass_textSmaller zClass_textBold');
	spanCopyrightPolicy.innerHTML = 'Copyright Policy';
	aCopyrightPolicy.appendChild(spanCopyrightPolicy);
	setColor(aCopyrightPolicy, TextColor);//xxx
	divCopyrightWord.appendChild(aCopyrightPolicy);
}

function createUpgradeLink(parent) {
    if(isZorapInstalled() && !isCurrentVersion() && zorapSupported()) {
        var aUpgrade = document.createElement('a');
        aUpgrade.id = 'zId_aUpgrade';
        setElementClassName(aUpgrade, 'zClass_text zClass_textSmaller zClass_textBold');
        aUpgrade.title = 'Get Zorap version ' + pcurrentVersion;
        aUpgrade.href = "#";
        aUpgrade.onclick = function()
        {
			upgrade();
			return false;
        }
        aUpgrade.innerHTML = 'Update Available'; 
        parent.appendChild(aUpgrade);
    }
}

function setProfileAreaName() {
	var spanProfileAreaName = getById('zId_spanProfileAreaName');
	if(spanProfileAreaName) {
		spanProfileAreaName.innerHTML = prependTemp(jsSettings.DisplayName);
		if(settings.Authenticated) {
			var aProfileAreaGotoRoom = getById('zId_aProfileAreaGotoRoom');
			if(aProfileAreaGotoRoom) {
				aProfileAreaGotoRoom.innerHTML = 'Go to my room (/' + settings.UserId + ')';
				aProfileAreaGotoRoom.href = settings.UserId;
			}
		}
	}
}

function cancelSignUp() {
	closePopup(createWindow);
}

function onClickSignUp() {
	if(popupExists(createWindow)) {
		if(window.focus) {createWindow.focus()}
	}
	else {
		var url = fixRoot('/Account/Create2.aspx');
		var features = buildCreateWindowFeaturesString();
		createWindow = window.open(url, 'zorapcreate', features);
		if(window.focus) {createWindow.focus()}
	}
    return false;
}

function createProfileArea(parent) {
	var divProfileArea = div('zId_divProfileArea');
	setElementClassName(divProfileArea, 'zClass_text zClass_textSmaller');
	
	parent.appendChild(divProfileArea);
	
	var spanProfileAreaName = span('zId_spanProfileAreaName');
	divProfileArea.appendChild(spanProfileAreaName);

	divProfileArea.appendChild(space());
	spanBreak0 = span();
	spanBreak0.innerHTML = '|';
	divProfileArea.appendChild(spanBreak0);
	divProfileArea.appendChild(space());
		
	if(settings.Authenticated) {

		var aProfileAreaGotoRoom = _a('zId_aProfileAreaGotoRoom');
		setElementClassName(aProfileAreaGotoRoom, 'zClass_text zClass_textSmaller');
		divProfileArea.appendChild(aProfileAreaGotoRoom);

		divProfileArea.appendChild(space());
		spanBreak1 = span();
		spanBreak1.innerHTML = '|';
		divProfileArea.appendChild(spanBreak1);
		divProfileArea.appendChild(space());
	        
        var aProfile = _a();
        setElementClassName(aProfile, 'zClass_text zClass_textSmaller');
        aProfile.title = 'Edit your profile';
        aProfile.href = "#";
        aProfile.onclick = onClickSettings;
        aProfile.innerHTML = 'My Profile';
        divProfileArea.appendChild(aProfile);
        
        divProfileArea.appendChild(space());
		spanBreak2 = span();
		spanBreak2.innerHTML = '|';
		divProfileArea.appendChild(spanBreak2);
		divProfileArea.appendChild(space());

		var aSignOut = _a();
		setElementClassName(aSignOut, 'zClass_text zClass_textSmaller');
		aSignOut.href = '#';
		aSignOut.innerHTML = 'Sign Out';
		aSignOut.onclick = onClickSignOut;
		divProfileArea.appendChild(aSignOut);
	}
	else {
		var aIntroduce = _a();
		setElementClassName(aIntroduce, 'zClass_text zClass_textSmaller');
		aIntroduce.href = '#';
		aIntroduce.innerHTML = 'Introduce Yourself';
		aIntroduce.onclick = onClickChangeMyName;
		divProfileArea.appendChild(aIntroduce);
		
		divProfileArea.appendChild(space());
		spanBreak1 = span();
		spanBreak1.innerHTML = '|';
		divProfileArea.appendChild(spanBreak1);
		divProfileArea.appendChild(space());
		
		var aSignUp = _a();
		setElementClassName(aSignUp, 'zClass_text zClass_textSmaller');
		aSignUp.href = '#';
		aSignUp.innerHTML = 'Sign Up';
		aSignUp.onclick = onClickSignUp;
		divProfileArea.appendChild(aSignUp);

		divProfileArea.appendChild(space());
		spanBreak2 = span();
		spanBreak2.innerHTML = '|';
		divProfileArea.appendChild(spanBreak2);
		divProfileArea.appendChild(space());
		
		var aSignIn = _a();
		setElementClassName(aSignIn, 'zClass_text zClass_textSmaller');
		aSignIn.href = '#';
		aSignIn.innerHTML = 'Sign In';
		aSignIn.onclick = onClickSignIn;
		divProfileArea.appendChild(aSignIn);
	}
	setProfileAreaName();
}

// find the zorap div, and add our controls
function initUI()
{
    // use the hook to find our home div
    var divZorap = document.getElementById('divZorap');
    if(divZorap)
    {
		divZorap.ondrag = function() {	return false; }//ie
		divZorap.onselectstart = function() { return false; }//ie

		var w = getWinWidth();
		w -= 2 * settings.BorderWidth;
		if(w < settings.MinWidth) w = settings.MinWidth;
		var h = getWinHeight();

		var divZorapHeight = h - (settings.IFrameHeaderHeight + settings.IFrameFooterHeight);
		var zorapMargins = settings.ZorapHeaderHeight + settings.ZorapFooterHeight;
		var divMainHeight = divZorapHeight - zorapMargins;
		if(divMainHeight < settings.MinHeight) divMainHeight = settings.MinHeight;
		divZorapHeight = divMainHeight + zorapMargins;

		divZorap.style.width = px(w);
		divZorap.style.left = px(settings.BorderWidth);
		divZorap.style.height = px(divZorapHeight);

        var divJavaScriptMessage = document.getElementById('divJavaScriptMessage');
        if(divJavaScriptMessage)
        {
            divZorap.removeChild(divJavaScriptMessage);
        }
        if(settings.ZorapHeaderLayout == 'normal')
        {
			createLogo(divZorap);
		}
		
		if(settings.ZorapHeaderLayout != 'none')
		{		
		    createErrorMessage(divZorap);
		}
        
        // make our own div
        var divMain = document.createElement('div');
        divMain.id = 'zId_divMain';
		divMain.style.width = px(w);
		divMain.style.height = px(divMainHeight);
		divMain.style.top = px(settings.ZorapHeaderHeight);
        divZorap.appendChild(divMain);
		setBorderColor(divMain, ControlColor);//xxx
		
		if(settings.ZorapHeaderLayout == 'normal')
		{		
			createSupport(divZorap);
			createCopyright(divZorap);
			createUpgradeLink(divZorap);
		}
		        
        if(!jsSettings.IsNewZorap)
        {
			createProfileArea(divZorap);
		}
       
        initZorapControls();
		doStartupDialogs();
	}
}

function onclickShareMusic(e)
{
	var zorapCtrl = getZorapCtrl();
    if(zorapCtrl) {
		zorapCtrl.ShareMusicFile();
	}
    return false;
}

function onclickSharePhoto(e)
{
    var zorapCtrl = getZorapCtrl();
    if(zorapCtrl) {
		zorapCtrl.ShareImageFile();
	}
    return false;
}

function onclickShareVideo(e)
{
    var zorapCtrl = getZorapCtrl();
    if(zorapCtrl) {
		zorapCtrl.ShareVideoFile();
	}
    return false;    
}

function onclickShareDocument(e)
{
    var zorapCtrl = getZorapCtrl();
    if(zorapCtrl) {
	    zorapCtrl.ShareDocument();
	}
	return false;
}

function buildShareWebMediaWindowFeaturesString(popupHeight) {
	var width = 350;
	var windowFeatures = 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes';
	var winX = (document.all) ? window.screenLeft : window.screenX;
	var winY = (document.all) ? window.screenTop : window.screenY;
	var winWidth = (document.all) ? document.body.clientWidth : window.innerWidth;
	var winHeight = (document.all) ? document.body.clientHeight : window.innerHeight;
	windowFeatures += ',width=_width,height=_height,screenX=_x,screenY=_y,left=_x,top=_y';
	windowFeatures = replaceAll(windowFeatures, '_height', popupHeight ? popupHeight : winHeight);
	windowFeatures = replaceAll(windowFeatures, '_width', width);
	windowFeatures = replaceAll(windowFeatures, '_x', winX + winWidth - width);
	windowFeatures = replaceAll(windowFeatures, '_y', winY);
	return windowFeatures;
}

function signalBroadcastMessage(what)
{
	var w = eval('(' + what + ')');
	if(w.message == 'advertise')
	{
		advertise(w.source, w.mediatype, w.adwords);
	}
}

function advertise(source, mediatype, adwords)
{
	removeAd();
	addAd(source, mediatype, adwords);
}

function getLocale()
{
	if(navigator)
	{
		if(navigator.language)
		{
			return navigator.language;
		}
		else if(navigator.browserLanguage)
		{
			return navigator.browserLanguage;
		}
		else if(navigator.systemLanguage)
		{
			return navigator.systemLanguage;
		}
		else if(navigator.userLanguage)
		{
			return navigator.userLanguage;
		}
	}
	return '';
}

function isUS()
{
	return getLocale().toLowerCase() == 'en-us';
}

function iframe2(id) {
	var iframe;
	if(isIE) {
		iframe = document.createElement('<iframe frameborder="0" allowtransparency="true"><iframe>');
	}
	else {
		iframe = document.createElement('iframe');
		iframe.setAttribute('frameborder', '0');
		iframe.setAttribute('allowtransparency', 'true');
	}
	if(id) iframe.id = id;
	return iframe;
}

var adRemove = null;
function addAd(source, mediatype, adwords)
{
	if(isUS())
	{
		var divAd = div('zId_divAd');
		divAd.style.position = 'absolute';
		divAd.style.width = px(234);
		divAd.style.height = px(60);
		divAd.style.right = px(0);
		divAd.style.top = px(5);
		divAd.style.backgroundColor = '#0000ff';
		
		var iframeAd = iframe2();
		iframeAd.style.position = 'absolute';
		iframeAd.style.left = px(0);
		iframeAd.style.top = px(0);
		iframeAd.style.width = px(234);
		iframeAd.style.height = px(60);
		iframeAd.setAttribute('scrolling', 'no');
		iframeAd.src = fixRoot('/ads/amazon.aspx?keywords=') + adwords;
		
		divAd.appendChild(iframeAd);

		if(adRemove != null)
		{
			clearTimeout(adRemove);
		}
		adRemove = setTimeout(removeAd, 5 * 60 * 1000);
		
		var divZorap = getById('divZorap');
		divZorap.appendChild(divAd);
	}
}

function removeAd()
{
	var divAd = getById('zId_divAd');
	if(divAd)
	{
		divAd.parentNode.removeChild(divAd);
	}
}

function broadcastAdvertise(source, type, adwords)
{
	try
	{
		var message = '{"message":"advertise","source":"__SOURCE__","mediatype":"__MEDIATYPE__","adwords":"__ADWORDS__"}';
		message = message.replace("__SOURCE__", source);
		message = message.replace("__MEDIATYPE__", type);
		message = message.replace("__ADWORDS__", adwords);
		getZorapCtrl().Broadcast(message);
	}
	catch(e){}
}

function shareWebMedia2(
	embed, source, type, 
	titleLine, descriptionLine1, descriptionLine2, previewPictureURL,
	minWidth, minHeight, maxWidth, maxHeight, adwords, url
	)
{
	if(type == 'image')
	{
		try
		{
			getZorapCtrl().DropWebPhoto(url);
			return;
		}
		catch(e) {};
	}
	try
	{
		var jsonBody = '{"embedcode":"_embedcode_","source":"_source_","mediatype":"_mediatype_","titleline":"_titleline_","descriptionline1":"_descriptionline1_","descriptionline2":"_descriptionline2_","previewpictureurl":"_previewpictureurl_","minwidth":_minwidth_,"minheight":_minheight_,"maxwidth":_maxwidth_,"maxheight":_maxheight_}';
		jsonBody = jsonReplace(jsonBody, "_embedcode_", embed);
		jsonBody = jsonReplace(jsonBody, "_source_", source);
		jsonBody = jsonReplace(jsonBody, "_mediatype_", type);
		jsonBody = jsonReplace(jsonBody, "_titleline_", titleLine);
		jsonBody = jsonReplace(jsonBody, "_descriptionline1_", descriptionLine1);
		jsonBody = jsonReplace(jsonBody, "_descriptionline2_", descriptionLine2);
		jsonBody = jsonReplace(jsonBody, "_previewpictureurl_", previewPictureURL);
		jsonBody = jsonBody.replace("_minwidth_", minWidth);		
		jsonBody = jsonBody.replace("_minheight_", minHeight);		
		jsonBody = jsonBody.replace("_maxwidth_", maxWidth);		
		jsonBody = jsonBody.replace("_maxheight_", maxHeight);		
		
		var json = '{"srcimid":"","destimid":"","type":"ohWebShare","body":_body_}';
		json = json.replace('_body_', jsonBody);

		getZorapCtrl().CallMethod(json);
		
	}
	catch(e) {};
	
	if(source == 'imeem' && adwords)
	{
		broadcastAdvertise(source, type, adwords);
	}
}

function shareWebMedia(embed, source, type, minWidth, minHeight, maxWidth, maxHeight, adwords, url)
{
	if(type == 'image')
	{
		try
		{
			getZorapCtrl().DropWebPhoto(url);
			return;
		}
		catch(e) {};
	}
	try
	{
		getZorapCtrl().WebMediaShared(embed, source, type, minWidth, minHeight, maxWidth, maxHeight);
	}
	catch(e) {};
	
	if(source == 'imeem' && adwords)
	{
		broadcastAdvertise(source, type, adwords);
	}
}

function makeTextChatStyle() {
	var style = 'font-family:';
	if(jsSettings.Font == 'Arial') {
		style += 'Arial, Helvetica, sans-serif;';
	}
	else if(jsSettings.Font == 'Arial Black') {
		style += '"Arial Black", Gadget, sans-serif;';
	}
	else if(jsSettings.Font == 'Bookman Old Style') {
		style += '"Bookman Old Style", serif;';
	}
	else if(jsSettings.Font == 'Comic Sans MS') {
		style += '"Comic Sans MS", cursive;';
	}
	else if(jsSettings.Font == 'Courier') {
		style += 'Courier, monospace;';
	}
	else if(jsSettings.Font == 'Courier New') {
		style += '"Courier New", Courier, monospace;';
	}
	else if(jsSettings.Font == 'Garamond') {
		style += 'Garamond, serif;';
	}
	else if(jsSettings.Font == 'Georgia') {
		style += 'Georgia, serif;';
	}
	else if(jsSettings.Font == 'Impact') {
		style += 'Impact, Charcoal, sans-serif;';
	}
	else if(jsSettings.Font == 'Lucida Console') {
		style += '"Lucida Console", Monaco, monospace;';
	}
	else if(jsSettings.Font == 'Lucida Sans Unicode') {
		style += '"Lucida Sans Unicode", "Lucida Grande", sans-serif;';
	}
	else if(jsSettings.Font == 'MS Sans Serif') {
		style += '"MS Sans Serif", Geneva, sans-serif;';
	}
	else if(jsSettings.Font == 'MS Serif') {
		style += '"MS Serif", "New York", sans-serif;';
	}
	else if(jsSettings.Font == 'Palatino Linotype') {
		style += '"Palatino Linotype", "Book Antiqua", Palatino, serif;';
	}
	else if(jsSettings.Font == 'Symbol') {
		style += 'Symbol, sans-serif;';
	}
	else if(jsSettings.Font == 'Tahoma') {
		style += 'Tahoma, Geneva, sans-serif;';
	}
	else if(jsSettings.Font == 'Times New Roman') {
		style += '"Times New Roman", Times, serif;';
	}
	else if(jsSettings.Font == 'Trebuchet MS') {
		style += '"Trebuchet MS", Helvetica, sans-serif;';
	}
	else if(jsSettings.Font == 'Verdana') {
		style += 'Verdana, Geneva, sans-serif;';
	}
	else if(jsSettings.Font == 'Webdings') {
		style += 'Webdings, sans-serif;';
	}
	else if(jsSettings.Font == 'Wingdings') {
		style += 'Wingdings, "Zapf Dingbats", sans-serif;';
	}
	if(jsSettings.Bold == '1') {
		style += 'font-weight:bold;';
	}
	if(jsSettings.Italic == '1') {
		style += 'font-style:italic;';
	}
	return style;
}

function changeFont(font, bold, italic)
{
	jsSettings.Font = font;
	jsSettings.Bold = bold;
	jsSettings.Italic = italic;
}

function sendMessageToCtrl(message) {
    // get our control
    var zorapCtrl = getZorapCtrl();
    if(zorapCtrl) {
		if(message.toLowerCase().indexOf('.d') == 0 || 
			message.toLowerCase().indexOf('.e') == 0 || 
			message.toLowerCase().indexOf('.n') == 0) {
			
			zorapCtrl.SendText(message);
		}
		else {
			zorapCtrl.SendText(escape(makeLinks(message, 'zClass_text', makeTextChatStyle())));
		}
	}
}

// send text
function sendText()
{
    // find text control
    var inputTextChat = document.getElementById('zId_inputTextChat');
    if(inputTextChat)
    {
        // check for empty
        if(!inputTextChat.value) return;
        if(inputTextChat.value.length <= 0) return;
        
        message = inputTextChat.value;
        
        if(!isRespectful(message))
        {
			message = 'Peace be with you.';
		}
		message = replaceAll(message, "%", "ncpctsgn");
		sendMessageToCtrl(message);
        // reset    
        inputTextChat.value = '';
    }
}

// check for enter key in text chat
function onkeydownInputTextZorapTextChat(e)
{
	removeTextChatHint();
	if(isEnterKey(e))
	{
        sendText();
        return false;
    }
}

var ZorapCtrlError = "";
var zorapCtrlErrorTimer;
function onZorapCtrlError() {
	window.location.href = fixRoot('/about/error.aspx?error=') + ZorapCtrlError;
}

// zorap ctrl signals an error
function signalError(message)
{
	if(jsSettings.IsNewZorap)
	{
		if(window.parent && window.parent.externSignalRoomError)
		{	
			window.parent.externSignalRoomError(message);
		}
	}
	else
	{
		mediaServerIP = null;
		ZorapCtrlError = message;
		zorapCtrlErrorTimer = window.setTimeout(onZorapCtrlError, 250);
	}
}

function makeSpNonBreak(str) {
	var s = str;
	s = replaceAll(s, ' ', '\u00a0');
	return s;
}

var scrollingMessagesLastUpdateTime;
var scrollingMessagesSpeed = 65;
var scrollingMessagesTimerOn = false;
var scrollingMessagesPause = false;
var scrollingMessages = new Array();
function scrollMessages() {
	if(scrollingMessages.length == 0) { scrollingMessagesTimerOn = false; return; }
	var divScrollingChatArea = document.getElementById('zId_divScrollingChatArea');
	if(divScrollingChatArea) {
		var dateTime = new Date();
		var now = dateTime.getTime();
		if(!scrollingMessagesPause) {
			var nMessages = scrollingMessages.length;
			var elapsed = now - scrollingMessagesLastUpdateTime;
			for(var whichMessage = 0; whichMessage < nMessages; whichMessage++) {
				if(scrollingMessages[whichMessage].zX) {
					scrollingMessages[whichMessage].zX -= scrollingMessagesSpeed * elapsed / 1000;
					var newX = Math.round(scrollingMessages[whichMessage].zX);
					if(newX < scrollingMessages[whichMessage].offsetLeft) {
						scrollingMessages[whichMessage].style.left = px(newX);
					}
				}
				else {
					var go = false;
					
					if(whichMessage == 0) {
						go = true;
					}
					else if(scrollingMessages[whichMessage - 1].zX) {
						var messageSep = 20;
						if(scrollingMessages[whichMessage - 1].offsetLeft + scrollingMessages[whichMessage - 1].offsetWidth + messageSep < divScrollingChatArea.offsetWidth) {
							go = true;
						}
					}
					
					if(go) {
						scrollingMessages[whichMessage].style.display = 'block';
						scrollingMessages[whichMessage].zX = divScrollingChatArea.offsetWidth;
						scrollingMessages[whichMessage].style.left = px(divScrollingChatArea.offsetWidth);
						scrollingMessages[whichMessage].style.top = px(divScrollingChatArea.offsetHeight / 2 - scrollingMessages[whichMessage].offsetHeight / 2);
					}
				}
			}
			if(scrollingMessages[0].offsetLeft + scrollingMessages[0].offsetWidth < 0) {
				scrollingMessages.shift();
			}
		}
		scrollingMessagesLastUpdateTime = now;
		setTimeout(scrollMessages, 30);
	}
}

function addScrollingTextChatMessage(message, from) {

	if(window.parent && window.parent.externAddScrollingTextChatMessage)
	{
		window.parent.externAddScrollingTextChatMessage(message, from);
	}

	var divScrollingChatArea = document.getElementById('zId_divScrollingChatArea');
	if(divScrollingChatArea) {
		var divScrollingMessage = div('sx', 'zClass_text zClass_divScrollingMessage');
		if(from) {
			divScrollingMessage.innerHTML = from;
			divScrollingMessage.innerHTML += ': ';
		}
		divScrollingMessage.innerHTML += message;
		divScrollingMessage.appendChild(document.createTextNode('\u00a0'));
		divScrollingMessage.style.display = 'none';
		divScrollingChatArea.appendChild(divScrollingMessage);
		scrollingMessages.push(divScrollingMessage);
		if(!scrollingMessagesTimerOn) {
			scrollingMessagesTimerOn = true;
			var dateTime = new Date();
			scrollingMessagesLastUpdateTime = dateTime.getTime();
			setTimeout(scrollMessages, 30);
		}
	}
}

// zorap ctrl signals history message
function signalChatHistoryMessage(from, message) {

	// hack around a bug in version 2.1.0.1	of npZorap
	try
	{
		var w = eval('(' + from + ')');
		if(w.message == 'advertise')
		{
			advertise(w.source, w.mediatype, w.adwords);
		}
	}
	catch(e) {}

	
	if(from) {
		from = unescape(from);
	}
	if(message) {
		message = unescape(message);
	}
	message = replaceAll(message, 'ncpndsgn', '#');
	message = replaceAll(message, 'ncpctsgn', '%');

    // find text control
    var inputTextChat = document.getElementById('zId_inputTextChat');
    if(inputTextChat) {
		var scroll = false;
		var ulHistory = document.getElementById('zId_ulHistory');
		if(!ulHistory) return;
		if(ulHistory.scrollTop + ulHistory.offsetHeight + 20 >= ulHistory.scrollHeight) {
			scroll = true;
		}
		var li = document.createElement('li');
		setElementClassName(li, 'zClass_liHistory zClass_text');
		
		var systemMessage = true;
		if(from != null && from.length > 0) {
			systemMessage = false;
		}
		var fixTextColor = false;
		if(systemMessage) {
			addScrollingTextChatMessage(message);
			var textSpan = document.createElement('span');
			textSpan.innerHTML = message;
			li.appendChild(textSpan);
		}
		else {
			fixTextColor = true;
			addScrollingTextChatMessage(message, from);
			var nameSpan = document.createElement('span');
			from = makeSpNonBreak(from);
			nameSpan.innerHTML = from + ':';
			li.appendChild(nameSpan);
			li.innerHTML += ' ' + message;
		}
		ulHistory.appendChild(li);
		if(fixTextColor)
		{
			var spans = li.getElementsByTagName('*');
			if(spans && spans.length && spans.length > 1)
			{
				for(var whichSpan = 1; whichSpan < spans.length; whichSpan++)
				{
					spans[whichSpan].style.color = jsSettings.TextColor;
				}
			}
		}
		if(scroll) {
			scrollIt();
			setTimeout(scrollIt, 200);// without this delay, on IE scroll bars don't appear if the first line causing them to be required is long
		}
	}
}

var zorapStarted = false;
function signalCamState(state)
{
	var img = document.getElementById('zId_CameraButton');
	if(img)
	{
		if(state == 1)
		{
			setImgSrc(img, getPathCustomizedButtonOnControl() + 'RoomButtonWebcamOffText.png');
			img.style.width = px(88);
			img.style.left = px(img.midpoint - 88/2);
			jsSettings.CameraState = true;
		}
		else
		{
			setImgSrc(img, getPathCustomizedButtonOnControl() + 'RoomButtonWebcamOnText.png');
			img.style.width = px(83);
			img.style.left = px(img.midpoint - 83/2);
			jsSettings.CameraState = false;
		}
	}
	zorapStarted = true;
}

function scrollIt() {
	var ulHistory = document.getElementById('zId_ulHistory');
	if(ulHistory) {
		ulHistory.scrollTop = ulHistory.scrollHeight;
	}
}

var mediaPopupMenuCommands = new Array(
	{ 'command':'Spotlight', 'text':'Maximize Window', 'textToggled':'Restore Window' },
	{ 'command':'SpotlightForAll', 'text':'Maximize Window for all', 'textToggled':'Minimize Window for all' },
	{ 'command':'Close', 'text':'Close Window' },
	{ 'command':'OpenWindow', 'text':'Open Window' },
	{ 'command':'Pin', 'text':'Pin Window', 'textToggled':'Unpin Window' },
	{ 'command':'Sep-' },
	{ 'command':'Friend', 'text':'Friend _senderName', 'textToggled':'Unfriend _senderName'  },
	{ 'command':'Block', 'text':'Block _senderName', 'textToggled':'Unblock _senderName'  },
	{ 'command':'Report', 'text':'Report Abuse from _senderName' },
	{ 'command':'Sep-' },
	{ 'command':'Observer', 'text':'Make _senderName an Observer (text chat only)' },
//	{ 'command':'Audience', 'text':'Make _senderName an Audience Member (text, video)' },
	{ 'command':'Participant', 'text':'Make _senderName a Participant (text, audio, video, sharing photos and files)' },
	{ 'command':'Presenter', 'text':'Make _senderName a Presenter (text, audio, video, full sharing)' },
	{ 'command':'Moderator', 'text':'Make _senderName a Moderator (full control)' },
	{ 'command':'EnableTextChat', 'text':'Enable text chat for _senderName', 'textToggled':'Disable text chat for _senderName' },
	{ 'command':'EnableVoice', 'text':'Enable audio from _senderName', 'textToggled':'Disable audio from _senderName' },
	{ 'command':'EnableVideo', 'text':'Enable video from _senderName', 'textToggled':'Disable video from _senderName' },
	{ 'command':'EnableSharing', 'text':'Enable sharing from _senderName', 'textToggled':'Disable sharing from _senderName' },
	{ 'command':'EnableModerating', 'text':'Let _senderName moderate' },
	{ 'command':'Eject', 'text':'Eject _senderName' },
	{ 'command':'Sep-' },
	{ 'command':'Open', 'text':'Open File' },
	{ 'command':'Save', 'text':'Save Photo' },
	{ 'command':'Snapshot', 'text':'Save a Snapshot of _senderName' },
	{ 'command':'Sep-' },
	{ 'command':'Pause', 'text':'Pause Slideshow', 'textToggled':'Resume Slideshow' },
	{ 'command':'Previous', 'text':'Previous Photo' },
	{ 'command':'Next', 'text':'Next Photo' },
	{ 'command':'Sep-' },
	{ 'command':'Louder', 'text':'Increase volume' },
	{ 'command':'Quieter', 'text':'Decrease volume' },
	{ 'command':'Sep-' },
	{ 'command':'CameraOff', 'text':'Turn off webcam' },
	{ 'command':'CameraOn', 'text':'Turn on webcam' },
	{ 'command':'176x144', 'text':'Set image size to 176x144 15fps' },
	{ 'command':'320x240', 'text':'Set image size to 320x240 12fps' },
	{ 'command':'640x480', 'text':'Set image size to 640x480 8fps' },
	{ 'command':'Sep-' },
	{ 'command':'Promote', 'text':'Make _senderName a SuperUser' },
	{ 'command':'Banish', 'text':'Banish _senderName' },
	{ 'command':'Sep-' },
	{ 'command':'Diagnostics', 'text':'Show Diagnostics', 'textToggled':'Hide Diagnostics' },
	{ 'command':'EchoVideo', 'text':'Echo Video (diagnostic)', 'textToggled':'Stop Echoing Video (diagnostic)' },
	{ 'command':'EchoVoice', 'text':'Echo Voice (diagnostic)', 'textToggled':'Stop Echoing Voice (diagnostic)' },
	{ 'command':'Dump', 'text':'Write a dump file (diagnostic)'},
	{ 'command':'Sep-' },
	{ 'command':'PrivateChat', 'text':'Chat privately with _senderName' },
	{ 'command':'AutoArrange', 'text':'AutoArrange', 'textToggled':'Disable AutoArrange' }
	);

function getMenuCommandText(commands, command, toggled) {
	for(var whichCommand = 0; whichCommand < commands.length; whichCommand++) {
		var c = commands[whichCommand];
		if(c.command == command) {
			var text = c.text;
			if(toggled && c.textToggled) {
				text = c.textToggled;
			}
			return text;
		}
	}
	return '';
}

function doPopupMenu(info, absX, absY, maxXRight) {
	try {
		// for each command
		var commandString = '';
		for(var whichCommand = 0; whichCommand < mediaPopupMenuCommands.length; whichCommand++) {
			var command = mediaPopupMenuCommands[whichCommand];
			commandString += command.command + ',';
		}
		var contextMenuEnabledItemsString = getZorapCtrl().ContextMenuAreEnabled(commandString, info.uid, info.itemSource);
		var contextMenuEnabledItemsObject = eval('(' + contextMenuEnabledItemsString + ')');
		var contextMenuEnabledItems = contextMenuEnabledItemsObject.enabledCommands;
		if(contextMenuEnabledItems.length > 0) {

			// make menu
			var mediaPopup = new zPopupMenu(
				'zId_MediaPopupMenu',
				'zClass_divPopupMenu zClass_text zClass_Bold',
				'zClass_divPopupMenuItem',
				'zClass_divPopupMenuItem_hover',
				'zClass_divPopupMenuItem_inactive',
				'zClass_divPopupMenuItem_sep',
				absX,
				absY
				);
			mediaPopup.info = info;

			for(whichCommand = 0; whichCommand < contextMenuEnabledItems.length; whichCommand++) {
				var command = contextMenuEnabledItems[whichCommand];
				if(command.command == 'Sep-') {
					continue;
				}
				var checked = command.checked;
				var active = command.active;
				var text = getMenuCommandText(mediaPopupMenuCommands, command.command, checked);
				text = replaceAll(text, '_senderName', info.senderName);
				text = replaceAll(text, '_itemSource', info.itemSource);
				var sep = false;
				if(whichCommand < (contextMenuEnabledItems.length - 1) && contextMenuEnabledItems[whichCommand + 1].command == 'Sep-') {
					sep = true;
				}
				mediaPopup.addItem(command.command, text, active, sep);
			}
			if(info.itemSource == 'Browser') {
				mediaPopup.up();
			}
			if(maxXRight) {
				var tooMuch = mediaPopup.divPopup.offsetLeft + mediaPopup.divPopup.offsetWidth - maxXRight;
				if(tooMuch > 0) {
					mediaPopup.divPopup.style.left = px(mediaPopup.divPopup.offsetLeft - tooMuch);
				}
			}
		}
	}
	catch(e) {}
}

function contextMenu(relX, relY) {
	try {
		// lock it
		var infoString = getZorapCtrl().ContextMenuInspectAndLock(relX, relY);

		// parse result
		var info = eval('(' + infoString + ')');

		doPopupMenu(info, mouseX + getWindowScrollX(), mouseY + getWindowScrollY());
	}
	catch(e) {}
}

function onContextMenu(e) {
	var target = eventGetTarget(e);
	if(target.id == 'zId_ZorapCtrl') {
	
		if(!isMac()) {
			var relX = eventGetRelX(e);
			var relY = eventGetRelY(e);
		
			contextMenu(relX, relY);
		}		
		return false;
	}
	if(target.id == 'zId_divRightSlideBar') {
		return false;
	}
	return;
}

function onMediaPopupMenuDismiss(popupMenu) {
	try {
		var zorapCtrl = getZorapCtrl();
		zorapCtrl.ContextMenuInspectUnlock();
		if(popupMenu.zPopupMenuCommand) {
			zorapCtrl.ContextMenuExecute(popupMenu.zPopupMenuCommand, popupMenu.info.uid, popupMenu.info.itemSource);
		}
	}
	catch(e) {}	
	jsGlobalObjects.micQueue.setLocked(false);
}

function signalRightMouseClick(ctrlX, ctrlY, relX, relY)
{
	if(isMac())
	{
        popupMenusDestroy();
		contextMenu(parseInt(relX), parseInt(relY));
	}
}

function signalContextMenu(ctrlX, ctrlY, relX, relY)
{
    popupMenusDestroy();
	contextMenu(parseInt(relX) + getClipLeft(), parseInt(relY));
}

var mouseX = 0;
var mouseY = 0;
function onMouseMove(evt) {
    try {
        var e = getEvent(evt);
        mouseX = e.clientX;
        mouseY = e.clientY;
        
        if(slidingThing) {
			var delta = mouseX - slidingThingAbsX;
			var moved = slidingThing.parentNode.trans(delta);
			slidingThingAbsX += moved;
        }
        
		if(window.parent && window.parent.externRoomMouseMove)
		{
			window.parent.externRoomMouseMove(mouseX, mouseY);
		}
        
    }
    catch(ex) {
    }
}

function doWelcome2()
{
	var welcomeBackground = getById('welcomeBackground');
	if(welcomeBackground)
	{
		var welcomeForeground = div('welcomeForeground');
		append(welcomeBackground, welcomeForeground);

		var welcomeForegroundInner = div('welcomeForegroundInner');
		append(welcomeForeground, welcomeForegroundInner);

		var spanInstantTopic = span('spanInstantTopic');
		spanInstantTopic.innerHTML = settings.RoomName;
		welcomeForegroundInner.appendChild(spanInstantTopic);
		
		var inputInstantName = input('text', 'inputInstantName');
		inputInstantName.value = jsSettings.DisplayName;
		welcomeForegroundInner.appendChild(inputInstantName);
		
		fixSelect(inputInstantName);

		inputInstantName.focus();
		inputInstantName.select();
	    
	    var divInstantWebcamOn = div('divInstantWebcamOn');
	    welcomeForegroundInner.appendChild(divInstantWebcamOn);
	    
	    var checkboxInstantWebcamOn = input('checkbox', 'checkboxInstantWebcamOn');
	    welcomeForegroundInner.appendChild(checkboxInstantWebcamOn);
		checkboxInstantWebcamOn.checked = readCookie_bool('camstate', false, bool_onoff);

	    var divInstantMicOn = div('divInstantMicOn');
	    welcomeForegroundInner.appendChild(divInstantMicOn);

	    var checkboxInstantMicOn = input('checkbox', 'checkboxInstantMicOn');
	    welcomeForegroundInner.appendChild(checkboxInstantMicOn);
		checkboxInstantMicOn.checked = jsSettings.TalkLock;
		
	    var divInstantHeadsetOn = div('divInstantHeadsetOn');
	    welcomeForegroundInner.appendChild(divInstantHeadsetOn);

	    var divInstantHeadsetRecommended = div('divInstantHeadsetRecommended');
	    welcomeForegroundInner.appendChild(divInstantHeadsetRecommended);

	    var checkboxInstantHeadsetOn = input('checkbox', 'checkboxInstantHeadsetOn');
	    welcomeForegroundInner.appendChild(checkboxInstantHeadsetOn);
		checkboxInstantHeadsetOn.checked = jsSettings.WearingHeadset;
		checkboxInstantHeadsetOn.onclick = function()
		{
			handleWelcomeHeadsetCheckState();
		}
				
	    var divInstantEchoTest = div('divInstantEchoTest');
	    welcomeForegroundInner.appendChild(divInstantEchoTest);

		var aInstantDing = _a('aInstantDing');
		var imgInstantDing = img('InstantDing');
		imgInstantDing.src = fixRoot('/images/welcome/WelcomePageDingD.png')
		imgInstantDing.onmouseover = function()
		{
			this.src = fixRoot('/images/welcome/WelcomePageDingS.png')
		}
		imgInstantDing.onmouseout = function()
		{
			this.src = fixRoot('/images/welcome/WelcomePageDingD.png')
		}
		imgInstantDing.onclick = function()
		{
			if(!runningUpFrontEchoTest)
			{
				showElementById('divWelcomeRemainSilent');
				
				hideWelcomeTestResults();
				
				var checkboxInstantMicOn = getById('checkboxInstantMicOn');
				checkboxInstantMicOn.disabled = true;

				var checkboxInstantHeadsetOn = getById('checkboxInstantHeadsetOn');
				checkboxInstantHeadsetOn.disabled = true;

				try
				{
					runningUpFrontEchoTest = true;
					getZorapCtrl().EchoTest();
				}
				catch(e)
				{
					runningUpFrontEchoTest = false;
				}
			}			
			return false;
		}
		append(welcomeForegroundInner, aInstantDing, imgInstantDing);

		var aInstantHelp = _a('aInstantHelp');
		aInstantHelp.href = fixRoot('/about/Help.htm');
		aInstantHelp.target = '_blank';
		var imgInstantHelp = img('InstantHelp');
		imgInstantHelp.src = fixRoot('/images/welcome/WelcomePageHelpD.png')
		imgInstantHelp.style.border = 'none';
		imgInstantHelp.onmouseover = function()
		{
			this.src = fixRoot('/images/welcome/WelcomePageHelpS.png')
		}
		imgInstantHelp.onmouseout = function()
		{
			this.src = fixRoot('/images/welcome/WelcomePageHelpD.png')
		}
		append(welcomeForegroundInner, aInstantHelp, imgInstantHelp);
		
	    var divWelcomeEchoDetected = div('divWelcomeEchoDetected');
	    welcomeForegroundInner.appendChild(divWelcomeEchoDetected);

	    var divWelcomeFaultyMic = div('divWelcomeFaultyMic');
	    welcomeForegroundInner.appendChild(divWelcomeFaultyMic);

	    var divWelcomeNoiseDetected = div('divWelcomeNoiseDetected');
	    welcomeForegroundInner.appendChild(divWelcomeNoiseDetected);

	    var divWelcomeRemainSilent = div('divWelcomeRemainSilent');
	    welcomeForegroundInner.appendChild(divWelcomeRemainSilent);

	    var divWelcomeTestPassed = div('divWelcomeTestPassed');
	    welcomeForegroundInner.appendChild(divWelcomeTestPassed);

	    var divWelcomeUsePushToTalk = div('divWelcomeUsePushToTalk');
	    welcomeForegroundInner.appendChild(divWelcomeUsePushToTalk);

		var aWelcomePageEnterRoom = _a('aWelcomePageEnterRoom');
		var imgWelcomePageEnterRoom = img('WelcomePageEnterRoom');
		imgWelcomePageEnterRoom.src = fixRoot('/images/welcome/WelcomePageEnterRoomD.png')
		imgWelcomePageEnterRoom.onmouseover = function()
		{
			this.src = fixRoot('/images/welcome/WelcomePageEnterRoomS.png')
		}
		imgWelcomePageEnterRoom.onmouseout = function()
		{
			this.src = fixRoot('/images/welcome/WelcomePageEnterRoomD.png')
		}
		imgWelcomePageEnterRoom.onclick = function()
		{
			if(runningUpFrontEchoTest) return false;

			var checkboxInstantMicOn = getById('checkboxInstantMicOn');
			var checkboxInstantHeadsetOn = getById('checkboxInstantHeadsetOn');
			
			try
			{
				saveSetting_bool('headset', checkboxInstantHeadsetOn.checked);
				getZorapCtrl().SetSetting('WearingHeadset', checkboxInstantHeadsetOn.checked ? '1' : '0');
			}
			catch(e) {}
			

			if(checkboxInstantMicOn.checked && (checkboxInstantHeadsetOn.checked || jsSettings.EchoState == 'Passed'))
			{
				if(!jsSettings.TalkLock)
				{
					setLock(true);
					try
					{
						getZorapCtrl().SetSetting('TalkLock', '1');
						hackLateSetLock = false;
					}
					catch(e) {}
				}
			}
			else
			{
				if(jsSettings.TalkLock)
				{
					setLock(false);
					try
					{
						getZorapCtrl().SetSetting('TalkLock', '0');
						hackLateSetLock = false;
					}
					catch(e) {}
				}
			}
			
		
			var inputInstantName = getById('inputInstantName');
			if(inputInstantName)
			{
				changeMyName(inputInstantName.value, true, true);
			}

			var checkboxInstantWebcamOn = getById('checkboxInstantWebcamOn');
			if(checkboxInstantWebcamOn)
			{
				try
				{
					if(checkboxInstantWebcamOn.checked)
					{
						try
						{
							getZorapCtrl().SetSetting('CameraState', 'on');
						}
						catch(e) {};
						setCameraState(true);
					}
					else
					{
						try
						{
							getZorapCtrl().SetSetting('CameraState', 'off');
						}
						catch(e) {};
						setCameraState(false);
					}
				}
				catch(e) {};
			}
			
			var welcomeBackground = getById('welcomeBackground');
			if(welcomeBackground)
			{
				welcomeBackground.parentNode.removeChild(welcomeBackground);
			}
			runNextStartupDialog();
			return false;
		}
		append(welcomeForegroundInner, aWelcomePageEnterRoom, imgWelcomePageEnterRoom);

		handleWelcomeHeadsetCheckState();
	}
}

function doWelcome()
{
	var divMain = getById('zId_divMain');
	if(divMain)
	{
		var welcomeBackground = div('welcomeBackground');
		append(divMain, welcomeBackground);

		welcomeBackground.style.left = px(divMain.offsetWidth/2 - welcomeBackground.offsetWidth/2);
		welcomeBackground.style.top = px(divMain.offsetHeight/2 - welcomeBackground.offsetHeight/2);

		var imgWelcome = img('imgWelcome');
		imgWelcome.onload = doWelcome2;
		welcomeBackground.appendChild(imgWelcome);
		imgWelcome.src = fixRoot('/images/welcome/WelcomeBackground.png');
	}
}

function doInvite(hack)
{
	var divMain = getById('zId_divMain');
	if(divMain)
	{
		var inviteBackground = div('inviteBackground');
		append(divMain, inviteBackground);

		inviteBackground.style.left = px(divMain.offsetWidth/2 - inviteBackground.offsetWidth/2);
		inviteBackground.style.top = px(divMain.offsetHeight/2 - inviteBackground.offsetHeight/2);

		var iframe = iframe2();
		iframe.src = fixRoot('/Invite/Invite.aspx?gid=' + settings.GID);
		inviteBackground.appendChild(iframe);
		if(hack)
		{
			iframe.style.width = '0px';
			iframe.style.height = '0px';
		}
		else
		{
			iframe.style.width = '100%';
			iframe.style.height = '100%';
		}
		
///		var width = 548;
//		var height = 500;
		
	}
}

function hideElement(id)
{
	var e = getById(id);
	if(e)
	{
		e.style.display = 'none';
	}
}

function showElementById(id)
{
	var e = getById(id);
	if(e)
	{
		e.style.display = 'block';
	}
}

function hideDingFields()
{
	hideElement('divInstantEchoTest');
	hideElement('aInstantDing');
	hideElement('aInstantHelp');
    hideElement('divWelcomeEchoDetected');
    hideElement('divWelcomeFaultyMic');
    hideElement('divWelcomeNoiseDetected');
    hideElement('divWelcomeRemainSilent');
    hideElement('divWelcomeTestPassed');
    hideElement('divWelcomeUsePushToTalk');
}

function hideWelcomeTestResults()
{
	hideElement('divWelcomeTestPassed');
	hideElement('divWelcomeNoiseDetected');
	hideElement('divWelcomeEchoDetected');
	hideElement('divWelcomeFaultyMic');
	hideElement('divWelcomeUsePushToTalk');
}

function handleWelcomeHeadsetCheckState(checked)
{
	hideDingFields();
	
	checked = getById('checkboxInstantHeadsetOn').checked;
	if(!checked)
	{
		showElementById('divInstantEchoTest');
		showElementById('aInstantDing');
		showElementById('aInstantHelp');
	}
}

function notifyZorapCtrlOfObscuringWindows(dimString)
{
	try
	{
		var jsonBody = '{"dimstring":"_dimstring_"}';
		jsonBody = jsonBody.replace("_dimstring_", dimString);		
		
		var json = '{"srcimid":"","destimid":"","type":"ohNotifyOfObscuringRects","body":_body_}';
		json = json.replace('_body_', jsonBody);

		getZorapCtrl().CallMethod(json);
	}
	catch(e)
	{
	}
}

function customizedRoom(pageColor, controlColor, buttonColor, textColor, useBackgroundImage, backgroundImageUrl, backgroundImageFillStyle, blendBackgroundImage)
{
	var oldPathCustomizedButtonOnControl = getPathCustomizedButtonOnControl();

	jsSettings.PageColor = pageColor;
	jsSettings.ControlColor = controlColor;
	jsSettings.ButtonColor = buttonColor;
	jsSettings.TextColor = textColor;
	
	var newPathCustomizedButtonOnControl = getPathCustomizedButtonOnControl();
	
	changeColors(
		oldPathCustomizedButtonOnControl,
		newPathCustomizedButtonOnControl
		);
	
	if(useBackgroundImage && jsSettings.IsFanPage && (backgroundImageUrl.toLowerCase() == 'defaultbackground.png'))
	{
		jsSettings.BackgroundImageURL = jsSettings.FanPageImageUrl;
	}
	else
	{
		jsSettings.BackgroundImageURL = settings.DataDirectory + '/' + backgroundImageUrl;
	}
	jsSettings.UseBackgroundImage = useBackgroundImage;
	jsSettings.BackgroundImageFillStyle = backgroundImageFillStyle;
	jsSettings.BlendBackgroundImage = blendBackgroundImage;

	var jsonBody = '{"pagecolor":"_pagecolor_","controlcolor":"_controlcolor_","buttoncolor":"_buttoncolor_","textcolor":"_textcolor_","usebackgroundimage":_usebackgroundimage_,"backgroundimageurl":"_backgroundimageurl_","backgroundimagefillstyle":"_backgroundimagefillstyle_","blendbackgroundimage":_blendbackgroundimage_}';
	jsonBody = jsonBody.replace("_pagecolor_", convertColorToCPlusPlusHex(jsSettings.PageColor));
	jsonBody = jsonBody.replace("_controlcolor_", convertColorToCPlusPlusHex(jsSettings.ControlColor));
	jsonBody = jsonBody.replace("_buttoncolor_", convertColorToCPlusPlusHex(jsSettings.ButtonColor));
	jsonBody = jsonBody.replace("_textcolor_", convertColorToCPlusPlusHex(jsSettings.TextColor));
	jsonBody = jsonBody.replace("_usebackgroundimage_", jsSettings.UseBackgroundImage);
	jsonBody = jsonReplace(jsonBody, "_backgroundimageurl_", jsSettings.BackgroundImageURL);
	jsonBody = jsonBody.replace("_backgroundimagefillstyle_", jsSettings.BackgroundImageFillStyle);
	jsonBody = jsonBody.replace("_blendbackgroundimage_", jsSettings.BlendBackgroundImage);
	
	var json = '{"srcimid":"","destimid":"","type":"ohCustomizeRoom","body":_body_}';
	json = json.replace('_body_', jsonBody);

	getZorapCtrl().CallMethod(json);
}

function changeColors(
	oldPathCustomizedButtonOnControl,
	newPathCustomizedButtonOnControl
	)
{
	var imgs = document.getElementsByTagName('img');
	for(var whichImg = 0; whichImg < imgs.length; whichImg++)
	{
		var image = imgs[whichImg];
		image.src = image.src.replace(oldPathCustomizedButtonOnControl, newPathCustomizedButtonOnControl);
	}

	var elements = document.getElementsByTagName('*');
	for(var whichElement = 0; whichElement < elements.length; whichElement++)
	{
		var element = elements[whichElement];
		fixElementColors(element);
		updateColor(element);
		updateBorderColor(element);
		updateBackgroundColor(element);
	}

	for(var whichButton = 0; whichButton < buttons.length; whichButton++)
	{
		var button = buttons[whichButton];
		button.changeColor(oldPathCustomizedButtonOnControl, newPathCustomizedButtonOnControl);
	}

	for(var whichZButton = 0; whichZButton < zButtons.length; whichZButton++)
	{
		var zButton = zButtons[whichZButton];
		zButton.changeColor(oldPathCustomizedButtonOnControl, newPathCustomizedButtonOnControl);
	}
	jsGlobalObjects.speakerSlider.changeColor(oldPathCustomizedButtonOnControl, newPathCustomizedButtonOnControl);
	
	document.body.style.backgroundColor = jsSettings.PageColor;

	var inputTextChat = getById('zId_inputTextChat');
    if(inputTextChat)
    {
		if(!inputTextChat.value)
		{
			makeTextChatHint();
		}
	}
}