var _cams		= new Array();
var _tick		= 5;
var _uaSupported	= true;
var _framerate		= 50;
var _percentage		= 50;
var _shownCam		= "";

var TAB_TYPE    = new Array("general", "motion_detection", "permissions");
var TAB_NAME    = new Array("general", "motion detection", "permissions");

var _motionAlerts       = false;
var _sysNotif           = true;
var _motionNotifInterval= 1;
var _camProfileGUID     = "";
var _camProfileTab      = TAB_TYPE[0];
var _permissions        = new Array();



function uninit() 
{
	clearAllCams();
	hideCam();
        hideCamProfile();
        hideEmbeddingScript();
        document.getElementById("user-settings").innerHTML      = "";
}

function verifyUA() 
{
	CamController.isBrowserSupported(function(data) 
	{
		_uaSupported = data;
	});
}

function retrieveCamList() 
{
	
	CamController.retrieveCamList(function(data) 
	{
		var resp = data.parseJSON();

		if(true == resp.successful)
		{
			dwr.util.setValue("status-bar", "");
			setCams(resp.data.parseJSON());
			
			
		}
		else
		{
			dwr.util.setValue("status-bar", resp.error);
			uninit();
			//clearAllCams();
			//hideCam();
		}
	});
}

function handleEnter(keyCode) 
{
    if (keyCode == 13)
        return signIn();
    else
        return true;
}

function disableLoginControls(disable) 
{
	document.getElementById("login").disabled       = disable;
	document.getElementById("password").disabled    = disable;
	document.getElementById("remember-me").disabled = disable;
}


function refresh()
{
	if(!signedin)
		return;

	_tick++;

	retrieveCamList();
	//getQuality();
        setTimeout("refresh()", (_tick > 5)? 10000:2000);
}

function activateCam(index) 
{
	if(3 == _cams[index].statenum)
	{
		hideCamByIndex(index);
	}
	//CamController.activateCam(_cams[index].ip, _cams[index].guid, ((3 != _cams[index].statenum)? 0:1), 0, _cams[index].capture, _cams[index].public, function(data) 
	CamController.activateCam(_cams[index].ip, _cams[index].guid, ((3 != _cams[index].statenum)? 0:1), 1, _cams[index].capture, _cams[index].public, function(data) 
	{
		var resp = data.parseJSON();

		if(true != resp.successful)
			alert(resp.error);

		_tick = 0;
		//refresh();
		setTimeout("retrieveCamList()", 500);
	});
}

				   
function increaseFrameRate(index) 
{
	setQuality(index, _framerate+10, _percentage);
}

function decreaseFrameRate(index) 
{
	setQuality(index, _framerate-10, _percentage);
}

function increasePercentage(index) 
{
	setQuality(index, _framerate, _percentage+10);
}

function decreasePercentage(index) 
{
	setQuality(index, _framerate, _percentage-10);
}


function setQuality(index, framerate, percentage) 
{
	if(3 != _cams[index].statenum)
		return;

	CamController.setQuality(_cams[index].ip, _cams[index].guid, framerate, percentage, function(data) 
	{
		var resp = data.parseJSON();

		if(true != resp.successful)
			alert(resp.error);
		
		var quality = resp.data.parseJSON();
		_framerate	= quality.framerate;
		_percentage = quality.percentage;
		dwr.util.setValue("framerate", _framerate+"%");
		dwr.util.setValue("smoothness", _percentage+"%");

	});
}

function getQuality() 
{
	CamController.getQuality(function(data) 
	{
		var resp = data.parseJSON();

		if(true == resp.successful)
		{
			var quality = resp.data.parseJSON();
			_framerate	= quality.framerate;
			_percentage = quality.percentage;
			dwr.util.setValue("framerate", _framerate+"%");
			dwr.util.setValue("smoothness", _percentage+"%");
		}

	});
}


function initQuality(index) 
{
    if(_cams[index].allow_quality_adjustment)
    {
	CamController.getQuality(function(data) 
	{
		var resp = data.parseJSON();

		if(true == resp.successful)
		{
			var quality = resp.data.parseJSON();
			_framerate	= quality.framerate;
			_percentage = quality.percentage;
			dwr.util.setValue("framerate", _framerate+"%");
			dwr.util.setValue("smoothness", _percentage+"%");
		}

		setQuality(index, _framerate, _percentage);

	});
    }
    else
    {
        dwr.util.setValue("framerate", _framerate+"%");
        dwr.util.setValue("smoothness", _percentage+"%");
    }
}


function publishCam(index) 
{
	_cams[index].public = !_cams[index].public;
	CamController.setCamParam(_cams[index].ip, _cams[index].guid, 0, _cams[index].capture, _cams[index].public, _cams[index].audio, function(data) 
	{
		var resp = data.parseJSON();

		if(true != resp.successful)
			alert(resp.error);
	});
}

function captureCam(index) 
{
	_cams[index].capture = !_cams[index].capture;
	CamController.setCamParam(_cams[index].ip, _cams[index].guid, 0, _cams[index].capture, _cams[index].public, _cams[index].audio, function(data) 
	{
		var resp = data.parseJSON();

		if(true != resp.successful)
			alert(resp.error);
	});
}

function enableAudio(index) 
{
	_cams[index].audio = !_cams[index].audio;
         
	CamController.setCamParam(_cams[index].ip, _cams[index].guid, 0, _cams[index].capture, _cams[index].public, _cams[index].audio, function(data) 
	{
		var resp = data.parseJSON();

		if(true != resp.successful)
			alert(resp.error);
	});
}

/*
function showCam(index) 
{
	var player =	"<APPLET codebase='viewer' code='net/livestream/web/LiveStreamApplet.class'  ARCHIVE='web-viewer.jar' width=352 height=288><PARAM NAME='guid'  VALUE='" + _cams[index].guid + "'><PARAM NAME='ep' VALUE='" + _cams[index].pubpoint + "'><PARAM NAME='login' VALUE='" + _cams[index].owner + "'><PARAM NAME='transport'   VALUE='" + _cams[index].transport + "'><PARAM NAME='min-view-percentage'  VALUE='99'></APPLET>" + 
					"<br><br>" +
					"<table  class='table' width=332>" +
					"<tr><th></th><th>smoothness:&nbsp;<span id='smoothness'></span></th><th>framerate:&nbsp;<span id='framerate'></span></th></tr>" + 
					"<tr>" + 
					"<td><input name='hide_cam' class='button' value='Hide' type='button' onclick='hideCam()'/></td>" +
					"<td>" + createSmoothnessControl(index) + "</td>" +
					"<td>" + createFramerateControl(index) + "</td>" +
					"</tr>" + 					
					"</table>" + 					
					"<br>";		

	document.getElementById("player").innerHTML		= player;
	document.getElementById("cam-name").innerHTML	= "<h1>" + _cams[index].alias + "</h1>";// + (_uaSupported? "" : "<code>Internet Explorer required</code>");
	_shownCam = _cams[index].guid;

	initQuality(index);
}
*/

