function help(){
	if (document.getElementById('help1').style.visibility == "hidden") {
		resizeHelp();
        document.getElementById('help1').style.visibility="visible";
        document.getElementById('help2').style.visibility="visible";
        document.getElementById('help3').style.visibility="visible";
        document.getElementById('help4').style.visibility="visible";
        document.getElementById('helps1').style.visibility="visible";
        document.getElementById('helps2').style.visibility="visible";
        document.getElementById('helps3').style.visibility="visible";
        document.getElementById('helps4').style.visibility="visible";
    } else {
	document.getElementById('help1').style.visibility="hidden";
        document.getElementById('help2').style.visibility="hidden";
        document.getElementById('help3').style.visibility="hidden";
        document.getElementById('help4').style.visibility="hidden";
        document.getElementById('helps1').style.visibility="hidden";
        document.getElementById('helps2').style.visibility="hidden";
        document.getElementById('helps3').style.visibility="hidden";
        document.getElementById('helps4').style.visibility="hidden";
    }
}
function resizeHelp() {
	document.getElementById('help2').style.top = ($('#mainPane').height() - $('#divLocations').height() - 40) + "px";
	document.getElementById('helps2').style.top = ($('#mainPane').height() - $('#divLocations').height() - 40) + "px";
	document.getElementById('helps3').style.left = ($('#eastPane').width() + $('#centerPane').width() - 358) + "px";
	document.getElementById('helps4').style.left = ($('#eastPane').width() + $('#centerPane').width() - 358) + "px";
	document.getElementById('helps3').style.top = (55 + $('#divSensorTypes_env').height() + $('#divSensorTypes_box').height()) + "px";
	document.getElementById('helps4').style.top = (75 + $('#divSensorTypes_env').height() + $('#divSensorTypes_box').height() + $('#divAccQuick').height()) + "px";
}
function clsDescCtrl()
{   
    this.strDesc = "Welcome";
    this.divDescription = null;
}

var ctrlDesc = new clsDescCtrl();   //The Description Box in this page

clsDescCtrl.prototype.initDesc = function(title, desc)    // Define Method
{
    this.divDescription = document.getElementById("divDescription");
    
}

clsDescCtrl.prototype.Dataloading= function(title, desc)    // Define Method
{    
    this.strDesc = "<b class='loadingTitle'>" + title + "::</b>" + "<b class='loadingDesc'>" + desc + "</b>";
            
    this.divDescription.innerHTML = this.strDesc;
}

clsDescCtrl.prototype.TagInfo= function(userFName, tagType, desc)    // Define Method
{    
    this.strDesc = "<b class='plotPeriods'>" + "Creator"+ ": </b>" + "<b class='tagFName'>" + userFName + "</b> ";
    this.strDesc += "<b class='plotPeriods'>" + "Type"+ ": </b>" + "<b class='tagType'>" + tagType + "</b> ";
    this.strDesc += "<b class='plotPeriods'>" + "Description"+ ": </b>" + "<b class='tagDesc'>" + desc + "</b>";
            
    this.divDescription.innerHTML = this.strDesc;
}

clsDescCtrl.prototype.Notice = function(desc)    // Define Method
{    
    this.strDesc = "<b class='noticeTitle'>NOTICE:&nbsp;&nbsp;</b>" + "<b class='noticeDesc'>" + desc + "</b>";
            
    this.divDescription.innerHTML = this.strDesc;
}

clsDescCtrl.prototype.NewDatesInfo= function(stt_, end_)    // Define Method
{    
    this.strDesc = "<b class='dataloadedTitle'> Data loaded:&nbsp;&nbsp;</b>" + "<b class='dataloadedDates'>" + stt_.substr(0,10) + " - " + end_.substr(0,10) + "</b>";
            
    this.divDescription.innerHTML = this.strDesc;
}


clsDescCtrl.prototype.Intro = function()    // Define Method
{    
    this.strTitle = "<b  class='descCtrl'>" + "Welcome to Visualization Tool!" + "</b>";
    this.strDesc = "Let's start!";
    this.divDescription.innerHTML = this.strTitle + this.strDesc;
}

clsDescCtrl.prototype.LocationInfo = function(id)    // Define Method
{    
    /*
    this.strDesc = "";
    for(var i=0; i<arrLocations.length; i++)
        if(arrLocations[i].id == id)
        {
            var loc = "Location " + arrLocations[i].id;
            var period = arrLocations[i].startDate + " - " + arrLocations[i].endDate;
            var holdData = arrLocations[i].holdData;
            
            this.strDesc += "<b class='locTitle'>";
            this.strDesc += loc + "</b>&nbsp;&nbsp;";
            
            this.strDesc += "<b class='locPeriod'>";
            this.strDesc += period + "</b>&nbsp;&nbsp;";
            
            this.strDesc += "<b class='locHoldData'>" + holdData + "</b>";
            
            this.divDescription.innerHTML = this.strDesc;
            break;
        }
    */
}

