-module (web_samples_freerunner).
-include ("wf.inc").
-compile(export_all).

main() -> 
	#template { file="./wwwroot/freerunner.html", bindings=[
		{'Group', learn},
		{'Item', samples}
	]}.

body() -> 
	Body = [	
    	#panel { class="h1-logo", body = [#image { image="/images/hackable1.gif"} ] },
	    #label { id=clock, text="10:14"},
    	#label { id=mylabel, text="" }
    ],
	wf:comet(fun() -> clock_update(clock) end),
	wf:render(Body).
	
panel() ->
    Body = [
        #panel 
        { 
            id=settings, 
            class="panel-settings",
            body = [ 
                #table { id=panel_page1, rows=[
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/envoi-sms-64x64.png" }],
                                    class="panel-item",
                                    id=buttonSimpleapp },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/connect-bearstech-64x64.png" }],
                                    class="panel-item" }
                            ]},
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/envoi-sms-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/connect-bearstech-64x64.png" }],
                                    class="panel-item" }
                            ]},
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/envoi-sms-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/connect-bearstech-64x64.png" }],
                                    class="panel-item" }
                            ]},
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/envoi-sms-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/connect-bearstech-64x64.png" }],
                                    class="panel-item" }
                            ]},
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/envoi-sms-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    id=buttonPage1,
                                    body=[#image { image="/images/right-64x64.png" }],
                                    class="panel-item" 
                                }
                            ]}
                         ]},
                         
                #table { id=panel_page2, rows=[
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/envoi-sms-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    id=buttonPage2,
                                    body=[#image { image="/images/right-64x64.png" }],
                                    class="panel-item" 
                                    } 
                            ]}
                         ]},
                #table { id=panel_page3, rows=[
                            #tablerow { cells=[
                                #tablecell { 
                                    body=[#image {id=itemDial, image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/dial-call-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    body=[#image { image="/images/message-64x64.png" }],
                                    class="panel-item" },
                                #tablecell { 
                                    id=buttonPage3,
                                    body=[#image { image="/images/right-64x64.png" }],
                                    class="panel-item" 
                                    } 
                            ]}
                         ]}                        
                ]                         
                       
                        
        },
	#panel { id=buttonsettings, class="button-settings" }
    ],
    
	wf:wire(buttonsettings, 
	        #event {target=settings,
	                type=click,
	                actions = #toggle{}
	               }),
	%% panel 1
	wf:wire(buttonPage1, 
	        #event {target=panel_page1,
	                type=click,
	                actions = #hide{}
	               }),
	wf:wire(buttonPage1, 
	        #event {target=panel_page2,
	                type=click,
	                actions = #show{}
	               }),
	%% panel 2
	wf:wire(buttonPage2, 
	        #event {target=panel_page2,
	                type=click,
	                actions = #hide{}
	               }),
	wf:wire(buttonPage2, 
	        #event {target=panel_page3,
	                type=click,
	                actions = #show{}
	               }),

	%% panel 3
	wf:wire(buttonPage3, 
	        #event {target=panel_page3,
	                type=click,
	                actions = #hide{}
	               }),
	wf:wire(buttonPage3, 
	        #event {target=panel_page1,
	                type=click,
	                actions = #show{}
	               }),
	               	               
    wf:wire(itemDial, #event { type=click, postback={clicked, itemDial} }),

    % simpleapp
	wf:wire(buttonSimpleapp, 
	        #event {target=simpleApp,
	                type=click,
	                actions = #toggle{}
	               }),
	wf:wire(buttonSimpleapp, 
	        #event {target=settings,
	                type=click,
	                actions = #toggle{}
	               }),    


	wf:render(Body).
	
simpleapp()->
  #panel { id=simpleApp, class="simple-app", body=[
    #label { class="simple-app-title", text="simple app" },
    
	#p{},
    #inplace_textbox { class="inplace-label", text="freerunner" }, 
	#p{},
	#button { text="rocks" },

	#p{},
	#button { text="rocks" },
	#p{},
	#button { text="with erlang" }
  ]}.
   

clock_update(Clock)->
    {_Date, {Hour, Min, _Sec}} = erlang:localtime(),
    Value = io_lib:format("~2.10.0B:~2.10.0B", [Hour, Min]),
    wf:update(Clock, lists:flatten(Value)),
	wf:comet_flush(),
	timer:sleep(1000*60),
    clock_update(Clock).

event({clicked, itemDial})->
    spawn(fun() -> os:cmd("openmoko-dialer") end),
	wf:update(mylabel, "launching dialer");
    
event(EventInfo) ->
	wf:wire(#alert { text=wf:f("~p", [EventInfo]) }),
	ok.
	
	
inplace_textbox_event(_Tag, Value) ->
  Value.