OSDN Git Service

rec10webg3 test.
[rec10/rec10-git.git] / Rec10WEBG3 / trunk / rec10webg3.htm
index 8f4d9bb..242dc1a 100644 (file)
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
-<html dir="ltr">\r
-    <head>\r
-       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
-        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">\r
-               <!--<link rel="stylesheet" type="text/css" href="./dojo-release-1.5.0/dijit/themes/claro/claro.css">-->\r
-        <style type="text/css">\r
-            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }\r
-        </style>\r
-        <style type="text/css">\r
-            html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }\r
-            #borderContainerTwo { width: 100%; height: 100%; }\r
-        </style>\r
-               <title>Rec10Suite 0.0.1</title>\r
-               <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>\r
-               <!--<script src="./dojo-release-1.5.0/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>-->\r
-               <script type="text/javascript">\r
-               dojo.require("dijit.layout.ContentPane");\r
-               dojo.require("dijit.layout.TabContainer");\r
-               dojo.require("dijit.layout.AccordionContainer");\r
-                       dojo.require("dijit.layout.BorderContainer");\r
-                       dojo.require("dojo.data.ItemFileReadStore");\r
-                       dojo.require("dijit.form.FilteringSelect");\r
-                       dojo.require("dijit.form.DateTextBox");\r
-                       dojo.require("dijit.form.TimeTextBox");\r
-                       dojo.require("dijit.form.HorizontalSlider");\r
-                       dojo.require("dijit.form.HorizontalRuleLabels");\r
-                       dojo.require("dojo.date");\r
-                       dojo.require("dojo.date.locale");\r
-                       function readCh(){\r
-                               var chlistPaneTE=dojo.byId("progTableTE");\r
-                               var chlistPaneBS=dojo.byId("progTableBS");\r
-                               var chlistPaneCS=dojo.byId("progTableCS");\r
-                               dojo.xhrGet({\r
-                                       url:"chlist.json",\r
-                                       handleAs: "json",\r
-                                       load: function(data,ioargs){\r
-                                               //console.log("res=", data['items']);\r
-                                               for (i=0;i<data['items'].length;i++){\r
-                                                       var node = document.createElement("div");\r
-                                                       var child = new dijit.form.ToggleButton\r
-                                                               ( {id: data['items'][i]["name"], \r
-                                                               label: data['items'][i]["label"],\r
-                                                               iconClass: "dijitCheckBoxIcon" },node );\r
-                                                       if (data['items'][i]['type']=="bs"){\r
-                                                               chlistPaneBS.appendChild(child.domNode);\r
-                                                       }else if (data['items'][i]['type']=="cs"){\r
-                                                               chlistPaneCS.appendChild(child.domNode);\r
-                                                       }else {\r
-                                                               chlistPaneTE.appendChild(child.domNode);\r
-                                                       }\r
-                                               }; \r
-                                       },\r
-                                       error: function(error,args) {\r
-                                         console.warn("error!",error);\r
-                                       }\r
-                               });\r
-                       };\r
-                       function changeTab(tabid){\r
-                               dijit.byId("main_tab").selectChild(dijit.byId(tabid));\r
-                       }\r
-                       function setFilteringSelectValue(dijitid){\r
-                               console.warn("test");\r
-                               dijit.byId(dijitid).set('value',dijit.byId(dijitid).store._arrayOfAllItems[0]['id']);\r
-                       }\r
-                       function DateTime2dt(ttime){\r
-                               var tt=new Date(parseInt(ttime.substring(0,4)),parseInt(ttime.substring(5,7)),parseInt(ttime.substring(8,10)),parseInt(ttime.substring(11,13)),parseInt(ttime.substring(14,16),0));\r
-                               return tt\r
-                       }\r
-                       function dt2DateTime(tt){\r
-                               function get2(t){\r
-                                       if (t<10){\r
-                                               return "0"+t\r
-                                       }else{\r
-                                               return t\r
-                                       }\r
-                               }\r
-                               var month=parseInt(tt.getMonth());\r
-                               return tt.getFullYear()+"-"+get2(month)+"-"+get2(tt.getDate())+"T"+get2(tt.getHours())+":"+get2(tt.getMinutes())+":"+get2(tt.getSeconds());\r
-                       }\r
-                       function calcMaxHeight(parentid,chlists,bt,et,fontsize){\r
-                               var maxH=0;\r
-                               var tempH=0;\r
-                               for (ch in chlists){\r
-                                       var chnode=dojo.doc.createElement("div");\r
-                                       chnode.setAttribute("style","width:100%;");\r
-                                       //chnode.setAttribute("id",data['items'][i]['id']);\r
-                                       dojo.xhrGet({\r
-                                               url:"timetable.json",\r
-                                               handleAs: "json",\r
-                                               sync: true,\r
-                                               load: function(data,ioargs){\r
-                                                       var baseForm=dojo.byId(parentid);\r
-                                                       for (i=0;i<data['items'].length;i++){\r
-                                                               var node = dojo.doc.createElement("div");\r
-                                                               node.setAttribute("style","border:3px solid #CCC;width:100%;");\r
-                                                               node.setAttribute("id",data['items'][i]['id']);\r
-                                                               var nodetitle = dojo.doc.createElement("h5");\r
-                                                               var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);\r
-                                                               var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);\r
-                                                               nodetitle.appendChild(node_str);\r
-                                                               node.appendChild(nodetitle);\r
-                                                               node.appendChild(node_str_desc);\r
-                                                               baseForm.appendChild(node);\r
-                                                               tempH=tempH+node.clientHeight;\r
-                                                               if (maxH<tempH){\r
-                                                                       maxH=tempH;\r
-                                                               }\r
-                                                               baseForm.removeChild(node);\r
-                                                       }; \r
-                                               },\r
-                                               error: function(error,args) {\r
-                                                 console.warn("error!",error);\r
-                                               }\r
-                                       });\r
-                                       //console.log(maxH);\r
-                                       //console.log(tempH);\r
-                                       if (maxH<tempH){\r
-                                               maxH=tempH;\r
-                                       }\r
-                                       tempH=0;\r
-                               }\r
-                               return maxH;\r
-                       }\r
-                       function showTimeTableSingleCH(parentid,ch,bt,et,fontsize,maxsize){\r
-                               var thisMaxheight=calcMaxHeight(parentid,[ch,],bt,et,fontsize);\r
-                               dojo.xhrGet({\r
-                                       url:"timetable.json",\r
-                                       handleAs: "json",\r
-                                       load: function(data,ioargs){\r
-                                               var baseForm=dojo.byId(parentid);\r
-                                               console.dir(baseForm);\r
-                                               for (i=0;i<data['items'].length;i++){\r
-                                                       var node = dojo.doc.createElement("div");\r
-                                                       node.setAttribute("style","border:3px solid #FFFFFF;width:100%;");\r
-                                                       node.setAttribute("id",data['items'][i]['id']+"_test");\r
-                                                       var nodetitle = dojo.doc.createElement("h5");\r
-                                                       var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);\r
-                                                       var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);\r
-                                                       nodetitle.appendChild(node_str);\r
-                                                       node.appendChild(nodetitle);\r
-                                                       node.appendChild(node_str_desc);\r
-                                                       baseForm.appendChild(node);\r
-                                                       var h=node.clientHeight;\r
-                                                       baseForm.removeChild(node);\r
-                                                       node = dojo.doc.createElement("div");\r
-                                                       node.setAttribute("style","border:3px solid #CCC;width:100%;height:"+h*maxsize/thisMaxheight+"");\r
-                                                       node.setAttribute("id",data['items'][i]['id']);\r
-                                                       nodetitle = dojo.doc.createElement("h5");\r
-                                                       node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);\r
-                                                       node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);\r
-                                                       nodetitle.appendChild(node_str);\r
-                                                       node.appendChild(nodetitle);\r
-                                                       node.appendChild(node_str_desc);\r
-                                                       baseForm.appendChild(node);\r
-                                                       console.log(h)\r
-                                                       baseForm.removeChild(node);\r
-                                               }; \r
-                                       },\r
-                                       error: function(error,args) {\r
-                                         console.warn("error!",error);\r
-                                       }\r
-                               });\r
-                       }\r
-                       function showTimeTable(parentid,chlists,btime,etime,fontsize){\r
-                               var widthp=Math.floor(100/chlists.length);\r
-                               var every_width=20;\r
-                               var timetabelArray= new Array();\r
-                               var bt=new Date(parseInt(btime.substring(0,4)),parseInt(btime.substring(5,7)),parseInt(btime.substring(8,10)),parseInt(btime.substring(11,13)),parseInt(btime.substring(14,16),0));\r
-                               var et=new Date(parseInt(etime.substring(0,4)),parseInt(etime.substring(5,7)),parseInt(etime.substring(8,10)),parseInt(etime.substring(11,13)),parseInt(etime.substring(14,16),0));\r
-                               bt.setSeconds(0);\r
-                               if (bt.getMinutes()>30){\r
-                                       bt.setMinutes(30);\r
-                               }else{\r
-                                       bt.setMinutes(0);\r
-                               }\r
-                               et.setSeconds(0);\r
-                               if (et.getMinutes()>30){\r
-                                       et.setMinutes(30);\r
-                                       et=dojo.date.add(et, "minute", 30);\r
-                               }else{\r
-                                       et.setMinutes(30);\r
-                               }\r
-                               var dt=dojo.date.difference(bt,et,"minute");\r
-                               var nbt=bt;\r
-                               while(dt>i){\r
-                                       net=dojo.date.add(nbt,"minute",30);\r
-                                       var theight=calcMaxHeight("timetable-id0",chlists,dt2DateTime(nbt),dt2DateTime(net),fontsize);\r
-                                       console.log(theight)\r
-                                       for (j=0;j<chlists.length;j++){\r
-                                               if (j>2){\r
-                                                       j=chlists.length;\r
-                                                       //showTimeTableSingleCH("timetable-id"+j,chlists[j],nbt,net,fontsize,theight);\r
-                                               }\r
-                                       }\r
-                                       i=i+30;\r
-                                       nbt=dojo.date.add(nbt,"minute",30);\r
-                                       \r
-                               }\r
-                       }\r
-                       dojo.addOnLoad\r
-                       (\r
-                           function(){\r
-                                       readCh();\r
-                               }\r
-                       );\r
-       </script>\r
-    </head>\r
-    \r
-    <body class=" claro ">\r
-        <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">\r
-            <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">\r
-                Rec10Suite WEB Interface version 0.0.1\r
-            </div>\r
-            <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"\r
-            region="center" id="mainSplit">\r
-                <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"\r
-                id="leftMainAccordion" region="leading" splitter="true">\r
-                    <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">\r
-                       <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 100%;"\r
-                               id="leftProgramTabTE" region="leading" splitter="true">\r
-                                                       <div dojoType="dijit.layout.BorderContainer" id="progTableTE" title="地上派" selected="true"></div>\r
-                                                       <div dojoType="dijit.layout.BorderContainer" id="progTableBS" title="BS"></div>\r
-                                                       <div dojoType="dijit.layout.BorderContainer" id="progTableCS" title="CS"></div>\r
-                                               </div>\r
-                    </div>\r
-                    <div dojoType="dijit.layout.ContentPane" title="予約">\r
-                                               <div dojoType="dijit.form.Button" id="simpleReserveButton" label="新規予約" onclick=changeTab("tab_newreserve")></div>\r
-                    </div>\r
-                    <div dojoType="dijit.layout.ContentPane" title="設定">\r
-                    </div>\r
-                    <div dojoType="dijit.layout.ContentPane" title="その他">\r
-                    </div>\r
-                </div>\r
-                <div dojoType="dijit.layout.TabContainer" id="main_tab" region="center" tabStrip="true">\r
-                    <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">\r
-                               <div dojoType="dijit.layout.BorderContainer" id="timetableContainer" design="sidebar" style="width:100%;height:98%;" gutters="true">\r
-                                                               <div dojoType="dijit.layout.ContentPane" id="timetable-id0" region="left" style="width:30%"></div>\r
-                                                               <div dojoType="dijit.layout.ContentPane" id="timetable-id1" region="center"></div>\r
-                                                               <div dojoType="dijit.layout.ContentPane" id="timetable-id2" region="right" style="width:30%"></div>\r
-                                                       </div>\r
-                                                       <div dojoType="dijit.form.Button" onClick=showTimeTable("timetableContainer",["tb1","tb2","tb3"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)></div>\r
-                    </div>\r
-                    <div dojoType="dijit.layout.ContentPane" title="番組検索">\r
-                        Lorem ipsum and all around - second...\r
-                    </div>\r
-                    <div dojoType="dijit.layout.ContentPane" id="tab_newreserve" title="新規予約">\r
-                               <h2>新規予約</h2><br>\r
-                                                       <p>\r
-                                                       <div dojoType="dojo.data.ItemFileReadStore" jsId="chlistStore"\r
-                                               url="chlist.json"></div>\r
-                                                       <div dojoType="dojo.data.ItemFileReadStore" jsId="dbtypeStore"\r
-                                               url="typelist.json" ></div>\r
-                                                               <h3>タイトル:</h3>\r
-                                                               <div dojoType="dijit.form.TextBox" id="newreserve_title" style="width:30%"></div><br>\r
-                                                       </p>\r
-                                                       <p>\r
-                                                               <h3>詳細設定</h3>\r
-                                                               コマンド:\r
-                                                               <div dojoType="dijit.form.FilteringSelect" id="newreserve_dbtype_list" \r
-                                                                       autoComplete="true" store="dbtypeStore" searchAttr= "label" \r
-                                                                       onShow="setFilteringSelectValue('newreserve_dbtype_list')"></div>\r
-                                                               チャンネル:\r
-                                                               <div dojoType="dijit.form.FilteringSelect" id="newreserve_ch_list" \r
-                                                                       autoComplete="true" store="chlistStore" searchAttr= "label" \r
-                                                                       onShow="setFilteringSelectValue('newreserve_ch_list')"></div><br>\r
-                                                               <p>\r
-                                                                       <h4>時刻設定</h4>\r
-                                                                       開始時間:\r
-                                                                       <div dojoType="dijit.form.DateTextBox" id="newreserve_bdata" constraints="{datePattern:'yyyy-MM-dd'}"></div>\r
-                                                                       <div dojoType="dijit.form.TimeTextBox" id="newreserve_btime"></div><br>\r
-                                                                       終了時間:\r
-                                                                       <div dojoType="dijit.form.DateTextBox" id="newreserve_edata" constraints="{datePattern:'yyyy-MM-dd'}"></div>\r
-                                                                       <div dojoType="dijit.form.TimeTextBox" id="newreserve_etime"></div><br><br>\r
-                                                                       <p>\r
-                                                                       隔日検索:\r
-                                                                       <div dojoType="dijit.form.HorizontalSlider" id="newreserve_deladay" \r
-                                                                       minimum="1" maximum="7" value="7" discreteValues="7"\r
-                                                                        intermediateChanges="true" style="width:300px">\r
-                                                                               <ol dojoType="dijit.form.HorizontalRuleLabels">\r
-                                                                                       <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>\r
-                                                                                       <li>6</li><li>7</li>\r
-                                                                               </ol>\r
-                                                                        </div><br>\r
-                                                                        時刻揺らぎ:\r
-                                                                        <div dojoType="dijit.form.HorizontalSlider" id="newreserve_delatime" \r
-                                                                       minimum="1" maximum="10" value="3" discreteValues="10"\r
-                                                                        intermediateChanges="true" style="width:300px">\r
-                                                                               <ol dojoType="dijit.form.HorizontalRuleLabels">\r
-                                                                                       <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>\r
-                                                                                       <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>\r
-                                                                               </ol>\r
-                                                                        </div>\r
-                                                                        </p>\r
-                                                               </p>\r
-                                                       </p>\r
-                                                       <div dojoType="dijit.form.Button" onClick=showTimeTable("tab_newreserve",["tb1","tb2"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)></div>\r
-                    </div>\r
-                </div>\r
-            </div>\r
-        </div>\r
-    </body>\r
-</html>\r
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html dir="ltr">
+    <head>
+       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
+               <!--<link rel="stylesheet" type="text/css" href="./dojo-release-1.5.0/dijit/themes/claro/claro.css">-->
+        <style type="text/css">
+            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
+        </style>
+        <style type="text/css">
+            html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }
+            #borderContainerTwo { width: 100%; height: 100%; }
+        </style>
+               <title>Rec10Suite 0.0.1</title>
+               <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>
+               <!--<script src="./dojo-release-1.5.0/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>-->
+               <script type="text/javascript">
+               dojo.require("dijit.layout.ContentPane");
+               dojo.require("dijit.layout.TabContainer");
+               dojo.require("dijit.layout.AccordionContainer");
+                       dojo.require("dijit.layout.BorderContainer");
+                       dojo.require("dojo.data.ItemFileReadStore");
+                       dojo.require("dijit.form.FilteringSelect");
+                       dojo.require("dijit.form.DateTextBox");
+                       dojo.require("dijit.form.TimeTextBox");
+                       dojo.require("dijit.form.HorizontalSlider");
+                       dojo.require("dijit.form.HorizontalRuleLabels");
+                       dojo.require("dojo.date");
+                       dojo.require("dojo.date.locale");
+                       function readCh(){
+                               var chlistPaneTE=dojo.byId("progTableTE");
+                               var chlistPaneBS=dojo.byId("progTableBS");
+                               var chlistPaneCS=dojo.byId("progTableCS");
+                               dojo.xhrGet({
+                                       url:"chlist.json",
+                                       handleAs: "json",
+                                       load: function(data,ioargs){
+                                               //console.log("res=", data['items']);
+                                               for (i=0;i<data['items'].length;i++){
+                                                       var node = document.createElement("div");
+                                                       var child = new dijit.form.ToggleButton
+                                                               ( {id: data['items'][i]["name"], 
+                                                               label: data['items'][i]["label"],
+                                                               iconClass: "dijitCheckBoxIcon" },node );
+                                                       if (data['items'][i]['type']=="bs"){
+                                                               chlistPaneBS.appendChild(child.domNode);
+                                                       }else if (data['items'][i]['type']=="cs"){
+                                                               chlistPaneCS.appendChild(child.domNode);
+                                                       }else {
+                                                               chlistPaneTE.appendChild(child.domNode);
+                                                       }
+                                               }; 
+                                       },
+                                       error: function(error,args) {
+                                         console.warn("error!",error);
+                                       }
+                               });
+                       };
+                       function changeTab(tabid){
+                               dijit.byId("main_tab").selectChild(dijit.byId(tabid));
+                       }
+                       function setFilteringSelectValue(dijitid){
+                               console.warn("test");
+                               dijit.byId(dijitid).set('value',dijit.byId(dijitid).store._arrayOfAllItems[0]['id']);
+                       }
+                       function DateTime2dt(ttime){
+                               var tt=new Date(parseInt(ttime.substring(0,4)),parseInt(ttime.substring(5,7)),parseInt(ttime.substring(8,10)),parseInt(ttime.substring(11,13)),parseInt(ttime.substring(14,16),0));
+                               return tt
+                       }
+                       function dt2DateTime(tt){
+                               function get2(t){
+                                       if (t<10){
+                                               return "0"+t
+                                       }else{
+                                               return t
+                                       }
+                               }
+                               var month=parseInt(tt.getMonth());
+                               return tt.getFullYear()+"-"+get2(month)+"-"+get2(tt.getDate())+"T"+get2(tt.getHours())+":"+get2(tt.getMinutes())+":"+get2(tt.getSeconds());
+                       }
+                       function calcMaxHeight(parentid,chlists,bt,et,fontsize){
+                               var maxH=0;
+                               var tempH=0;
+                               for (ch in chlists){
+                                       var chnode=dojo.doc.createElement("div");
+                                       chnode.setAttribute("style","width:100%;");
+                                       //chnode.setAttribute("id",data['items'][i]['id']);
+                                       dojo.xhrGet({
+                                               url:parentid+".json",
+                                               handleAs: "json",
+                                               sync: true,
+                                               load: function(data,ioargs){
+                                                       var baseForm=dojo.byId(parentid);
+                                                       for (i=0;i<data['items'].length;i++){
+                                                               var node = dojo.doc.createElement("div");
+                                                               node.setAttribute("style","border:3px solid #CCC;width:100%;");
+                                                               node.setAttribute("id",data['items'][i]['id']);
+                                                               var nodetitle = dojo.doc.createElement("h5");
+                                                               var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);
+                                                               var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);
+                                                               nodetitle.appendChild(node_str);
+                                                               node.appendChild(nodetitle);
+                                                               node.appendChild(node_str_desc);
+                                                               baseForm.appendChild(node);
+                                                               tempH=tempH+node.clientHeight;
+                                                               if (maxH<tempH){
+                                                                       maxH=tempH;
+                                                               }
+                                                               baseForm.removeChild(node);
+                                                       }; 
+                                               },
+                                               error: function(error,args) {
+                                                 console.warn("error!",error);
+                                               }
+                                       });
+                                       //console.log(maxH);
+                                       //console.log(tempH);
+                                       if (maxH<tempH){
+                                               maxH=tempH;
+                                       }
+                                       tempH=0;
+                               }
+                               return maxH;
+                       }
+                       function showTimeTableSingleCH(parentid,ch,bt,et,fontsize,maxsize){
+                               var thisMaxheight=calcMaxHeight(parentid,[ch,],bt,et,fontsize);
+                               dojo.xhrGet({
+                                       url:parentid+".json",
+                                       handleAs: "json",
+                                       load: function(data,ioargs){
+                                               var baseForm=dojo.byId(parentid);
+                                               console.dir(baseForm);
+                                               for (i=0;i<data['items'].length;i++){
+                                                       var node = dojo.doc.createElement("div");
+                                                       node.setAttribute("style","border:3px solid #FFFFFF;width:100%;");
+                                                       node.setAttribute("id",data['items'][i]['id']+"_test");
+                                                       var nodetitle = dojo.doc.createElement("h5");
+                                                       var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);
+                                                       var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);
+                                                       nodetitle.appendChild(node_str);
+                                                       node.appendChild(nodetitle);
+                                                       node.appendChild(node_str_desc);
+                                                       baseForm.appendChild(node);
+                                                       var h=node.clientHeight;
+                                                       console.log(h);
+                                                       baseForm.removeChild(node);
+                                                       node = dojo.doc.createElement("div");
+                                                       node.setAttribute("style","border:3px solid #CCC;width:100%;height:"+h*maxsize/thisMaxheight+"");
+                                                       node.setAttribute("id",data['items'][i]['id']);
+                                                       nodetitle = dojo.doc.createElement("h5");
+                                                       node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);
+                                                       node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);
+                                                       nodetitle.appendChild(node_str);
+                                                       node.appendChild(nodetitle);
+                                                       node.appendChild(node_str_desc);
+                                                       baseForm.appendChild(node);
+                                               }; 
+                                       },
+                                       error: function(error,args) {
+                                         console.warn("error!",error);
+                                       }
+                               });
+                       }
+                       function showTimeTable(parentid,chlists,btime,etime,fontsize){
+                               var widthp=Math.floor(100/chlists.length);
+                               var every_width=20;
+                               var timetabelArray= new Array();
+                               var bt=new Date(parseInt(btime.substring(0,4)),parseInt(btime.substring(5,7)),parseInt(btime.substring(8,10)),parseInt(btime.substring(11,13)),parseInt(btime.substring(14,16),0));
+                               var et=new Date(parseInt(etime.substring(0,4)),parseInt(etime.substring(5,7)),parseInt(etime.substring(8,10)),parseInt(etime.substring(11,13)),parseInt(etime.substring(14,16),0));
+                               bt.setSeconds(0);
+                               if (bt.getMinutes()>30){
+                                       bt.setMinutes(30);
+                               }else{
+                                       bt.setMinutes(0);
+                               }
+                               et.setSeconds(0);
+                               if (et.getMinutes()>30){
+                                       et.setMinutes(30);
+                                       et=dojo.date.add(et, "minute", 30);
+                               }else{
+                                       et.setMinutes(30);
+                               }
+                               var dt=dojo.date.difference(bt,et,"minute");
+                               var nbt=bt;
+                               var i=0;
+                               while(dt>i){
+                                       console.dir([dt,i]);
+                                       net=dojo.date.add(nbt,"minute",30);
+                                       var theight=calcMaxHeight("timetable-id0",chlists,dt2DateTime(nbt),dt2DateTime(net),fontsize);
+                                       console.log(theight)
+                                       for (j=0;j<chlists.length;j++){
+                                               if (j>2){
+                                                       j=chlists.length;
+                                               }else{
+                                                       showTimeTableSingleCH("timetable-id"+j,chlists[j],nbt,net,fontsize,theight);
+                                               }
+                                       }
+                                       i=i+30;
+                                       nbt=dojo.date.add(nbt,"minute",30);
+                               }
+                       }
+                       dojo.addOnLoad
+                       (
+                           function(){
+                                       readCh();
+                               }
+                       );
+       </script>
+    </head>
+    
+    <body class=" claro ">
+        <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">
+            <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">
+                Rec10Suite WEB Interface version 0.0.1
+            </div>
+            <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
+            region="center" id="mainSplit">
+                <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"
+                id="leftMainAccordion" region="leading" splitter="true">
+                    <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">
+                       <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 100%;"
+                               id="leftProgramTabTE" region="leading" splitter="true">
+                                                       <div dojoType="dijit.layout.BorderContainer" id="progTableTE" title="地上派" selected="true"></div>
+                                                       <div dojoType="dijit.layout.BorderContainer" id="progTableBS" title="BS"></div>
+                                                       <div dojoType="dijit.layout.BorderContainer" id="progTableCS" title="CS"></div>
+                                               </div>
+                    </div>
+                    <div dojoType="dijit.layout.ContentPane" title="予約">
+                                               <div dojoType="dijit.form.Button" id="simpleReserveButton" label="新規予約" onclick=changeTab("tab_newreserve")></div>
+                    </div>
+                    <div dojoType="dijit.layout.ContentPane" title="設定">
+                    </div>
+                    <div dojoType="dijit.layout.ContentPane" title="その他">
+                    </div>
+                </div>
+                <div dojoType="dijit.layout.TabContainer" id="main_tab" region="center" tabStrip="true">
+                    <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">
+                       <div dojoType="dijit.layout.BorderContainer" id="timetableContainer" design="headline" style="width:100%;height:100%;" gutters="true">
+                                                       <div dojoType="dijit.layout.ContentPane" id="timetable-id0" region="left" style="width:30%"></div>
+                                                       <div dojoType="dijit.layout.ContentPane" id="timetable-id1" region="center"></div>
+                                                       <div dojoType="dijit.layout.ContentPane" id="timetable-id2" region="right" style="width:30%"></div>
+                                                       <div dojoType="dijit.layout.ContentPane" id="timetable-button" region="bottom" style="height:4%;position:relative;">
+                                                               <div dojoType="dijit.form.Button" style="position:absolute;left:0.5em;" onClick=showTimeTable()><<前</div>
+                                                               <div dojoType="dijit.form.Button" style="position:absolute;right:0.5em;" onClick=showTimeTable()>次>></div>
+                                                               <div dojoType="dijit.form.Button" style="position:absolute;left:40%;" onClick=showTimeTable()>06h</div>
+                                                               <div dojoType="dijit.form.Button" style="position:absolute;left:48.5%;" onClick=showTimeTable()>12h</div>
+                                                               <div dojoType="dijit.form.Button" style="position:absolute;right:40%;" onClick=showTimeTable()>24h</div>
+                                                               <div dojoType="dijit.form.Button" style="position:absolute;left:10%;" onClick=showTimeTable("timetableContainer",["tb1","tb2","tb3"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)>test</div>
+                                                       </div>
+                                               </div>
+                       </div>
+                    <div dojoType="dijit.layout.ContentPane" title="番組検索">
+                        Lorem ipsum and all around - second...
+                    </div>
+                    <div dojoType="dijit.layout.ContentPane" id="tab_newreserve" title="新規予約">
+                               <h2>新規予約</h2><br>
+                                                       <p>
+                                                       <div dojoType="dojo.data.ItemFileReadStore" jsId="chlistStore"
+                                               url="chlist.json"></div>
+                                                       <div dojoType="dojo.data.ItemFileReadStore" jsId="dbtypeStore"
+                                               url="typelist.json" ></div>
+                                                               <h3>タイトル:</h3>
+                                                               <div dojoType="dijit.form.TextBox" id="newreserve_title" style="width:30%"></div><br>
+                                                       </p>
+                                                       <p>
+                                                               <h3>詳細設定</h3>
+                                                               コマンド:
+                                                               <div dojoType="dijit.form.FilteringSelect" id="newreserve_dbtype_list" 
+                                                                       autoComplete="true" store="dbtypeStore" searchAttr= "label" 
+                                                                       onShow="setFilteringSelectValue('newreserve_dbtype_list')"></div>
+                                                               チャンネル:
+                                                               <div dojoType="dijit.form.FilteringSelect" id="newreserve_ch_list" 
+                                                                       autoComplete="true" store="chlistStore" searchAttr= "label" 
+                                                                       onShow="setFilteringSelectValue('newreserve_ch_list')"></div><br>
+                                                               <p>
+                                                                       <h4>時刻設定</h4>
+                                                                       開始時間:
+                                                                       <div dojoType="dijit.form.DateTextBox" id="newreserve_bdata" constraints="{datePattern:'yyyy-MM-dd'}"></div>
+                                                                       <div dojoType="dijit.form.TimeTextBox" id="newreserve_btime"></div><br>
+                                                                       終了時間:
+                                                                       <div dojoType="dijit.form.DateTextBox" id="newreserve_edata" constraints="{datePattern:'yyyy-MM-dd'}"></div>
+                                                                       <div dojoType="dijit.form.TimeTextBox" id="newreserve_etime"></div><br><br>
+                                                                       <p>
+                                                                       隔日検索:
+                                                                       <div dojoType="dijit.form.HorizontalSlider" id="newreserve_deladay" 
+                                                                       minimum="1" maximum="7" value="7" discreteValues="7"
+                                                                        intermediateChanges="true" style="width:300px">
+                                                                               <ol dojoType="dijit.form.HorizontalRuleLabels">
+                                                                                       <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
+                                                                                       <li>6</li><li>7</li>
+                                                                               </ol>
+                                                                        </div><br>
+                                                                        時刻揺らぎ:
+                                                                        <div dojoType="dijit.form.HorizontalSlider" id="newreserve_delatime" 
+                                                                       minimum="1" maximum="10" value="3" discreteValues="10"
+                                                                        intermediateChanges="true" style="width:300px">
+                                                                               <ol dojoType="dijit.form.HorizontalRuleLabels">
+                                                                                       <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
+                                                                                       <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
+                                                                               </ol>
+                                                                        </div>
+                                                                        </p>
+                                                               </p>
+                                                       </p>
+                                                       <div dojoType="dijit.form.Button" onClick=showTimeTable("tab_newreserve",["tb1","tb2"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
+