/**********************************************************************
 *
 * $Id: fushinsya.js,v 2.0 2009/10/31 $
 *
 * 画像受信テストアプリケーション用Javascript
 * 
 * Copyright (C) 2009 （株）富士情報技術センター
 **********************************************************************/

    var map;               // GMapオブジェクト
    var nl;                // Now Loadingオブジェクト
    var request;           // GXmlHttpオブジェクト
    var icon;              // GIconオブジェクト
	var come_flg;		  //20100921

	var date = new Date();
	var ad_now = date.getFullYear();	//現在年（西暦）
	var ad_start = 2005;	//スタート年（西暦）

    ////
    // Now loading オブジェクト
    //
    // @author     Toshirou Takahashi http://jsgt.org/mt/archives/01/000539.html
    // @version    0.03
    // @license    著作権表示義務無し。商用利用、改造、自由。連絡不要。
    // @sample     oj = new jsgt_jsgt_nowLoading()           //DIVを自動生成する場合
    // @sample     oj = new jsgt_nowLoading('nloading') //DIV名で指定する場合
    // @param  id  jsgt_nowLoading用DIVのID名(デフォルト_jsgt_nowLoading)
    // @return     now loadingオブジェクトのインスタンス
    // @UPDATE     2005.10.25 id="_jsgt_nowLoading"+nのnを追加
    // 
    //
    function jsgt_nowLoading(id){
  
      if(!id){
        id = "_jsgt_nowLoading";
        id += (isNaN(jsgt_nowLoading.count))?jsgt_nowLoading.count=0:++jsgt_nowLoading.count;
        var crenlDIV = document.createElement("DIV");
        this.nlDIV = document.body.appendChild(crenlDIV);
        this.nlDIV.setAttribute("id",id);
      } else {
        this.nlDIV = getRawObject(id);
      }
  
      //表示 　リクエスト発行時に動作させてください
      //@param html 表示するメッセージ(デフォルト now loading... )
      this.showNL = function (html){
         this.nlDIV.style.display = "block";
         this.nlDIV.style.zIndex = "201";
         var html=(html)?html:" now loading... ";
         this.nlDIV.innerHTML = "  "+html+"   ";
      } 
  
      //消去 　コールバック処理時に動作させてください
      this.hideNL = function (){
         this.nlDIV.innerHTML = "";
         this.nlDIV.style.display = "none";
      } 
  
    }

    //*************************************
    /// 日付整理
    //**************************************

function dateFormat(hiduke) {
	//日付変換
	var oldStr = hiduke;
	var newStr = oldStr.replace(/-/g, '/');
	var youbiTbl = new Array('日','月','火','水','木','金','土');

	//文字列からミリ秒を取得
	var time = Date.parse(newStr);

	//ミリ秒から日付を求める
	var date = new Date();
	date.setTime(time);

	seireki = date.getFullYear();
	tsuki = date.getMonth() + 1;
	nichi = date.getDate();
	y = date.getDay();
	youbi = youbiTbl[y]
	ji = date.getHours();
	pun = date.getMinutes();
	if(pun < 10) { pun = "0" + pun; }

	return seireki + "年" + tsuki + "月" + nichi + "日" + "(" + youbi + ")" + " " + ji + ":" + pun;

}

    //*************************************
    /// 吹き出しの中身を作成
    //**************************************

	// 熊用
	// 不審者用
    function incidentInfoHtml(hiduke, location, lead, id) {

	jikan = dateFormat(hiduke);

	if (lead) {
		if (lead.length == 29) {
			lead = lead + "・・・";
		}
	}

      return "<div class='info_l'>" + 
               "<p class='name'>" + jikan + "</p>" +
               "<p class='addr'>場所: " + location + "</p>" +
               "<p class='lead'>" + lead + "</p>" +
               "<p class='detail'><a href='info.php?id=" + id + "' target='_blank'>" + "詳細を見る" + "</a></p>" +
             "</div>";
    }

    //*************************************
    // マーカーを作成
    //*************************************
    function createMarker(point, html,name) { //20100921 name add
		//20100921 chg
//    	var marker = new GMarker(point,  icon);
		// GMarkerオブジェクトを作成
		if ( name=="" || come_flg==false) {
			var marker = new GMarker(point,  icon);
		} else {
			name = valuechg(name,25);

			var marker = new LabeledMarker(point,{
				icon: icon,
				clickable: true,
				labelOffset: new GSize(14, -33),
				labelText: name
			});
		}
		//20100921 chg
      // イベントリスナーを設定
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });

      return marker;
    }

    //*************************************
    // 情報をHTMLで記述
    //マーカークリック時に表示される詳細情報  20100921
    //**************************************
    function createlblckHtml() {
        return "<input type=\"checkbox\" name=\"come\" value=\"4\" id=\"come_lbl\" onClick=\"show_come()\" checked>" + 
						"<label for='come_lbl'>アイコンのラベルを表示する場合はチェック</label>";
    }

