var my_view = {
    name : "my_view",
    drawContent : function(wrapper, layer){ //implement the delegate method
        $table([
            $tr([
                $th("ColHeader1"),
                $th("ColHeader2"),
                $th("ColHeader3")
            ]),
            $tr([
                $td("ColValue1"),
                $td("ColValue2"),
                $td("ColValue3")
            ]),
        ], document.body);
    }
};

window.onload = function(){
  $app.start("my_view");
}

$app.drawHeader = function(header){
    //draw a H1 tag with innerHTML of 'MY WEB SERVICE', and append to header
    //all pages will be affected by this setting
    $h1("MY WEB SERVICE", header);
}

$app.drawFooter : function(footer){
    //draw an <A> tag with href='the url',and innerHTML of 'Copyright' and append to footer
    //all pages will be affected by this setting
    $a({html:"Copyright",href:'https://my-great-company.com'}, footer);
};

var my_view = {
    name : "my_view",
    drawHeader : function(header){
        //draw a H1 tag with innerHTML of 'MY VIEW', and append to header
        $h1("MY VIEW", header);
    },
    drawContent : function(wrapper, layer){ //implement the delegate method
        //...
    }
};

var my_view = {
    name : "my_view",
    drawHeader : function(header){
        //...
    },
    drawContent : function(wrapper, layer){ //implement the delegate method
        //...
    },
    drawFooter : function(footer){
        //draw an <A> tag with href='the url',and innerHTML of 'Copyright' and append to footer
        $a({html:"Copyright",href:'https://my-great-company.com'}, footer);
    },
};

/**
 * @param OPTIONS : 
 *      can be String, Object, Array 
 *      String : be trait as src for <img> and innerHTML of the other tags
 *      Object : attribuites of this tag
 *          - any official attribute.
 *          - any custom key name.
 *          - "html" = shortcut of innerHTML
 *          - "class" = shortcut of className
 *      Array : an array of children nodes.
 * @param TARGET : [optional], target Dom Element to append to 
 * @return : Element Object (with extension methods)
 *      
 */
TAG_NAME_UPPERCASE(OPTIONS, TARGET);//uppercased tagname
//OR
$TAG_NAME_LOWERCASE(OPTIONS, TARGET);//lowercased tagname with a prefix of $
//OR
$e(TAGNAME, OPTIONS, TARGET);//TAGNAME can be upper or lower case, and you can combine with ID or class name, such as li.classname, ul#myId

//Syntax 
/**
 * @param key : key name String or Object
 * @param value : value
 * @return : this Element Object.
 */
Element.attr(key, value);

//Example
var el = $div({html:'My DIV', class:'my-div-cls'});
el.attr('data-id',1234).attr({'data-key':'myKey','data-value':'myVal'});//.attr method returns Element Object.
document.body.appendChild(el) // can be used as same as Element Object

//these code are exactly same with 
var el = $div({html:'My DIV', class:'my-div-cls',
    'data-id':1234,'data-key':'myKey','data-value':'myVal'}, document.body);

//Syntax 
/**
 * @param key : [String] key name String
 * @return : value [Mixed]
 */
Element.attr(key);

//Example
var el = $div({html:'My DIV', 'data-id':'myId'});
var id = el.attr('data-id'); // id='myId'

//Syntax 
/**
 * @param key : key name String or Object
 * @param value : value
 * @return : this Element Object.
 */
Element.css(key, value);

//Example
$div('my div').css({color:'red',fontSize:'11pt'});

//Syntax 
/**
 * @param key : style key name
 * @return : this Element Object.
 */
Element.css(key);

//Example
var cl = $div('my div').css('color'); //cl='red'

//Syntax 
/**
 * @param eventname : JS event name
 * @param func : JS Function instance
 * @return : this Element Object.
 */
Element.bind(eventname,func);

//Example
var cl = $div('my div')
    .attr({class:'my-class-name'})
    .bind('click',function(e){
        console.log('Clicked : '+this.innerHTML);
    })
    .bind('doubleclick',function(e){
        console.log('DoubleClicked : '+this.innerHTML);
    })

//These are basically same.
$div() === DIV() 

//Create a link with href=http://google.com and append to #myDiv
$a("http://google.com/", $id("myDiv"));

//Draw img tag with src=...
$img("http://google.com/images/xxxx.png");

//Create a <label> with innerHTML=Hey!..... and set color=red, id=myLabel
$label("Hey! How are you doing.")
    .css({"color":"red"})
    .attr({id:"myLabel"}); 

//create a element like this: <div id="myDiv">the content of this div</div>
$div({id:"myDiv", html:"the content of this div"}); 

$table([
    $tr([
        $th("ColHeader1"),
        $th("ColHeader2"),
        $th("ColHeader3")
    ]),
    $tr([
        $td("ColValue1"),
        $td("ColValue2"),
        $td("ColValue3")
    ]),
], document.body);

/**
 * checkbox / radiobox
 * 
 * @param options : Array, 
 *      [{label:"label1",value:"value1"},{label:"label2",value:"value2"}}...]
 * @param attrs : {
 * 		name : [required] name of form item
 * 		type : [required] checkbox|radio .
 * 		drawOption : function(el, i, attrs ){} //custom drawing,
 * 			             // el=<label>-<input> element, i=index, 
 * 		onclick : function(){},... //other events are also supported
 * }
 * @param target : which dom to append to
 * @return : Element
 * */
$sel(options,attrs,target);

//Example
$sel(
    [{label:'Male',value:'male'},{label:'Female',value:'female'}],
    {name:'gender',type:'radio'},
    document.body
)

/**
 * @param opts: array of list items, @see $sel
 * @param attrs: Element attrs
 * 		.multiple: multiple selection
 * 		.default : default value
 * 		.value : value
 * 		.onSelect: function (e, i)
 * @method setLabel(label) : set txt inside selectbox
 */
$dropdown(opts,attrs,tar)

  // this will be changed in the future.
  $app.loadView("YOUR_VIEW_NAME"); 
  
  // or 
  $div({url:"YOUR_VIEW_NAME?param1=b&param2=b"});
  

$("#id"); //return Element
$(".className"); //return Element list
$("#myId .className", function(el, idx){ ... }); //do foreach on selected elements;

$ui.formView();
Coming soon ...

$ui.showMessage();
Coming soon ...

Element.animate(OPTIONS);

Available OPTIONS:
@delay : time wait to start
@frame : how many frames per second. (1000ms) | 50
@duration : The full time the animation should take, in ms. default = 1000ms
@delta(progress) : A function name, which returns the current animation progress. @see deltas
@style : easeIn(default), easeOut, easeInOut
@step(element, delta) : function. do the real job

Examples:
$id("img").animate({
  delta :"bounce",  
  style : "easeOut",
  step: function(el, delta){
    el.style.marginTop = delta*600;
  }}).animate({
  delta :"quad",
  style :"easeOut",
  step:function(el, delta){
    el.style.marginLeft = delta*600;
    el.style.width = delta*24*10; 
  }});

$http.get("/api/test", {page:1}, function(res){console.log(res)}, "json");

$http.get("/api/test", {user:U, pass:P}, function(res){console.log(res)}, "html");

$http.put("/api/test/1", {pass:P}, function(res){console.log(res)}, "text");

$http.put("/api/test/1", {}, function(res){console.log(res)}, "json");

Coming soon ...