function showCam(index) 
{
	var player =	"<APPLET codebase='viewer' code='net/livestream/web/LiveStreamApplet.class'  ARCHIVE='web-viewer.jar' width=352 height=288><PARAM NAME='guid'  VALUE='" + _cams[index].guid + "'><PARAM NAME='ep' VALUE='" + _cams[index].pubpoint + "'><PARAM NAME='login' VALUE='" + _cams[index].owner + "'><PARAM NAME='transport'   VALUE='" + _cams[index].transport + "'><PARAM NAME='min-view-percentage'  VALUE='99'><PARAM NAME='resolver' VALUE='http://live-stream.net/camresolver?cam='></APPLET>" + 
					"<br><br>" +
					"<table  class='table' width=332>" +
					"<tr><th></th><th>smoothness:&nbsp;<span id='smoothness'></span></th><th>framerate:&nbsp;<span id='framerate'></span></th></tr>" + 
					"<tr>" + 
					"<td><input name='hide_cam' class='button' value='Hide' type='button' onclick='hideCam()'/></td>" +
					"<td>" + createSmoothnessControl(index) + "</td>" +
					"<td>" + createFramerateControl(index) + "</td>" +
					"</tr>" + 					
					"</table>" + 					
					"<br>";		

        document.getElementById("player").innerHTML     = player;
	document.getElementById("cam-name").innerHTML	= "<h1>" + _cams[index].alias_full + "</h1>";// + (_uaSupported? "" : "<code>Internet Explorer required</code>");
	_shownCam = _cams[index].guid;

        initQuality(index);
        
        document.getElementById("cam-name").scrollIntoView(true);
}

function genEmbeddingScript(index) 
{
    if( _cams[index].public)
    {
	var script =	"<APPLET codebase='http://live-stream.net/viewer' code='net/livestream/web/LiveStreamApplet.class'  ARCHIVE='web-viewer.jar' width=176 height=144><PARAM NAME='guid'  VALUE='" + _cams[index].guid + "'><PARAM NAME='resolver' VALUE='http://live-stream.net/camresolver?cam='><PARAM NAME='min-view-percentage'  VALUE='99'><PARAM NAME='url' VALUE='http://live-stream.net'><PARAM NAME='transport' VALUE='udp'></APPLET>" + 
					"<p>&copy; 2007-2009 <a href='http://live-stream.net' target=_blank>LiveStream</a></p>";		

        var content         = "<table class='table' width='400'>";    
        content             += "<tr><td colspan='2'>";
        content             += "<textarea rows='5' cols='5' id='embed-script-t'>" + script + "</textarea>";
        content             += "</td></tr>";
        content             += "<tr><td colspan='2' align='right'>";
        content             += "<input name='hide_script' class='button' value='Hide' type='button' onclick='hideEmbeddingScript()'/>";
        content             += "</td></tr>";
        content             += "</taable>";
        
	document.getElementById("embed-script").innerHTML		= content;
        document.getElementById("embed-cam-name").innerHTML             = "<h1>" + _cams[index].alias_full + "</h1><code>Please copy and paste the code below:</code>"; 
        document.getElementById("embed-script-t").focus();
        document.getElementById("embed-script-t").select();
    }
    else
    {
        showCamProfile(index, TAB_TYPE[0], true);
        alert('Please mark \"' + _cams[index].alias_full + '\" as public.');
    }
}

function hideEmbeddingScript(index) 
{
    document.getElementById("embed-script").innerHTML		= "";
    document.getElementById("embed-cam-name").innerHTML         = ""; 
}

function hideCam() 
{
	document.getElementById("player").innerHTML		= "";
	document.getElementById("cam-name").innerHTML	= "";
	_shownCam										= "";
}

function hideCamByIndex(index) 
{
	if(null != _cams[index] && _shownCam == _cams[index].guid)//null != document.getElementById("player_" + _cams[index].pubpoint))
		 hideCam();
}


function clearCams(cams) 
{
	var tbody = document.getElementById("cam-table-body");

	var shouldBeRemoved = new Array();
	var index           = 0;
	var trElems         = tbody.getElementsByTagName("tr");

   // alert(trElems);

	for (var i = 0; i <trElems.length; i++) 
	{   
		var trElem = trElems[i];

		var exists = false;
		for (var j = 0; j < cams.length; j++) 
		{
			//alert(trElem.id + " to remove: " + cams[j].guid);

			if(trElem.id == cams[j].guid)
			{
				exists = true;
				break;
			}
		}

		if(false == exists)
			shouldBeRemoved[index++] = trElem.id;
			
	}


	for (var i = 0; i < shouldBeRemoved.length; i++) 
		tbody.removeChild(document.getElementById(shouldBeRemoved[i]));
}

function clearAllCams() 
{
	var tbody = document.getElementById("cam-table-body");

	while (tbody.childNodes.length > 0) 
		tbody.removeChild(tbody.firstChild);

	_cams = new Array();
}


function createCamActivationControl(index)
{
    var control = "";
    
    switch(_cams[index].statenum)
    {
        case 3:		
            control =	"<input name='act_cam' class='button' value='Stop' type='button' onclick='activateCam(" + index + ")'/>" +
                            "&nbsp;" + 
                            "<input name='show_cam' class='button' value='Show' type='button' onclick='showCam(" + index + ")'/>";
                            //"<br><a href='javascript:;' onclick='showCam(" + index + ")'>show</a>";
            break;                
        case 5:
        case 7:
            control = "<input name='act_cam' class='button' value='Start' type='button' onclick='activateCam(" + index + ")'/>";
            break;
        default:
            control = "<input name='act_cam' class='button' value='...' type='button'/>";
            break;
    }
    
    return control;// + "<br><a href='javascript:;' onclick='genEmbeddingScript(" + index + ")'>embed</a>";
}