//*************************************
//■コメントの表示・非表示切替 20100921
//*************************************
function show_come() {
	//チェック＝非表示
	if ( document.forms["f_fushinsya"].elements["come"].checked ) {
		come_flg = true;
	} else {
		come_flg = false;	
	}
	search();
}

//*************************************
/**
* 文字列のバイト数を取得する。
* 全角を2バイト、半角を1バイトとしてカウントします。
* @param バイトを取得する値
* @return 取得したバイト数
*/
//*************************************
function valuechg(value,cnt) {
	var count = 0;
	var chgval = "";
	
	if (value == null || value =="" ) {
		return chgval;
	}
	
	for ( var i = 0; i < value.length; ++i )
	{
		if ( count >= cnt)
		{
			chgval = chgval + "...";
			break;
		} 
		else
		{
			var sub = value.substring(i, i + 1);
			//全角の場合２バイト追加。
			if( checkIsZenkaku(sub) )
			{
			  count += 2;
			}
			else
			{
			  count += 1;
			}
			chgval = chgval + sub;

			
		}
	}

	return chgval;
}

//*************************************
/**
 * 全角であるかをチェックします。
 * 
 * @param チェックする値
 * @return ture : 全角 / flase : 全角以外
 */
 //*************************************
function checkIsZenkaku(value) {

	for (var i = 0; i < value.length; ++i)
	{
		var c = value.charCodeAt(i);
		//  半角カタカナは不許可
		if (c < 256 || (c >= 0xff61 && c <= 0xff9f)) 
		{
			return false;
		}
	}
	return true;
}

    //*************************************
    // アイコンを作成
    //*************************************
    function createIcon() {
      var icon = new GIcon();
      icon.image = "icon/i_fushinsya.png";
      icon.iconSize = new GSize(32, 37);
      icon.iconAnchor = new GPoint(15,40);
      icon.infoWindowAnchor = new GPoint(15,40);

      return icon;
    }

