function ShowPanel(panelId) {
        var panelElement = document.getElementById(panelId);
        if (panelElement)
            panelElement.style.display = 'block';   
    }

    function ClearPanel(panelId) {
        var panelElement = document.getElementById(panelId);
        if (panelElement)
            panelElement.innerHTML = '';
    }

    function HidePanel(panelId) {
        var panelElement = document.getElementById(panelId);
        if (panelElement)
            panelElement.style.display = 'none';
    }

    /*
     * Sensor and sensor list
     */
    var _sensorList = new Object();
    var _sensorCount = 0;
    var _selectedSensorCount = 0;
    var _colors = ['#FF0000', '#0000FF', '#00FF00', '#FF9900', '#CC00CC', '#00CCCC', '#33FF00', '#990000', '#000066'];
    var _colorIndex = 0;

    //attribute names
    var _sensorNameStr = 'sensorName';
    var _sensorTypeStr = 'sensorType';
    var _publisherNameStr = 'publisherName';
    var _selectedStr = 'selected';

    var _selectControlStr = '(select)';
    var _unselectControlStr = '(unselect)'
    
    // tag ids
    var _sensorChartsPanelId = 'SensorListDiv';
    var _sensorListId = 'SensorList';
    var _multiLineChartPanelId = 'SensorMultiLineChartPanel';
    var _multiLineChartPanelReloaderId = 'ReloadSensorMultiLineChartPanel';
    
    // tag ids partial
    var _selectSensorControlIdPre = 'SLSelectSensorControl';
    var _seperator = '$';
    
    // timer
    var _refreshPeriod = 6000; //3s

    function _sensor(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName, selected, colorIndex) {
        this.webServiceUrl = webServiceUrl;
        this.sensorName = sensorName;
        this.sensorDisplayName = sensorDisplayName;
        this.sensorType = sensorType;
        this.publisherName = publisherName;
        this.selected = selected;
        this.colorIndex = colorIndex;
        this.hasMetadata = (webServiceUrl.indexOf('http://195.176.244.') == 0);
    }
    
    function AddOneSensor(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName, sensorList) {
        var colorIndex;
        if (typeof sensorList[sensorName] == 'undefined') {
            _sensorCount ++;
            _selectedSensorCount ++;
            colorIndex = _colorIndex;
            _colorIndex = (_colorIndex + 1) % _colors.length;
        } else {
            if (!sensorList[sensorName].selected)
                _selectedSensorCount ++;
            colorIndex = sensorList[sensorName].colorIndex;
        }
        sensorList[sensorName] = new _sensor(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName, true, colorIndex);
        return sensorList[sensorName];
    }

    /*
    <div class='sl_sensor_item'>
        <div class='sl_sensor_name'>Sensor 1</div>
        <div class='sl_sensor_detail'></div>
        <!--
        <div class='sl_sensor_detail'>detail</div>
        <div class='sl_sensor_chart'>chart</div>
        -->
        <div class='sl_sensor_name'>select</div>
        <div class='sl_sensor_delete'>X</div>
    </div>
    */
    function ListOneSensor(sensor, parentElement) {
        var temp = [];
        temp.push('<div selected="');
        temp.push(sensor.selected);
        temp.push('" publishername="');
        temp.push(sensor.publisherName);
        temp.push('" sensortype="');
        temp.push(sensor.sensorType);
        temp.push('" sensorname="');
        temp.push(sensor.sensorName);
        temp.push('" class="sl_sensor_item"><span class="sl_sensor_name" onclick="javascript:OnClickSensorName(\'')
        temp.push(sensor.sensorName);
        temp.push('\');">');
        temp.push(sensor.sensorDisplayName);
        temp.push('</span><span onclick="javascript:OnClickSelectOneSensor(\'');
        temp.push(sensor.sensorName);
        temp.push('\');" style="color: ');
        temp.push(_colors[sensor.colorIndex]);
        temp.push(';" class="sl_sensor_select" id="');
        temp.push(GetSelectSensorControlId(sensor.sensorName));
        temp.push('">');
        temp.push(sensor.selected ? _unselectControlStr : _selectControlStr);
        temp.push('</span><span onclick="javascript:OnClickDeleteOneSensor(\'');
        temp.push(sensor.sensorName);
        temp.push('\');" class="sl_sensor_delete">X</span>');
        // meta chanel
        if (sensor.hasMetadata) {
            temp.push('<div class="sl_sensor_meta_panel" id="');
            temp.push(GetMetaPanelId(sensor.sensorName));
            temp.push('">');
            temp.push('<div id="');
            temp.push(GetMetaListId(sensor.sensorName));
            temp.push('"></div>')
            temp.push('<a target="_blank" class="sl_meta_more" id="');
            temp.push(GetMetaMoreId(sensor.sensorName));
            temp.push('"></a>');
            temp.push('</div>');
        }
        //<div>
        // chart panel
        temp.push('<div class="sl_sensor_chart_panel" id="');
        temp.push(GetChartPanelId(sensor.sensorName));
        temp.push('">Loading ...</div>');
        temp.push('</div>');
        parentElement.innerHTML += temp.join('');
        
//        
//        var div_top, div, str;
//        // create the whole sensor item      
//        div_top = document.createElement('div');
//        div_top.className = 'sl_sensor_item';
//        var attribute;
//        
//        // create and set attribute: sensorName
//        attribute = document.createAttribute(_sensorNameStr);
//        attribute.nodeValue = sensor.sensorName;
//        div_top.setAttributeNode(attribute);
//        // create and set attribute: sensorType 
//        attribute = document.createAttribute(_sensorTypeStr);
//        attribute.nodeValue = sensor.sensorType;
//        div_top.setAttributeNode(attribute);
//        // create and set attribute: publisherName
//        attribute = document.createAttribute(_publisherNameStr);
//        attribute.nodeValue = sensor.publisherName;
//        div_top.setAttributeNode(attribute);
//        // create and set attribute: selected
//        attribute = document.createAttribute(_selectedStr);
//        attribute.nodeValue = sensor.selected;
//        div_top.setAttributeNode(attribute);
//        // append the whole sensor item to parent node
//        parentElement.appendChild(div_top);

//        div = document.createElement('span');
//        div.className = 'sl_sensor_name';
//        div.appendChild(document.createTextNode(sensor.sensorDisplayName));
//        div.onclick = OnClickSensorName;
//        div_top.appendChild(div);

//        div = document.createElement('span');
//        div.id = GetSelectSensorControlId(sensor.sensorName);
//        div.className = 'sl_sensor_select';
//        div.onclick = OnClickSelectOneSensor;
//        div.style.color = _colors[sensor.colorIndex];
//        var text = _selectControlStr;
//        if (sensor.selected) {
//            text = _unselectControlStr;
//        }
//        div.appendChild(document.createTextNode(text));
//        div_top.appendChild(div);

//        /*
//        div = document.createElement('div');
//        div.className = 'sl_sensor_detail';
//        div.appendChild(document.createTextNode('detail'));
//        div_top.appendChild(div);

//        div = document.createElement('div');
//        div.className = 'sl_sensor_chart';
//        div.appendChild(document.createTextNode('chart'));
//        div_top.appendChild(div);
//        */
//            
//        div = document.createElement('span');
//        div.className = 'sl_sensor_delete';
//        div.onclick = OnClickDeleteOneSensor;
//        div.appendChild(document.createTextNode('X'));
//        div_top.appendChild(div);

//        div = document.createElement('div');
//        div.id = GetChartPanelId(sensor.sensorName);
//        div.className = 'sl_sensor_chart_panel';
//        div.appendChild(document.createTextNode('Loading ...'));
//        div_top.appendChild(div);

    }
    function GetMetaListId(name) {
        return "SLSensorMetaList" + _seperator + name;
    }
    function MetaExisits(sensor) {
        return (sensor.webServiceUrl.indexOf('http://195.176.244.') == 0);
    }
    function GetMetaMoreId(name) {
        return "SLSensorMetaMore" + _seperator + name;
    }
    function GetMetaPanelId(name) {
        return "SLSensorMetaPanel" + _seperator + name;
    }
    function GetChartPanelId(name) {
        return "SLSensorChartPanel" + _seperator + name;
    }

    function GetSelectSensorControlId(name) {
        return _selectSensorControlIdPre + _seperator + name;
    }
    
    function ListAllSensors(sensorList, parentElement) {
        for (var sensor in sensorList) {
            ListOneSensor(sensorList[sensor], parentElement);
        }
    }

    function AddAndListOneSensor(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName) {
        var sensor = AddOneSensor(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName, _sensorList);
        if (sensor == null) {
            return null;
        }
        var parent = document.getElementById(_sensorListId);
        UnListAllSensors(parent);
        ListAllSensors(_sensorList, parent);
        ShowPanel(_sensorChartsPanelId);
        return sensor;
    }

    function SelectOneSensor(sensorName) {
        if (typeof _sensorList[sensorName] != 'undefined' && !_sensorList[sensorName].selected) {
            // change data structure
            _sensorList[sensorName].selected = true;
            _selectedSensorCount ++;
            
            // change presentation
            var control = document.getElementById(GetSelectSensorControlId(sensorName));
            control.innerHTML = _unselectControlStr;
        }
    }

    function UnselectOneSensor(sensorName) {
        if (typeof _sensorList[sensorName] != 'undefined' && _sensorList[sensorName].selected) {
            // change data structure
            _sensorList[sensorName].selected = false;
            _selectedSensorCount --;
            
            // change presentation
            var control = document.getElementById(GetSelectSensorControlId(sensorName));
            control.innerHTML = _selectControlStr;
        }
    }
    
    function DeleteOneSensor(sensorName) {
        if (typeof _sensorList[sensorName] != 'undefined') {
            UnselectOneSensor(sensorName);
            _sensorCount --;
            delete(_sensorList[sensorName]);
        }
    }
       
    function DeleteAllSensors() {
        _sensorList = new Object();
        _sensorCount = 0;
        _selectedSensorCount = 0;
    }
    
    function UnListAllSensors(parentElement) {
        var numberOfChildNodes = parentElement.childNodes.length;
        for (var i = 0; i < numberOfChildNodes; i ++) {
            parentElement.removeChild(parentElement.childNodes[0]);
        }
        HidePanel(_sensorChartsPanelId);
    }

    function DeleteAndUnlistOneSensor(sensorName) {
        var parent = document.getElementById(_sensorListId);
        DeleteOneSensor(sensorName, parent);
        UnListAllSensors(parent);
        if (_sensorCount > 0) {
            ListAllSensors(_sensorList, parent);
            ShowPanel(_sensorChartsPanelId);
        } else {
            HidePanel(_sensorChartsPanelId);
        }
    }

    //var source2 = 'http://localhost:1668/SenseWeb/ChartData.aspx?uri=http%3A//nelive/datahub/datahub.asmx&sensorName=ES-528D%3A_ME_Stn&sensorType=http%3A//research.microsoft.com/nec/sensor/type/SensorType.owl%23Traffic&publisherName=a59fceb5-1ddc-4250-b745-c7b1eccfe218'
    //var source1 = 'http://localhost/sensormap/ChartData.aspx?uri=http%3A//nelive/datahub/datahub.asmx&sensorName=necomp4%3ATemperature_112_3307&sensorType=http%3A//research.microsoft.com/nec/sensor/type/SensorType.owl%23Thermometer&publisherName=a59fceb5-1ddc-4250-b745-c7b1eccfe218';
    //'<a href=ChartData.aspx?uri=' + escape(uri) + '&sensorName=' + escape(sensorName) + '&sensorType=' + escape(sensorType) + '&publisherName=' + escape(publisherName) + ' target=_newtab>' +
   
    function GetOneSensorSource(sensor) {
        return GetOneSensorSourceByParams(sensor.sensorName, sensor.publisherName, sensor.webServiceUrl);
        return 'ChartData.aspx?publisherName=admin&sensorName=necomp4:Temperature_112_3307&publisherName=admin&sensorName=necomp4:Temperature_112_3303&endTime=8/26/2006%2010:00:31%20PM'
    }

    function GetOneSensorSourceByParams(sensorName, publisherName, webServiceUrl)
    {
        var output = new Array();
        output.push('ChartData.aspx?sensorName=')
        output.push(escape(sensorName));
        output.push('&publisherName=');
        output.push(escape(publisherName));
        output.push('&webServiceUrl=');
        output.push(escape(webServiceUrl));
        if (ChartPanel.timeSetting && ChartPanel.timeSetting.inUse) {
            output.push('&startTime=');
            output.push(escape(dateToMyString(ChartPanel.timeSetting.startTime)));
            output.push('&endTime=');
            output.push(escape(dateToMyString(ChartPanel.timeSetting.endTime)));
            output.push('&interval=');
            output.push(escape(ChartPanel.timeSetting.resolution));
        }
        return output.join('');
    }

    function GetMultiSensorSource(sensorList) {
        var output = new Array();
        output.push('ChartData.aspx?');
        for (var i in sensorList) {
            if (sensorList[i].selected) {
                output.push('sensorName=' + escape(sensorList[i].sensorName) + '&');
                output.push('publisherName=' + escape(sensorList[i].publisherName) + '&');
                output.push('webServiceUrl=' + escape(sensorList[i].webServiceUrl) + '&');
            }
        }
        if (ChartPanel.timeSetting && ChartPanel.timeSetting.inUse) {
            output.push('&startTime=');
            output.push(escape(dateToMyString(ChartPanel.timeSetting.startTime)));
            output.push('&endTime=');
            output.push(escape(dateToMyString(ChartPanel.timeSetting.endTime)));
            output.push('&interval=');
            output.push(escape(ChartPanel.timeSetting.resolution));
        }
        return output.join('');
    }

    function GetAndShowOneSensorDetail(sensor, chartPanel, metaPanel) {
        Chart.DrawLineRT(GetOneSensorSource(sensor), chartPanel, sensor.sensorName, _colors[sensor.colorIndex], 6, _refreshPeriod);
        chartPanel.style.display = 'block';
        GetMeta(sensor);
        if (metaPanel)
            metaPanel.style.display = 'block';
    }

    // get metadata from SwissEx wiki system
    function GetMeta(sensor) {
        if (!sensor.hasMetadata) return;
        var temp = sensor.sensorName.indexOf('@');
        if (temp == -1) return;
        var stationName = sensor.sensorName.substring(0, temp);
        var sensorIndex = sensor.sensorName.substring(temp+1, sensor.sensorName.length);
        SenseWeb.WikiService.GetStationURL(stationName
            , function(result) {
                if (result) {
                    var el = document.getElementById(GetMetaMoreId(sensor.sensorName));
                    el.href = result;
                    el.innerHTML = 'More metadata';
                    document.getElementById(GetMetaPanelId(sensor.sensorName)).style.display = 'block';
                } else {
                    //sensor.hasMetadata = false;
                    var el = document.getElementById(GetMetaMoreId(sensor.sensorName));
                    !el || el.parentNode.removeChild(el);
                    //document.getElementById(GetMetaPanelId(sensor.sensorName)).innerHTML = null;
                }
            }
            , function(){});
        var startTime = null;
        var endTime = null;
        if (ChartPanel.timeSetting && ChartPanel.timeSetting.inUse) {
            startTime = ChartPanel.timeSetting.startTime;
            endTime = ChartPanel.timeSetting.endTime;
        }
//        SenseWeb.WikiService.GetMetadata(stationName, sensorIndex, startTime, endTime
//            , function(result) {
//                if (result != null) {
//                    var temp = [];
//                    temp.push('<table width="100%" border="0">');
//                    temp.push('<colgroup width="200px">');
//                    temp.push('</colgroup>');
//                    //temp.push('<tr bgcolor="#FFFFFF"><td>Time</td><td>Action</td></tr>');
//                    for (var index in result) {
//                        temp.push('<tr>');
//                        temp.push('<td>');
//                        temp.push(result[index].ActionTime);
//                        temp.push('</td>');
//                        temp.push('<td>');
//                        temp.push(result[index].ActionName);
//                        temp.push('</td>');
//                        temp.push('</tr>');
//                    }
//                    temp.push('</table>');
//                    var el = document.getElementById(GetMetaListId(sensor.sensorName));
//                    if(el != null && el != 'null') el.innerHTML = temp.join('');
//                } else {
//                    var el = document.getElementById(GetMetaListId(sensor.sensorName));
//                    !el || el.parentNode.removeChild(el);
//                }
//            }
//            , function(){});
        SenseWeb.WikiService.GetSensorMetadata(stationName, sensorIndex, startTime, endTime
            , function(result) {
                if (result != null) {
                    var temp = [];
                    temp.push('<table width="100%" border="0">');
                    temp.push('<colgroup width="120px">');
                    temp.push('</colgroup>');
                    temp.push('<tr><td><b>Sensor Action</b></td><td><b>Detail</b></td></tr>');
                    //temp.push('<tr bgcolor="#FFFFFF"><td>Time</td><td>Action</td></tr>');
                    for (var index in result) {
                        temp.push('<tr>');
                        temp.push('<td>');
                        temp.push(result[index].ActionName);
                        temp.push('</td>');
                        temp.push('<td>');
                        temp.push(result[index].AddInfo);
                        temp.push('</td>');
                        temp.push('</tr>');
                    }
                    temp.push('</table>');
                    var el = document.getElementById(GetMetaListId(sensor.sensorName));
                    if(el != null && el != 'null')el.innerHTML += temp.join('');
                } else {
                    var el = document.getElementById(GetMetaListId(sensor.sensorName));
                    !el || el.parentNode.removeChild(el);
                }
            }
            , function(){});
        SenseWeb.WikiService.GetStationMetadata(stationName, startTime, endTime
            , function(result) {
                if (result != null) {
                    var temp = [];
                    temp.push('<table width="100%" border="0">');
                    temp.push('<colgroup width="120px">');
                    temp.push('</colgroup>');
                    temp.push('<tr><td><b>Station Action</b></td><td><b>Detail</b></td></tr>');
                    //temp.push('<tr bgcolor="#FFFFFF"><td>Time</td><td>Action</td></tr>');
                    for (var index in result) {
                        temp.push('<tr>');
                        temp.push('<td>');
                        temp.push(result[index].ActionName);
                        temp.push('</td>');
                        temp.push('<td>');
                        temp.push(result[index].AddInfo);
                        temp.push('</td>');
                        temp.push('</tr>');
                    }
                    temp.push('</table>');
                    var el = document.getElementById(GetMetaListId(sensor.sensorName));
                    if(el != null && el != 'null')el.innerHTML += temp.join('');
                } else {
                    var el = document.getElementById(GetMetaListId(sensor.sensorName));
                    !el || el.parentNode.removeChild(el);
                }
            }
            , function(){});
    }

    // draw one chart with mutiple lines for selected sensors
    function DrawSelectedSensors(sensorList, panel) {
        var settingStr = '';
        var types = new Array();
        var tempType;
        for (var i in sensorList) 
        {
            if (sensorList[i].selected) {
                if (tempType == null)
                    tempType = sensorList[i].sensorType;
                settingStr += Chart.GetGraphSettingStr(sensorList[i].sensorName
                        , _colors[sensorList[i].colorIndex]
                        , 0
                        , tempType == sensorList[i].sensorType ? 'left' : 'right');
            }
        }
        if (settingStr != '') {
            settingStr = Chart.GetGraphsSettingStr(settingStr);
            Chart.Draw(panel, GetMultiSensorSource(sensorList), settingStr);
        }
    }
        
    /*********
     * events
     *********/       

    function OnClickSelectOneSensor(sensorName) {
        var selected = _sensorList[sensorName].selected;
        if (selected) {
            UnselectOneSensor(sensorName);
            if (_selectedSensorCount == 0) {
                ClearPanel(_multiLineChartPanelId);
                HidePanel(_multiLineChartPanelId);
                HidePanel(_multiLineChartPanelReloaderId);
                return;
            }
        } else {
            SelectOneSensor(sensorName);
        }
        ShowPanel(_multiLineChartPanelId);
        ShowPanel(_multiLineChartPanelReloaderId);
        DrawSelectedSensors(_sensorList, document.getElementById(_multiLineChartPanelId));
    }
    
    function OnClickSensorName(sensorName) {
        var sensor = _sensorList[sensorName];
        var chartPanel = document.getElementById(GetChartPanelId(sensorName));
        var metaPanel = document.getElementById(GetMetaPanelId(sensorName));
        if (chartPanel.style.display == 'block') {
            chartPanel.style.display = 'none';
            if (metaPanel)
                metaPanel.style.display = 'none';
        } else {
            GetAndShowOneSensorDetail(sensor, chartPanel, metaPanel);
        }
        //ToggleOneSensorDetail(sensor, chartPanel, metaPanel);
    }

    function OnClickDeleteOneSensor(sensorName) {
        DeleteAndUnlistOneSensor(sensorName);
        DrawSelectedSensors(_sensorList, document.getElementById(_multiLineChartPanelId));
    }
    
    /********
     * apps
     ********/

    function OnClickSensorCharts() {
        ShowPanel(_sensorChartsPanelId);
    }
    
    function OnClickHistoricChart(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName) {
        if (smMap.GetMapMode() != VEMapMode.Mode3D) {
            var sensor = AddAndListOneSensor(webServiceUrl, sensorName, sensorDisplayName, sensorType, publisherName);
            if (sensor != null) {
                var chartPanel = document.getElementById(GetChartPanelId(sensor.sensorName));
                var metaPanel = document.getElementById(GetMetaPanelId(sensor.sensorName));
                GetAndShowOneSensorDetail(sensor, chartPanel, metaPanel);
                ShowPanel(_multiLineChartPanelId);
                ShowPanel(_multiLineChartPanelReloaderId);
                DrawSelectedSensors(_sensorList, document.getElementById(_multiLineChartPanelId));
            }
        } else {
            alert('Charting is not supported under 3D mode.');
        }
    }

    function OnClickMultiSensorsInOneChart() {
        ShowPanel(_multiLineChartPanelId);     
        ShowPanel(_multiLineChartPanelReloaderId); 
        DrawSelectedSensors(_sensorList, document.getElementById(_multiLineChartPanelId));
    }
    
    var ChartPanel = {
        timeSetting: null
        , init: function(timeSetting) {
            ChartPanel.timeSetting = timeSetting;
        }
        , onTimeChange: function() {
            if (document.getElementById(_sensorChartsPanelId).style.display != 'none')
                OnClickMultiSensorsInOneChart();
        }
    }
    
    addEventsForDwnCtrl = function(){
        var downloadCtrlTxt = $('downloadTxt');
        var downloadCtrlXls = $('downloadXls');
        var downloadChart = $('downloadChart');
        if(document.all != null){
            downloadCtrlTxt.attachEvent ("onclick",function(){openDownLoadWindow('txt')});
            downloadCtrlXls.attachEvent("onclick",function(){openDownLoadWindow('xls')});
        }
        else{
            downloadCtrlTxt.addEventListener("click",function(){openDownLoadWindow('txt')},false);
            downloadCtrlXls.addEventListener("click",function(){openDownLoadWindow('xls')},false);
        } 
    }
    
    openDownLoadWindow = function(type){
        //url for the data
        var loc = window.location.href;
        loc = loc.substr(0,loc.lastIndexOf('/'))+ '/chart/chartrawdata.aspx?';
        //querystring construction
        var queryString = 'type='+ type +'&';
        if(_sensorList != null){
             for (var i in _sensorList) {
                queryString += 'publisherName=' + _sensorList[i].publisherName + '&sensorname='+_sensorList[i].sensorName +'&webserviceurl='+ _sensorList[i].webServiceUrl+'&';     
             }
        }
        window.location.href=loc + queryString;
    }
    
    window.onload = addEventsForDwnCtrl;