function updateMotionSettings(index) 
{
    dwr.util.setValue("update_motion_settings_status", "updating...");
    
    CamController.setMotionSettings(_cams[index].ip, 
                                    _cams[index].guid, 
                                    document.getElementById("notify_on_motion").checked,
                                    100 - document.getElementById("motion_detect_sensitivity").options[document.getElementById("motion_detect_sensitivity").selectedIndex].value,
                                    document.getElementById("motion_alert_int").options[document.getElementById("motion_alert_int").selectedIndex].value,
                                    document.getElementById("capture_on_motion").checked,
                                    document.getElementById("capture_length").options[document.getElementById("capture_length").selectedIndex].value,
                                    function(data) 
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
            alert(resp.error);
        else
        {
            data                                    = resp.data.parseJSON();
            _cams[index].notify_on_motion           = data.notify_on_motion;
            _cams[index].motion_detect_sensitivity  = data.motion_detect_sensitivity;
            _cams[index].motion_alert_int           = data.motion_alert_int;
            _cams[index].capture_on_motion          = data.capture_on_motion;
            _cams[index].capture_length             = data.capture_length;
        }
        
        showCamProfileTab(index, TAB_TYPE[1]);
        dwr.util.setValue("update_motion_settings_status", "");
    });
}

function onNeverExpires(guid, alias, login, update)
{
    var neverExpires = document.getElementById("chk_never_expires").checked;
    
    document.getElementById("expiration_month").disabled = neverExpires;
    document.getElementById("expiration_day").disabled = neverExpires;
    document.getElementById("expiration_year").disabled = neverExpires;
    
    if(update)
      updatePermissionsOnEnter(guid, alias, login, 13);
}

function updatePermissionsOnEnter(guid, alias, login, keyCode)
{
    if (keyCode == 13)
    {
        var type = "";
        
        for(var j=0; j<_permissions[0].actions.length; j++)
            if(document.getElementById(_permissions[0].actions[j].type).checked)
            {
                type = _permissions[0].actions[j].type;
                break;
            }
        
        return updatePermissions(guid, alias, login, type);
    }
    else
        return true;
}

function updatePermissions(guid, alias, login, type)
{
    dwr.util.setValue("update_permissions_settings_status", "updating...");
    dwr.util.setValue("btn_update_permissions_settings", "...");
    
    var exp = "";
    if(!document.getElementById("chk_never_expires").checked)
    {
        exp = document.getElementById("expiration_year").options[document.getElementById("expiration_year").selectedIndex].value + 
               "-" + 
               document.getElementById("expiration_month").options[document.getElementById("expiration_month").selectedIndex].value + 
               "-" + 
               document.getElementById("expiration_day").options[document.getElementById("expiration_day").selectedIndex].value; 
    }
    
    CamController.setCamPermission( login, 
                                    guid, 
                                    type,
                                    exp,
                                    function(data)  
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
        {
            alert(resp.error);
        }
        else
        {
        }
        
        showCamPersmissionsSettings(guid, alias, login);
        dwr.util.setValue("update_permissions_settings_status", "");
    });
}


function updatePermittedNotificationChannelOnEnter(guid, alias, login, channel, keyCode)
{
    if (keyCode == 13)
        return updatePermittedNotificationChannel(guid, alias, login, channel);
    else
        return true;
}

function updatePermittedNotificationChannel(guid, alias, login, channel)
{
    dwr.util.setValue("update_permissions_settings_status", "updating...");
    dwr.util.setValue("btn_update_permissions_settings", "...");
    dwr.util.setValue("btn_update_permitted_motifications_channels_" + channel, "...");
    
    var maxPerDay = dwr.util.getValue("txt_max_per_day_" + channel);
    
    CamController.setPermittedNotificationChannel(login, 
                                                  guid, 
                                                  channel,
                                                  document.getElementById("chk_" + channel).checked,
                                                  maxPerDay,
                                                  function(data)  
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
        {
            alert(resp.error);
        }
        else if("sms" == channel && document.getElementById("chk_" + channel).checked)
        {
            Accountant.getBalance(function(data) 
            {
                var resp    = data.parseJSON();

                if(true == resp.successful)
                {
                    resp    = resp.data.parseJSON();
                    
                    var buy = false;
                    if(0 == resp.notifications)
                        buy = confirm("Your SMS credits balance is empty, would you like to acquire?");
                    else if(20 > resp.notifications)
                        buy = confirm("Your SMS credits balance is very low, would you like to acquire more?");
                    
                    if(buy)
                        window.location = "buycredits";
                }

            });
        }
        
        showCamPersmissionsSettings(guid, alias, login);
        dwr.util.setValue("update_permissions_settings_status", "");
    });
}

function permittedLoginChanged(login)
{
    //var l = login.options[login.selectedIndex].value;
    showUserPersmissions(login.selectedIndex);
}