//*************************************
// bodyのonloadイベントで実行される関数
//*************************************
function load() {
			// ブラウザーが対応しているかどうかチェック
      if (GBrowserIsCompatible()) {
	initDHTMLAPI();

        // id="map"のDIV要素内にGMap2オブジェクトを生成
        map = new GMap2(getRawObject("map"));
		//コメントの表示 
		//20100921
		come_flg = true;

        // setCenterメソッドを実行して、中心を富士宮に合わせる

        // GLatLngは緯度(Longitude)経度(Latitude)を表すクラス

        // 2つ目の引数はズームレベル(大=詳細、小=広域)
        map.setCenter(new GLatLng(defaultLat, defaultLon), defaultZoomLevel);

        // マップタイプ(普通の地図か衛星画像か両方か)を
        // 選択するコントロール
//      map.addControl(new GMapTypeControl());

        // ズームやパンをするコントロール
        map.addControl(new GLargeMapControl());

        // 一覧からズームするためのカスタムコントロール
        map.addControl(new ListZoomControl());

        // 右下に縮小地図を表示する
//      map.addControl(new GOverviewMapControl());

	//マウスホイールのイベントを追加
	map.enableScrollWheelZoom();

        //Now Loading インスタンス生成
        nl = new jsgt_nowLoading("nowloading");

        //XMLHttpRequestによる読込み
        request = GXmlHttp.create();

        // xmlを読み込む
	//すべての年をチェック
	/*var ar = new Array();  
	diff_ad = ad_now - ad_start;
	for (i=0; i<=diff_ad; i++) {
		ar[i] = ad_now - i;
	}
	qs = "?y=" + ar.join(",");*/
	//今年だけチェック
	qs = "?y=" + ad_now;
	url = "xmlfushinsya.php" + qs;

        // マーカー作成xml
	request.open("GET", url, true);

        //コールバック関数
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            //alert(request.responseText);

            var res = request.responseXML;
            var xmlDoc = res.documentElement;
            var markers = xmlDoc.getElementsByTagName("marker");

	    //一覧パネル
            var lp = document.getElementById("listpanel");
	    //検索パネル
            var sp = getRawObject("searchpanel");

		var lbl_showflg = document.getElementById("lbl_showflg");　//20100921

             for (var i = 0; i < markers.length; i++) {

              // XMLから属性を読み取る
              var id = markers[i].getAttribute("id");
              var location = markers[i].getAttribute("location");
              var url = markers[i].getAttribute("url");
              var lon = parseFloat(markers[i].getAttribute("lon"));
              var lat = parseFloat(markers[i].getAttribute("lat"));
              var date_time = markers[i].getAttribute("date_time");
              var incident_description = markers[i].getAttribute("incident_description");
              var d_suspect_gender_id = markers[i].getAttribute("d_suspect_gender_id");
              var d_suspect_age_id = markers[i].getAttribute("d_suspect_age_id");
              var d_suspect_height_id = markers[i].getAttribute("d_suspect_height_idu");
              var d_suspect_build_id = markers[i].getAttribute("d_suspect_build_id");
              var d_suspect_hair_color_id = markers[i].getAttribute("d_suspect_hair_color_id");
              var d_suspect_hair_style_id = markers[i].getAttribute("d_suspect_hair_style_id");
              var d_suspect_cloth_top_style_id = markers[i].getAttribute("d_suspect_cloth_top_style_id");
              var d_suspect_cloth_top_color_id = markers[i].getAttribute("d_suspect_cloth_top_color_id");
              var d_suspect_cloth_bottom_style_id = markers[i].getAttribute("d_suspect_cloth_bottom_style_id");
              var d_suspect_cloth_bottom_color_id = markers[i].getAttribute("d_suspect_cloth_bottom_color_id");
              var d_suspect_glasses_id = markers[i].getAttribute("d_suspect_glasses_id");
              var suspect_other_characteristics = markers[i].getAttribute("suspect_other_characteristics");
              var d_victim_gender_id = markers[i].getAttribute("d_victim_gender_id");
              var d_victim_age_id = markers[i].getAttribute("d_victim_age_id");
	      var lead = markers[i].getAttribute("lead");
	      var hiduke = markers[i].getAttribute("hiduke");
              var new_flg = markers[i].getAttribute("new_flg");

	        // アイコンを作成
	        // GoogleMapsのデフォルトのアイコンを
	        // 使用する場合はコメントアウト
	        icon = createIcon();

              // GPointオブジェクトを作成
              var point = new GPoint(lon,lat);

              // htmlを作成
              var html = incidentInfoHtml(hiduke, location, lead, id);

			// マーカーを作成
			//20100921 chg
			//var marker = createMarker(point, html);
			var marker = createMarker(point, html, dateFormat(hiduke));

              html = html.replace(/'/g, "\\'");

		//時間整理
		jikan = dateFormat(hiduke);

	      //NEWマーク
	      if (new_flg == "t") {
		var new_mark = "<img src='../../img/new_icon.gif' border='0' style='margin-top: 1px;'><br />";
	      } else {
		var new_mark = "";
	      }

              //一覧に追加
              lp.innerHTML = lp.innerHTML +
                             "<li><a class=\"list\" " +
                             "     href=\"javascript:" +
                             "  map.panTo(" +
                             "    new GLatLng(" + lat + ", " +  lon + "));" +
                             "  map.openInfoWindowHtml(" +
                             "    new GLatLng(" + lat + ", " +  lon + "), '" +    html + "');" +
                             "\" title='周辺を表示'>" + new_mark + 
                             jikan + "<br />" + location + "</a></li>";

              // 地図に追加
              map.addOverlay(marker);

            }

　　　　　　　// 検索用
              sp.innerHTML = fujinomiya_searchHtml();
              
              //20100921 ラベル
		lbl_showflg.innerHTML = createlblckHtml();              

              // Now Loadingを消去
	      nl.hideNL();
          }//if
        }//if

        // Now Loadingを表示
        if((typeof nl)=='object'){
          nl.showNL('データを読み込み中...'); 
        }

        //送信
        request.send(null);
      }

}

    //*************************************
    // 情報をHTMLで記述
    //マーカークリック時に表示される詳細情報
   //**************************************
    function fujinomiya_searchHtml() {

	diff_ad = ad_now - ad_start;
	ng_now = ad_now - 1988;	//現在年（平成）

	cb = "";
	year = "";
	nengou = "";

	for (i=0; i<=diff_ad; i++) {
		year = ad_now - i;
		nengou = ng_now - i;
		cb +=
			/* すべてチェック　*/
			/*"<input type=\"checkbox\" name=\"options\" value=\"" + year + "\" checked=\"checked\"" +
			" />" + year + 
			"年／平成" + nengou + "年";*/
			/*　今年だけチェック　*/
			"<input type=\"checkbox\" name=\"options\" value=\"" + year + "\"";
			if (i==0) {
				cb += " checked=\"checked\"";
			}
			cb += " />" + year + "年／平成" + nengou + "年";
		if (year > ad_start) {
			cb += "<br />";
		}
	}

      return "<table class=\"formTABLE\">" + 

								"	<tr>" + 
								"	  <th class=\"fieldCaptionTH\">" + 
								"	      年度" + 
								"	  </th>" + 
								"	  <td class=\"dataTD\">" + cb + 
								"	  </td>" + 
								"	</tr>" + 
								"	<tr>" + 
								"	  <td class=\"buttonTD\" colspan=\"2\">" + 
								"	  	<button type=\"button\"" + 
								"	                onmouseover=\"this.style.color='green'\"" + 
								"	                onmouseout=\"this.style.color='black'\"" + 
								"									onclick=\"search()\" title=\"情報を絞り込みます。\">" + 
								"							絞込み" + 
								"	  	</button>" + 
								/*"	  	<button type=\"button\"" + 
								"	                onmouseover=\"this.style.color='green'\"" + 
								"	                onmouseout=\"this.style.color='black'\"" + 
								"									onclick=\"serchclear()\" title=\"検索条件をクリアします\">" + 
								"							クリア" + 
								"	  	</button>" + */
								"    </td>" + 
								"	</tr>" + 
								"  </table>";

    }


    //*************************************
    //検索処理
    //*************************************
    function search() {

        //XMLHttpRequestによる読込み
        var request = GXmlHttp.create();

	arr = new Array();
	  for (i=0; i<document.f_fushinsya.length-1; i++){
	    if (document.f_fushinsya.elements[i].checked == true){
	      	value = ad_now - i; 
                arr.push(value);
	    }
	  }

	qs = '?y=' + arr.join(",");
	url = "xmlfushinsya.php" + qs;

        request.open("GET", url, true);
     
        //コールバック関数
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
		//alert(request.responseTEXT);

		var res = request.responseXML;
		var xmlDoc = res.documentElement;

		// 検索結果をリセット
		var lp = document.getElementById("listpanel");
		lp.innerHTML = "";
          	map.clearOverlays();

		var markers = xmlDoc.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {

			// XMLから属性を読み取る
	              var id = markers[i].getAttribute("id");
	              var location = markers[i].getAttribute("location");
	              var url = markers[i].getAttribute("url");
	              var lon = parseFloat(markers[i].getAttribute("lon"));
	              var lat = parseFloat(markers[i].getAttribute("lat"));
	              var date_time = markers[i].getAttribute("date_time");
	              var incident_description = markers[i].getAttribute("incident_description");
	              var d_suspect_gender_id = markers[i].getAttribute("d_suspect_gender_id");
	              var d_suspect_age_id = markers[i].getAttribute("d_suspect_age_id");
	              var d_suspect_height_id = markers[i].getAttribute("d_suspect_height_idu");
	              var d_suspect_build_id = markers[i].getAttribute("d_suspect_build_id");
	              var d_suspect_hair_color_id = markers[i].getAttribute("d_suspect_hair_color_id");
	              var d_suspect_hair_style_id = markers[i].getAttribute("d_suspect_hair_style_id");
	              var d_suspect_cloth_top_style_id = markers[i].getAttribute("d_suspect_cloth_top_style_id");
	              var d_suspect_cloth_top_color_id = markers[i].getAttribute("d_suspect_cloth_top_color_id");
	              var d_suspect_cloth_bottom_style_id = markers[i].getAttribute("d_suspect_cloth_bottom_style_id");
	              var d_suspect_cloth_bottom_color_id = markers[i].getAttribute("d_suspect_cloth_bottom_color_id");
	              var d_suspect_glasses_id = markers[i].getAttribute("d_suspect_glasses_id");
	              var suspect_other_characteristics = markers[i].getAttribute("suspect_other_characteristics");
	              var d_victim_gender_id = markers[i].getAttribute("d_victim_gender_id");
	              var d_victim_age_id = markers[i].getAttribute("d_victim_age_id");
		      var lead = markers[i].getAttribute("lead");
		      var hiduke = markers[i].getAttribute("hiduke");
	              var new_flg = markers[i].getAttribute("new_flg");

		        // アイコンを作成
		        // GoogleMapsのデフォルトのアイコンを
		        // 使用する場合はコメントアウト
		        icon = createIcon();

                        // GPointオブジェクトを作成
                        var point = new GPoint(lon, lat);

                        // htmlを作成
                        var html = incidentInfoHtml(hiduke, location, lead, id);

                        // マーカーを作成
			//20100921 chg
			//var marker = createMarker(point, html);
                        var marker = createMarker(point, html, dateFormat(hiduke));

                        html = html.replace(/'/g, "\\'");

			//時間整理
			jikan = dateFormat(hiduke);

		      //NEWマーク
		      if (new_flg == "t") {
			var new_mark = "<img src='../../img/new_icon.gif' border='0' style='margin-top: 1px;'> ";
		      } else {
			var new_mark = "";
		      }

                        //一覧に追加
              		lp.innerHTML = lp.innerHTML +
                             "<li><a class=\"list\" " +
                             "     href=\"javascript:" +
                             "  map.panTo(" +
                             "    new GLatLng(" + lat + ", " +  lon + "));" +
                             "  map.openInfoWindowHtml(" +
                             "    new GLatLng(" + lat + ", " +  lon + "), '" +    html + "');" +
                             "\" title='周辺を表示'>" + new_mark + 
                             jikan + "<br />" + location + "</a></li>";
  
                        // 地図に追加
                        map.addOverlay(marker);
                    }

	          // Now Loadingを消去
	          nl.hideNL();
	          nl.nlDIV.style.width ="0px";
	          nl.nlDIV.style.height ="0px";
                }
            }

      //送信
      request.send(null);

      // Now Loadingを表示
      if((typeof nl)=='object'){
        nl.nlDIV.style.width ='180px';
        nl.nlDIV.style.height ='20px';
        nl.showNL('検索しています...') ;
      }
  }