clsDescCtrl.prototype.SiteInfo = function(id)    // Define Method
{   
    this.strDesc = "";
    for(var i=0; i<arrSites.length; i++)
        if(arrSites[i].id == id)
        {
            this.strDesc += "<b class='siteName'>";
            this.strDesc += arrSites[i].name + ":</b>&nbsp;&nbsp;";
            
            this.strDesc += "<b class='siteDesc'>" + arrSites[i].desc + "</b>";

            this.divDescription.innerHTML = this.strDesc;
            break;
        }
}

clsDescCtrl.prototype.Description = function(str)    // Define Method
{   
    this.strDesc = "<b>";
    this.strDesc += str + "</b>&nbsp;&nbsp;";
    this.divDescription.innerHTML = this.strDesc;
}



clsDescCtrl.prototype.SensorTypeInfo = function(id)    // Define Method
{   
    this.strDesc = ""; 
    for(var i=0; i<arrSensorTypes.length; i++)
        if(arrSensorTypes[i].id == id)
        {
            var sensname = arrSensorTypes[i].name;
            var sensdesc = arrSensorTypes[i].desc;
            
            this.strDesc += "<b class='sensorTypeName'>";
            this.strDesc += sensname + "</b>&nbsp;&nbsp;";
            
            this.strDesc += "<b class='sensorTypeDesc'>" + this.putBR(sensdesc,90) + "</b>";

            this.divDescription.innerHTML = this.strDesc;
            break;
        }
} 

clsDescCtrl.prototype.PlotInfo = function(id)    // Define Method
{   
    this.strDesc = ""; 
    for(var i=0; i<arrPlots.length; i++)
        if(arrPlots[i].id == id)
        {
            var arSens = arrPlots[i].strSensorTypes.split(',');
            var senstypes = "";
            for(var j=0; j<arSens.length ; j++)
            {
                for(var k=0; k< arrSensorTypes.length ; k++)
                {
                    if(arrSensorTypes[k].id == arSens[j])
                    {
                        senstypes += arrSensorTypes[k].name + " "; 
                        break;
                    }
                }
            }
            
            var periods = arrPlots[i].startDate.substr(0,10) + " - " + arrPlots[i].endDate.substr(0,10);
            
            this.strDesc += "<b class='basic'>";
            
            this.strDesc += "<b class='plotSensTypes'>";
            this.strDesc += senstypes + "</b>&nbsp;&nbsp;";
            
            this.strDesc += "<b class='plotLocations'>Locations: ";
            this.strDesc += arrPlots[i].strLocations + "</b>&nbsp;&nbsp;";
            
            this.strDesc += "<b class='plotPeriods'>Date: ";
            this.strDesc += periods + "</b>";
            
            this.strDesc += "</b>";

            this.divDescription.innerHTML = this.strDesc;
            break;
        }
}

clsDescCtrl.prototype.putBR = function(str,step)    // Define Method
{
    var start = 0;
    var count = 0;
    var arrStr = new Array();
    var result = "";
    while(str.length > (start + step))
    {
        arrStr[count] = str.slice(start, start + step -1);
        start += step;
        count++;
    }
    arrStr[count] = str.slice(start, str.length);
    
    for(var i =0; i< arrStr.length ; i++)
    {
        result += arrStr[i] + "<br class='nonmargin'>";
    }
    return result.substr(0,result.length-4);
}

clsDescCtrl.prototype.NoticeDialog = function(title_, str_)    // Define Method
{
    var inner_ = "";
    document.getElementById('noticeDialog').title = title_;
    inner_ += "<span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span>"
    inner_ += str_;
    document.getElementById('pNoticeDlg').innerHTML = inner_;
    $("#noticeDialog").dialog({
			    bgiframe: true,
			    modal: true,
			    autoOpen: false,
			    buttons: {
				Ok: function() {
					$(this).dialog('close');
					ctrlLayout.AfterDIalog();
				}
			}
	    });
    ctrlLayout.BeforeDIalog()
	$("#noticeDialog").dialog('open');
}

clsDescCtrl.prototype.EffectedNotice = function(str_)    // Define Method
{
    /*
    var inner_ = "";
    inner_ += "<b class='sensorTypeName'><table><tr>"
    inner_ += "<td><span class='ui-icon ui-icon-alert' style='float:left;height:15px;width:15px;' ></span><td>"
    inner_ += "<td>" + str_ + "</td>";
    inner_ += "<td><span class='ui-icon ui-icon-alert' style='float:left;height:15px;width:15px;' ></span></td>";
    inner_ += "</tr></table></b>"
    this.divDescription.innerHTML = inner_ ;
    var tips = $("#divDescription");
    tips.effect("highlight",{color: '#000'},1500);
    */
    var inner_ = "";
    this.divDescription.innerHTML = str_;
    document.getElementById('divDescription').style.color = 'RED';

}

clsDescCtrl.prototype.StopEffectedNotice = function(str_)
{
    /*
    var tips = $("#divDescription");
    tips.stop();
    tips.css({'color' : 'white'});
    */
    document.getElementById('divDescription').style.color = 'WHITE';
}