function showUserPersmissions(index)
{
    var permission  = _permissions[index];
    var content     = "";
    
    content         += "<table class='table' width='200'>";
    
    
    content         += "<tr>";
    content         += "<td>";
    content         += "<h2>level&nbsp;[<a href='javascript:;' onclick='showHelp(\"Select permission level that you wish to grant to LiveStream user <strong>" + permission.login + "</strong> for <strong>" + permission.alias + "</strong>.\")'>?</a>]</h2>";
    //content         += "</td>";
    //content         += "</tr>";
    
    content         += "<br>";
    content         += "<table><tr>";
    for(var j=0; j<permission.actions.length; j++)
    {
        //content         += "<tr>";
        content         += "<td>";
        content         += "<input type='radio' name='rb_permissions' id='" + permission.actions[j].type + "'" + (permission.level == permission.actions[j].type? "checked":"")  +  " onclick='updatePermissions(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", \"" + permission.actions[j].type + "\")'/>&nbsp;<b>" + permission.actions[j].type + "</b>" + ((permission.actions[j].description != "")? ("<br>" + permission.actions[j].description + ""):"");
        content         += "</td>";
        //content         += "</tr>";
    }
    content         += "</tr></table>";

    content         += "</tr>";


    content         += "<tr><td></td></tr>";
    
    var expiration  = new Date();
    if(permission.exp > 0)
        expiration.setTime(permission.exp);
    else
        expiration.setTime(expiration.getTime() + 1000*3600*24*7); // in a week
    
    content         += "<tr>";
    content         += "<td>";
    content         += "<h2>expires on&nbsp;[<a href='javascript:;' onclick='showHelp(\"Schedule automatic LiveStream user <strong>" + permission.login + "</strong> permissions expiration for <strong>" + permission.alias + "</strong>.\")'>?</a>]</h2>";
    content         += "<br>";
    content         += "<input type='checkbox' name='chk_never_expires' id='chk_never_expires' " + ((0 > permission.exp)? "checked":"") + " onclick='onNeverExpires(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", true)'/>&nbsp;never<br>";
    //content         += "<input type='text' class='textbox' name='expiration' id='expiration' value='" + permission.exp + "' onkeydown='updatePermissionsOnEnter(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", " + "event.keyCode)'/>";
    
    content         += "<select id='expiration_month' name='expiration_month' class='combobox_narrow'>";
    for(var j=0; j<MONTH.length; j++)
        content += "<option value='"+ ((j+1 < 10)? "0"+(j+1) : (j+1)) + "' " + ((expiration.getMonth() == j)? "selected":"") + ">" + MONTH[j] + "</option>";
    content         += "</select>"; 

    content         += "<select id='expiration_day' name='expiration_day' class='combobox_narrow'>";
    for(var j=1; j<=31; j++)
        content += "<option value='"+ ((j < 10)? "0"+j : j) + "' " + ((expiration.getDate() == j)? "selected":"") + ">" + j + "</option>";
    content         += "</select>"; 

    content         += "<select id='expiration_year' name='expiration_year' class='combobox_narrow'>";
    for(var j=2000; j<=expiration.getFullYear(); j++)
        content += "<option value='"+ j + "' " + ((expiration.getFullYear() == j)? "selected":"") + ">" + j + "</option>";
    content         += "</select>"; 

    content         += "&nbsp;"; 
    content         += "<input id='btn_update_permissions_settings' name='btn_update_permissions_settings' class='button' value='Update' type='button' onclick='updatePermissionsOnEnter(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", " + "13)'/>";
    content         += "</td>";
    content         += "</tr>";
    
    content         += "<tr><td></td></tr>";
    
    content         += "<tr>";
    content         += "<td>";
    content         += "<h2>motion detection notifications*&nbsp;[<a href='javascript:;' onclick='showHelp(\"Define how LiveStream user <strong>" + permission.login + "</strong> will receive motion detection notifications from <strong>" + permission.alias + "</strong>.<br><br>Please notice that paid channels (such as SMS) are at your expense.\")'>?</a>]</h2>";
    //content         += "<img src='res/info.png'><br><strong>motion detection notifications*</strong>";
    content         += "<br>";
    
    content         += "<table class='table' width='100%'>";
    content         += "<thead>";
    content         += "<tr>";
    content         += "<td><strong>channel</strong></td>";
    content         += "<td><strong>daily&nbsp;notifications&nbsp;limit</strong></td>";
    content         += "<td><strong>sent&nbsp;today</strong></td>";
    content         += "</tr>";
    content         += "</thead>";
    
    var regEx = new RegExp (' ');
    for(var j=0; j<permission.notif_channels.length; j++)
    {
        content         += "<tr>";
        
        content         += "<td>";
        content         += "<input type='checkbox' name='chk_" + permission.notif_channels[j].type + "' id='chk_" + permission.notif_channels[j].type + "' " + (permission.notif_channels[j].allowed? "checked":"") +  " onclick='updatePermittedNotificationChannel(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", \"" + permission.notif_channels[j].type + "\")'/>&nbsp;" + permission.notif_channels[j].name.replace(regEx, '&nbsp;');
        content         += "</td>";

        content         += "<td>";
        content         += "<input type='text' class='" + ((permission.notif_channels[j].allowed)? "textbox_narrow" : "textbox") + "' name='txt_max_per_day_" + permission.notif_channels[j].type + "' id='txt_max_per_day_" + permission.notif_channels[j].type + "' value='" + permission.notif_channels[j].max_per_day + "' " + (!permission.notif_channels[j].allowed? "disabled":"") + " onkeydown='updatePermittedNotificationChannelOnEnter(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", \"" + permission.notif_channels[j].type + "\", event.keyCode)'/>";
        
        if(permission.notif_channels[j].allowed)
            content         += "<input id='btn_update_permitted_motifications_channels_" + permission.notif_channels[j].type + "' name='btn_update_permitted_motifications_channels_" + permission.notif_channels[j].type + "'  class='button' value='Update' type='button' onclick='updatePermittedNotificationChannel(\"" + permission.guid + "\", \"" + permission.alias + "\", \"" + permission.login + "\", \"" + permission.notif_channels[j].type + "\")'/>";
        content         += "</td>";
        
        content         += "<td>";
        content         += permission.notif_channels[j].counter;
        content         += "</td>";
        
        content         += "</tr>";
    }
    content         += "</table>";
    content         += "(*) paid channels are at your expense";
    
    content         += "</td>";
    content         += "</tr>";
    
    content         += "</table>";
    
    document.getElementById("permissions").innerHTML            = content;
    
    onNeverExpires("", "", "", false);
}

function addPermittedLogin(guid)
{
    var login = dwr.util.getValue("txt_add_permitted_login");

    // check if such user is not in list
    for(var j=0; j<_permissions.length; j++)
        if(_permissions[j].login.toLowerCase() == login.toLowerCase())
        {
            document.getElementById("add_permitted_login").innerHTML  = "";
            document.getElementById("permitted_login").selectedIndex  = j;
            permittedLoginChanged(document.getElementById("permitted_login"));
            return;
        }
    
    dwr.util.setValue("btn_add_permitted_login", "...");
    dwr.util.setValue("update_user_settings_status", "adding...");
    
    CamController.addPermittedLogin(login,
                                    guid, 
                                    function(data) 
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
        {
            if(null != document.getElementById("txt_add_permitted_login"))
            {
              dwr.util.setValue("btn_add_permitted_login", "Add");
              document.getElementById("txt_add_permitted_login").focus();
              document.getElementById("txt_add_permitted_login").select();
            }

            if("" == resp.redirect)
                alert(resp.error);
            else if(confirm(resp.error))
                window.location = resp.redirect;
            
        }
        else
        {
            var permission = resp.data.parseJSON();
            
            _permissions.push(permission);
            
            var option    = document.createElement("option");
            option.value  = _permissions[_permissions.length-1].login;
            option.text   = _permissions[_permissions.length-1].login;
            document.getElementById("permitted_login").options.add(option);
            document.getElementById("permitted_login").selectedIndex  = _permissions.length-1;
            document.getElementById("permitted_login").disabled       = false;
            
            permittedLoginChanged(document.getElementById("permitted_login"));
            
            document.getElementById("add_permitted_login").innerHTML  = "";
        }
        
        dwr.util.setValue("update_user_settings_status", "");
    });
    
    
}

function addPermittedLoginOnEnter(guid, keyCode)
{
    if (keyCode == 13)
        return addPermittedLogin(guid);
    else
	return true;
}

function onAddPermittedLogin(guid)
{
    
    var content = "";
    
    content     += "<input name='txt_add_permitted_login' id='txt_add_permitted_login' class='textbox' type='text' onkeydown='addPermittedLoginOnEnter(\"" + guid +  "\", event.keyCode)'/>";
    content     += "<input name='btn_add_permitted_login' class='button' value='Add' type='button' onclick='addPermittedLogin(\"" + guid +  "\")'/>";
    
    document.getElementById("add_permitted_login").innerHTML  = content;
    document.getElementById("txt_add_permitted_login").focus();
    
}