//************************************* 
//地区一覧表示
//*************************************
function showAreaList() {
     // xmlを読み込む
     request.open("GET", "../../xml/area-fujinomiya.xml", true);

     //コールバック関数
     request.onreadystatechange = function() {
     if (request.readyState == 4) {
       var res = request.responseXML;
       var xmlDoc = res.documentElement;

       var areas = xmlDoc.getElementsByTagName("area");
       var areaList = "";
       var html = "";
       var prevIndex = "";

       var li = new Array();

       for (var i = 0; i < areas.length; i++) {

        // XMLから属性を読み取る
        var name = areas[i].getAttribute("name");
        var lon = parseFloat(areas[i].getAttribute("lon"));
        var lat = parseFloat(areas[i].getAttribute("lat"));
        var index = areas[i].getAttribute("index");

        if (prevIndex != index) {
          li.push("<div class=\"area_index\">" + index + "</div>");
        }

        prevIndex = index;

        li.push("<div class=\"area_name\"><a href=\"javascript:" +
                "  map.panTo(" +
                "    new GLatLng(" + lat + ", " +
                                     lon + "));" +
                "  closeChildWindow();" +
                "\" title=\"周辺を表示\">" + name + "</a>" +
                "</div>");
      }

      var maxrows = 18;
      html = '<div style="float: left; width: 100px;">';
      for (var i = 0; i < li.length; i++) {
        if (i != 0 && i % maxrows == 0) // 列換え
          html += '</div><div style="float: left; width: 100px;">';

        html += li[i];
      }
      html += '</div>';

      showChildWindow(100, 50, 700, 450, html);

      // Now Loadingを消去
      nl.hideNL();
    }
  }

  // Now Loadingを表示
  if((typeof nl)=='object'){
    nl.showNL(); 
  }

  //送信
  request.send(null);
}