function onRegisterAndAddPermittedLogin(guid, alias)
{
    
    var content = "";
    
    
    content     += "<code>";
    content     += "<span id='reg-status'>You are going to create new LiveStream user account.<br>This account will be granted permissions for <strong>" + alias + "</strong>.<br><br>Please fill out the form below.<br>All fields are mandatory.</span>";    
    content     += "<div class='searchform'>";
    content     += "<table id='reg-form' width=200>";
    content     += "<tr>";
    content     += "<td colspan='2'>User&nbsp;name&nbsp;(email&nbsp;address)</td>";
    content     += "<td><input name='txt_login' id='txt_login' class='textbox' type='text' onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='2'>Password</td>";
    content     += "<td><input name='txt_password' id='txt_password' class='textbox' type='password' onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='2'>Password&nbsp;confirmation</td>";
    content     += "<td><input name='txt_password-conf' id='txt_password-conf' class='textbox' type='password' onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='2'>First&nbsp;name</td>";
    content     += "<td><input name='txt_fname' id='txt_fname' class='textbox' type='text' onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='2'>Last&nbsp;name</td>";
    content     += "<td><input name='txt_lname' id='txt_lname' class='textbox' type='text' onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td>Phone&nbsp;number&nbsp;(international)</td>";
    content     += "<td id='flag'></td>";
    content     += "<td><input name='txt_number' id='txt_number' class='textbox' type='text' onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='2'>Security&nbsp;code&nbsp;(numeric)</td>";
    content     += "<td><input name='captcha-i' id='captcha-i' class='textbox' type='text'  onkeydown='registerOnEnter(\"" + guid + "\", \"" + alias + "\", " + "event.keyCode)'/></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='3' align='right'><span id='captcha'></span><br><a href='javascript:;' onclick='refreshCaptcha()'>refresh</a></td>";
    content     += "</tr>";
    content     += "<tr>";
    content     += "<td colspan='3' align='right'><input name='register' class='button' value='Register' type='button' onclick='register(\"" + guid + "\", \"" + alias + "\")'/></td>";
    content     += "</tr>";
    content     += "</table>";
    content     += "</div>";
    content     += "</code>";
    
    document.getElementById("add_permitted_login").innerHTML  = content;
    
    
    document.getElementById("flag").innerHTML = "";

    SmsSender.getClientCountryAndCountryCode(function(data) 
    {
        if("" != data)
        {
            var country = data.parseJSON();

            if("" != country.id )
                document.getElementById("flag").innerHTML = "<img src='res/flags/" + country.id + ".png'>";

            if("" != country.code)
                dwr.util.setValue("number", country.code);

            refreshCaptcha();

        }

        document.getElementById("txt_login").focus();
    });
    
}

function register(guid, alias) 
{
    var password      = dwr.util.getValue("txt_password");
    var passwordConf  = dwr.util.getValue("txt_password-conf");

    if(password != passwordConf)
    {
        document.getElementById("reg-status").innerHTML = "<strong>Invalid password confirmation</strong>";
        return;
    }



    var number = dwr.util.getValue("txt_number");
/*/
    if(number.length <= 10 && !confirm('The phone number looks too short, continue?'))
    {
        document.getElementById("txt_number").focus();
        document.getElementById("txt_number").select();
        return;
    }
*/
    var captcha = dwr.util.getValue("captcha-i");

    if(0 == captcha.length)
    {
        document.getElementById("captcha-i").focus();
        alert("Security code must be set!");
        return;
    }

    var login = dwr.util.getValue("txt_login");
    
    document.getElementById("reg-status").innerHTML = "<strong>registering...</strong>";
    Accountant.register(login,
                        dwr.util.getValue("txt_password"),
                        dwr.util.getValue("txt_fname"),
                        dwr.util.getValue("txt_lname"),
                        number, 
                        captcha, 
                        false,
                        function(data) 
    {
        var resp = data.parseJSON();

        if(!resp.successful)
        {
            document.getElementById("reg-status").innerHTML = "<strong>" + resp.error + "</strong>";
            alert(resp.error);
        }
        else
        {
            dwr.util.setValue("update_user_settings_status", "adding...");
    
            CamController.addPermittedLogin(login,
                                            guid,
                                            function(data) 
            {
                document.getElementById("add_permitted_login").innerHTML  = "";
                
                var resp = data.parseJSON();
                if(true != resp.successful)
                    alert(resp.error);
                else
                    showCamPersmissionsSettings(guid, alias, login);

                dwr.util.setValue("update_user_settings_status", "");
            });
    
        }
    });
}

function registerOnEnter(guid, alias, keyCode) 
{
    if (keyCode == 13)
        return register(guid, alias);
    else
        return true;
}

function refreshCaptcha()
{
    document.getElementById("captcha").innerHTML = "<img src='Captcha.jpg/" + new Date().getTime() + "'>";
}

function onRemovePermittedLogin(guid, alias)
{
    if(document.getElementById("permitted_login").selectedIndex < 0)
        return;
    
    dwr.util.setValue("update_permissions_settings_status", "updating...");
    
    CamController.removePermittedLogin(document.getElementById("permitted_login").options[document.getElementById("permitted_login").selectedIndex].value,
                                      guid, 
                                      function(data) 
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
        {
            alert(resp.error);
        }
        else
        {
            showCamPersmissionsSettings(guid, alias, "");
        }
        
        dwr.util.setValue("update_user_settings_status", "");
    });
    
}

/*
function hideHelp(text)
{
    document.getElementById("help").innerHTML = "";
}

function showHelp(text)
{
    document.getElementById("help").innerHTML = "<table width='100%'><tr><td align='left'><code><img src='res/info.png'><br><br>" + text + "</code></td></tr><tr><td align='right'><a href='javascript:;' onclick='hideHelp()'>hide</a></td></tr></table>";
    document.getElementById("help").scrollIntoView(true);
}
*/


function showCamPersmissionsSettings(guid, alias, login)
{
    CamController.getCamPermissions(guid, function(data)
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
            document.getElementById("cam-settings").innerHTML  = "<p><strong>" + resp.error +  "</strong></p>";//"<p><strong>You are not granted to edit this parameters.</strong></p>";
            //alert(resp.error);
        else
        {
            resp            = resp.data.parseJSON();
            _permissions    = resp.permissions;
            
            var content     = "";
            var selected    = -1;
    
            content         += "<span id='help'></span>";  
            content         += "<label id='update_permissions_settings_status'></label>";
            content         += "<div class='searchform'>";
            content         += "<table class='table' width='400'>";
           /*/
            content         += "<tr>";
            content         += "<td colspan=2>";
            content         += "<code>available&nbsp;licenses:&nbsp;<strong>" + (resp.total_cam_licenses-resp.used_cam_licenses) + "</strong> of <strong>" + resp.total_cam_licenses + "</strong>";
            content         += "</td>";
            content         += "</tr>";
            */
            content         += "<tr>";
            content         += "<td colspan='2'>";
            content         += "<strong>user</strong>&nbsp;[<a href='javascript:;' onclick='showHelp(\"Add/remove LiveStream users who are permitted to watch/manupulate <strong>" + alias + "</strong>.\")'>?</a>]<br>";
            content         += "<select id='permitted_login' name='permitted_login' class='combobox_wide' " + ((0 < _permissions.length)? "" : "disabled")  + " onchange='permittedLoginChanged(this)'>";
            for(var j=0; j<_permissions.length; j++)
            {
                if(login.toLowerCase() == _permissions[j].login.toLowerCase())
                    selected = j;
                content += "<option value='"+ _permissions[j].login + "' " + ((login.toLowerCase() == _permissions[j].login.toLowerCase())? "selected":"") + ">" + _permissions[j].login + "</option>";
            }
            content         += "</select>";
            
            content         += "<br>";
            content         += "<a href='javascript:;' onclick='onAddPermittedLogin(\"" + guid + "\")'>add existing</a>|<a href='javascript:;' onclick='onRegisterAndAddPermittedLogin(\"" + guid + "\", \"" + alias + "\")'>add new</a>|<a href='javascript:;' onclick='onRemovePermittedLogin(\"" + guid + "\", \"" + alias + "\")'>remove</a>"
            content         += "<br><br>";
            content         += "<span id='add_permitted_login'></span>"
            content         += "</td>";
/*/
            content         += "<td align='right'>";
            content         += "<code>available&nbsp;licenses:&nbsp;<strong>" + (resp.total_cam_licenses-resp.used_cam_licenses) + "</strong> of <strong>" + resp.total_cam_licenses + "</strong>";
            content         += "</td>";
            */
            content         += "</tr>";
            

            content         += "<tr>";
            content         += "<td colspan=2><span id='permissions'></span></td>";
            content         += "</tr>";
            
            content         += "</table>";
            content   += "</div>";


            //content += "<input id='hide_cam_profile' name='hide_cam_profile' class='button' value='Hide' type='button' onclick='hideCamProfile()'/>";
            document.getElementById("cam-settings").innerHTML            = content;
            
            //document.getElementById("permissions-settings-caption").innerHTML    = "<h1>" + alias + " - Permissions</h1>";

            //_camProfileGUID = guid;
            
            if(selected < 0 && _permissions.length > 0)
                selected  = 0;
            if(selected >= 0)
                showUserPersmissions(selected);
            
            //document.getElementById("cam-settings").scrollIntoView(true);
            
        }
    });
}


function createSettingsControl(index)
{
    return "<a href='javascript:;' onclick='showCamProfile(" + index + ", \"" + "" + "\", true)'>edit</a>&nbsp;|&nbsp;<a href='javascript:;' onclick='genEmbeddingScript(" + index + ")'>embed</a>";
}

function showCamProfile(index, tab, scroll)
{
    if("" == tab)
        tab = _camProfileTab;
    
    // create tab menu
    var menu = "<h1>" + _cams[index].alias_full +  " settings</h1><table width='100%'>";
    
    menu += "<tr><td><code>";
    for(var i=0; i<TAB_TYPE.length; i++)
    {
        var name        = TAB_NAME[i];
        
        if(TAB_TYPE[i] == tab)
          name = "<strong>" + name + "</strong>";
      
        menu += "<a href='javascript:;' onclick='showCamProfile(" + index +  ",\"" + TAB_TYPE[i] + "\")'>" + name + "</a>"
        
        if(i < (TAB_TYPE.length-1))
          menu += "&nbsp;|&nbsp;";
      
    }
    menu += "</code></td>";
    
    menu += "<td align='right'><input id='hide_cam_profile' name='hide_cam_profile' class='button' value='Hide' type='button' onclick='hideCamProfile()'/></td>";
    menu += "</tr></table>";
    
    document.getElementById("cam-settings-menu").innerHTML = menu;
    if(scroll)
      document.getElementById("cam-settings-menu").scrollIntoView(true);
    
    // show tab
    showCamProfileTab(index, tab);
}