//************************************* 
//地区一覧表示
//*************************************
function showSchoolList() {
  // xmlを読み込む
  request.open("GET", "../../xml/school-fujinomiya.xml", true);

  //コールバック関数
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var res = request.responseXML;
      var xmlDoc = res.documentElement;

      var schools = xmlDoc.getElementsByTagName("school");
      var elementarySchoolList = "";
      var juniorHighSchoolList = "";
      var highSchoolList = "";

      for (var i = 0; i < schools.length; i++) {

        // XMLから属性を読み取る
        var name = schools[i].getAttribute("name");
        var lon = parseFloat(schools[i].getAttribute("lon"));
        var lat = parseFloat(schools[i].getAttribute("lat"));
        var type = schools[i].getAttribute("type");

        var li = "<div class=\"school_name\"><a href=\"javascript:" +
                "  map.panTo(" +
                "    new GLatLng(" + lat + ", " +
                                     lon + "));" +
                "  closeChildWindow();" +
                "\" title=\"周辺を表示\">" + name + "</a>" +
                "</div>";

        if (type == "elementarySchool")
          elementarySchoolList += li;
        else if (type == "juniorHighSchool")
          juniorHighSchoolList += li;
        else if (type == "highSchool")
          highSchoolList += li;
      }

      index = '<div style="float: left; width: 180px;">' +
                 '  <div class="school_index">小学校</div>' +
                   elementarySchoolList + '</div>' +
		'<div style="float: left; width: 160px;">' +
                 '  <div class="school_index">中学校</div>' +
                   juniorHighSchoolList + '</div>' +
		'<div style="float: left; width: 150px;">' +
                 '  <div class="school_index">高校</div>' +
                   highSchoolList + '</div>';

      showChildWindow(100, 50, 600, 600, index);

      // Now Loadingを消去
      nl.hideNL();
    }
  }

  // Now Loadingを表示
  if((typeof nl)=='object'){
    nl.showNL(); 

  //送信
  request.send(null);
  }
}



// A ListZoomControl is a GControl that displays a school-list button
// and a area-list button
function ListZoomControl() {
}

ListZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
ListZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var areaZoomDiv = document.createElement("div");
  areaZoomDiv.setAttribute("title", "地区名を選択して周辺を表示");
  this.setButtonStyle_(areaZoomDiv);
  container.appendChild(areaZoomDiv);
  areaZoomDiv.appendChild(document.createTextNode("地区一覧"));
  GEvent.addDomListener(areaZoomDiv, "click", showAreaList);

  var schoolZoomDiv = document.createElement("div");
  schoolZoomDiv.setAttribute("title", "学校名を選択して周辺を表示");
  this.setButtonStyle_(schoolZoomDiv);
  container.appendChild(schoolZoomDiv);
  schoolZoomDiv.appendChild(document.createTextNode("学校一覧"));
  GEvent.addDomListener(schoolZoomDiv, "click", showSchoolList);

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
ListZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
ListZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.color = "#333366";
  button.style.backgroundColor = "white";
  button.style.border = "2px outset #336666";
  button.style.padding = "3px 1em 3px 1em";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
//  button.style.width = "6em";
  button.style.cursor = "pointer";
//  button.style.fontSize = "75%";
}