function showCamProfileTab(index, tab)
{
    _camProfileTab  = tab;
    _camProfileGUID = _cams[index].guid;
    
    
    var content     = "";
    
    if(tab == TAB_TYPE[0]) // general
    {
        content   += "<div class='searchform'>";
        content   += "<table width='400'><tr>";
        
        switch(_cams[index].statenum)
        {
            case 3:		
            case 5:
            {
                if(_cams[index].enable_capture)
                    content += "<td><input name='capture_cam' type='checkbox' " + (_cams[index].capture? "checked":"") + " " + (!_cams[index].enable_capture? "disabled":"") + " onclick='captureCam(" + index + ")'/>&nbsp;capture</td>";

                if(_cams[index].enable_public)
                    content += "<td><input name='publish_cam' type='checkbox' " + (_cams[index].public? "checked":"") + " " + (!_cams[index].enable_public? "disabled":"") + " onclick='publishCam(" + index + ")'/>&nbsp;public</td>";

                break;            
            }
            default:
            {
               if(_cams[index].enable_capture)
                    content += "<td><input name='capture_cam' type='checkbox' " + (_cams[index].capture? "checked":"") + " disabled/>&nbsp;capture</td>";

               if(_cams[index].enable_public)
                   content += "<td><input name='publish_cam' type='checkbox' " + (_cams[index].public? "checked":"") + " disabled/>&nbsp;public</td>";

               break;
            }
        }

        content   += "<td><input name='enable_audio' type='checkbox' " + (_cams[index].audio? "checked":"") + " " + (!_cams[index].allow_audio_act? "disabled":"") + " onclick='enableAudio(" + index + ")'/>&nbsp;audio</td>";
        content   += "</tr></table>";
        content   += "</div>";
    }
    else if(tab == TAB_TYPE[1]) // motion detection
    {
        if(_cams[index].allow_motion_detect_act)
        {
          content         += "<label id='update_motion_settings_status'></label>";
          content         += "<p><strong>Important</strong><br><br>Light fluctuations may cause false motion detection on some cameras.<br>Please take a moment to adjust sensitivity carefully.</p>";
          content         += "<div class='searchform'>";
          content         += "<table class='table' width='400'>";

          content         += "<tr>";
          content         += "<td colspan='2' align='left'><input type='checkbox' id='notify_on_motion' " + (_cams[index].notify_on_motion? "checked":"")  +  " onclick='updateMotionSettings(" + index + ")'/>&nbsp;On</td>";
          content         += "</tr>";

          content         += "<tr>";
          content         += "<td>Sensitivity (%)</td>"; 
          content         += "<td align='right'>";
          content         += "<select id='motion_detect_sensitivity' name='motion_detect_sensitivity' class='combobox' " + (_cams[index].notify_on_motion? "" : "disabled")  + " onchange='updateMotionSettings(" + index + ")'>";
          for(var i=0; i<=100; i++)
              content += "<option value='" + i + "' " + (((100-i) == _cams[index].motion_detect_sensitivity)? "selected" : "") + ">" + i + "</option>";
          content         += "</select>"; 
          content         += "</td>";
          content         += "</tr>";

          content         += "<tr>";
          content         += "<td>Min interval between notifications (min)</td>"; 
          content         += "<td align='right'>";
          content         += "<select id='motion_alert_int' name='motion_alert_int' class='combobox' " + (_cams[index].notify_on_motion? "" : "disabled")  + " onchange='updateMotionSettings(" + index + ")'>";
          for(var i=1; i<=240; i++)
              content += "<option value='"+ i + "' " + ((i == _cams[index].motion_alert_int)? "selected" : "") + ">" + i + "</option>";
          content         += "</select>"; 
          content         += "</td>";
          content         += "</tr>";

          content         += "<tr>";
          content         += "<td colspan='2' align='left'><input type='checkbox' id='capture_on_motion' " + (_cams[index].capture_on_motion? "checked":"") + " " + (_cams[index].notify_on_motion? "" : "disabled")  + " onclick='updateMotionSettings(" + index + ")'/>&nbsp;Start&nbsp;capture&nbsp;on&nbsp;motion&nbsp;detection</td>";
          content         += "</tr>";

          content         += "<tr>";
          content         += "<td>Capture duration (min)</td>"; 
          content         += "<td align='right'>";
          content         += "<select id='capture_length' name='capture_length' class='combobox' " + ((_cams[index].notify_on_motion && _cams[index].capture_on_motion)? "" : "disabled")  + " onchange='updateMotionSettings(" + index + ")'>";
          for(var i=1; i<=240; i++)
              content += "<option value='"+ i + "' " + ((i == _cams[index].capture_length)? "selected" : "") + ">" + i + "</option>";
          content         += "</select>"; 
          content         += "</td>";
          content         += "</tr>";

          content         += "</table>";
          content         += "</div>";
        }
        else
            content       += "<p><strong>You are not granted to edit these parameters.</strong></p>";
    }
    else if(tab == TAB_TYPE[2]) // permissions
    {
        if(_cams[index].allow_motion_detect_act)
            showCamPersmissionsSettings(_cams[index].guid, _cams[index].alias_full,  "");
        else
            content       += "<p><strong>You are not granted to edit this parameters.</strong></p>";
    }
    
    if("" != content)
        document.getElementById("cam-settings").innerHTML = content;
}

function hideCamProfile()
{
    //_camProfileTab      = "";
    _camProfileGUID     = "";
    
    document.getElementById("cam-settings-menu").innerHTML = "";
    document.getElementById("cam-settings").innerHTML = "";
}


function createCamPublicControl(index)
{
    return "";
    /*
	switch(_cams[index].statenum)
	{
		case 3:		
		case 5:
			return "<input name='publish_cam' type='checkbox' " + (_cams[index].public? "checked":"") + " onclick='publishCam(" + index + ")'/>";
		default:
                        return "<input name='publish_cam' type='checkbox' " + (_cams[index].public? "checked":"") + " disabled/>";
	}*/
}

function createPreview(index)
{
	//return ("" != _cams[index].preview)? ("<a href='data:image;base64," + _cams[index].preview + "'/><img src='data:image/png;base64," + _cams[index].preview + "' border=0></a>") : "";
	//return ("" != _cams[index].preview)? ("<img src='data:image/png;base64," + _cams[index].preview + "' width='88' height='72'>") : "";
	return ("" != _cams[index].preview)? ("<img src='" + _cams[index].preview + "' width='66' height='54'>") : "";
}




function createSmoothnessControl(index)
{
	switch(_cams[index].statenum)
	{
		case 3:		
			return	"<a href='#' onMouseOver=\"document.images[0].src='res/left_over.png';return true;\" onMouseOut=\"document.images[0].src='res/left.png';return true;\" onMouseDown=\"document.images[0].src='res/left_down.png';return true;\" onMouseUp=\"document.images[0].src='res/left.png';return true;\">" + 
					"<img src='res/left.png' onclick='decreasePercentage(" + index + ")'/>" + 
					"<a href='#' onMouseOver=\"document.images[1].src='res/right_over.png';return true;\" onMouseOut=\"document.images[1].src='res/right.png';return true;\"  onMouseDown=\"document.images[1].src='res/right_down.png';return true;\" onMouseUp=\"document.images[1].src='res/right.png';return true;\">" +
					"<img name='smoothnessUp' src='res/right.png' onclick='increasePercentage(" + index + ")'/>";
		default:
			return "";
	}
}

 function createFramerateControl(index)
{
	switch(_cams[index].statenum)
	{
		case 3:		
			return	"<a href='#' onMouseOver=\"document.images[2].src='res/left_over.png';return true;\" onMouseOut=\"document.images[2].src='res/left.png';return true;\" onMouseDown=\"document.images[2].src='res/left_down.png';return true;\" onMouseUp=\"document.images[2].src='res/left.png';return true;\">" + 
					"<img name='framerateDown' src='res/left.png' onclick='decreaseFrameRate(" + index + ")'/>" + 
					"<a href='#' onMouseOver=\"document.images[3].src='res/right_over.png';return true;\" onMouseOut=\"document.images[3].src='res/right.png';return true;\" onMouseDown=\"document.images[3].src='res/right_down.png';return true;\" onMouseUp=\"document.images[3].src='res/right.png';return true;\">" +
					"<img name='framerateUp' src='res/right.png' onclick='increaseFrameRate(" + index + ")'/>";
		default:
			return "";
	}
}


function setCams(cams) 
{
	_cams = cams;
	
	clearCams(cams);

    var index   = -1;
	var tbody   = document.getElementById("cam-table-body");
	
	var trElem, tdElem, txtNode;
	for (var j = 0; j < cams.length; j++) 
	{
                if(_camProfileGUID == _cams[j].guid)// && _cams[j].allow_motion_detect_act)
                    index = j;
                
		trElem              = document.getElementById(cams[j].guid);
		if(null == trElem)
		{
			trElem = document.createElement("tr");
			
			trElem.className    = (j%2 == 0)? "row-a" : "row-b";
			trElem.id           = cams[j].guid

                        //var icon    = "";    
			tdElem      = document.createElement("td");
			tdElem.id   = "status_icon";
			if(3 == cams[j].statenum)
                            tdElem.innerHTML = "<img src='res/square-green.png'>";
                            //icon = "<img src='res/square-green.png'>";
                        else if(5 == cams[j].statenum)
                            tdElem.innerHTML = "<img src='res/square-gray.png'>";
                            //icon = "<img src='res/square-gray.png'>";
                        else 
                            tdElem.innerHTML = "<img src='res/square-blue.png'>";
                        
                        if(cams[j].ccode.length > 0)
                            tdElem.innerHTML = tdElem.innerHTML + "<br><img src='res/flags/" + cams[j].ccode + ".png' alt='" + cams[j].cname +  "' title='"  + cams[j].cname + "'>";

                        //icon = "<img src='res/square-blue.png'>";
			trElem.appendChild(tdElem);

			tdElem              = document.createElement("td");
			tdElem.id           = "alias";
			tdElem.className    = "td.first";
			txtNode             = document.createTextNode(cams[j].alias);
			tdElem.appendChild(txtNode);
                         
                        //tdElem.innerHTML = icon + "&nbsp;" + cams[j].alias;
			trElem.appendChild(tdElem);

			tdElem              = document.createElement("td");
			tdElem.id           = "control";
			tdElem.innerHTML	= createCamActivationControl(j); 
			trElem.appendChild(tdElem);

			tdElem              = document.createElement("td");
			tdElem.id           = "preview";
			tdElem.innerHTML	= createPreview(j); 
			trElem.appendChild(tdElem);
  
			tdElem              = document.createElement("td");
			tdElem.id           = "settings";
			tdElem.innerHTML	= createSettingsControl(j); 
			trElem.appendChild(tdElem);

			tbody.appendChild(trElem);
                         
		}
		else
		{
			for (var i = 0; i < trElem.childNodes.length; i++) 
			{
				if("status_icon" == trElem.childNodes[i].id)
				{
					if(3 == cams[j].statenum)
						trElem.childNodes[i].innerHTML = "<img src='res/square-green.png'>";
					else if(5 == cams[j].statenum)
						trElem.childNodes[i].innerHTML = "<img src='res/square-gray.png'>";
					else 
						trElem.childNodes[i].innerHTML = "<img src='res/square-blue.png'>";
                                             
                                        if(cams[j].ccode.length > 0)
                                            trElem.childNodes[i].innerHTML = trElem.childNodes[i].innerHTML + "<br><img src='res/flags/" + cams[j].ccode + ".png' alt='" + cams[j].cname +  "' title='"  + cams[j].cname + "'>";

				}   
				else if("alias" == trElem.childNodes[i].id)
				{   
                                    while(trElem.childNodes[i].childNodes.length > 0)
                                      trElem.childNodes[i].removeChild(trElem.childNodes[i].firstChild);
                                       
                                    trElem.childNodes[i].appendChild(document.createTextNode(cams[j].alias));

				}
				else if("control" == trElem.childNodes[i].id)
				{   
					var act = createCamActivationControl(j);
					if(act != trElem.childNodes[i].innerHTML)
						trElem.childNodes[i].innerHTML = act;
				}
				else if("preview" == trElem.childNodes[i].id)
				{   
					var preview = createPreview(j);
					if(preview != trElem.childNodes[i].innerHTML)
						trElem.childNodes[i].innerHTML = preview;
				}
				else if("settings" == trElem.childNodes[i].id)
				{   
					var set = createSettingsControl(j);
					if(set != trElem.childNodes[i].innerHTML)
						trElem.childNodes[i].innerHTML = set;
				}
			}
		}
                
                if(_cams[j].guid == _camProfileGUID && TAB_TYPE[0] == _camProfileTab)
                    showCamProfile(j, _camProfileTab, false);
                
	}

	// reinit style
	for (var i = 0; i < tbody.childNodes.length; i++) 
	{
		trElem				= tbody.childNodes[i];
		trElem.className    = (i%2 == 0)? "row-a" : "row-b";
	}
         
        if(index < 0 && _camProfileGUID != "")
            hideCamProfile();
}

function updateUserSettings() 
{
    dwr.util.setValue("update_user_settings", "...");
    dwr.util.setValue("update_user_settings_status", "updating...");
    
    Accountant.updateUserSettings(document.getElementById("show_foreign_cams").checked, _motionAlerts, _sysNotif, _motionNotifInterval, function(data) 
    {
        var resp = data.parseJSON();
        if(true != resp.successful)
            alert(resp.error);
        else
            retrieveCamList();
        
        dwr.util.setValue("update_user_settings", "Update");
        dwr.util.setValue("update_user_settings_status", "");
    });
}


function setUserSettings() 
{
	Accountant.getUserInfo(function(data) 
	{
                var resp = data.parseJSON();
		if(true == resp.successful)
		{
			var userInfo    = resp.data.parseJSON();
                        var content     = ""; 
                        
                        _motionAlerts           = userInfo.notify_on_motion;
                        _sysNotif               = userInfo.sys_notif;
                        //_motionNotifInterval    = userInfo.motion_notif_int;
                        
                        
                        // settings
                        //content         += "<h1>Settings</h1>";
//                        content         += "<div class='searchform'>";
                        content         += "<label id='update_user_settings_status'></label>";
                        content         += "<table class='table' width='400'>";
                        
                        content         += "<tr>";
                        //content         += "<td>Display public cameras</td>";
                        content         += "<td colspan='2' align='left'><input type='checkbox' id='show_foreign_cams'" + (userInfo.show_foreign_cams? "checked":"")  +  " onclick='updateUserSettings()'/>&nbsp;Display public cameras</td>";
                        content         += "</tr>";

                        /*    
                        content         += "<tr>";
                        //content         += "<td>Send me alert when motion is detected</td>";
                        content         += "<td colspan='2' align='left'><input type='checkbox' id='show_foreign_cams'" + (userInfo.notify_on_motion? "checked":"")  +  "/>&nbsp;Alert me when motion is detected</td>";
                        content         += "</tr>";

                        content         += "<tr>";
                        //content         += "<td>Display public cameras</td>";
                        content         += "<td colspan='2' align='left'><input type='checkbox' id='sys_notif'" + (userInfo.sys_notif? "checked":"")  +  " onclick='updateUserSettings()'/>&nbsp;Send me system notifications</td>";
                        content         += "</tr>";
*/
/*
                        content         += "<tr>";
                        content         += "<td colspan='2' align='right'><input name='update_user_settings' class='button' value='Update' type='button' onclick='updateUserSettings()'/></td>";
                        content         += "</tr>";
*/
                        content         += "</table>";
  //                      content         += "</div>";
                        
                        document.getElementById("user-settings").innerHTML  = content;
		}
                else
                    document.getElementById("user-settings").innerHTML  = "";
                     
	});
}