toDo

;(function(){
    'use strict';
    var $form_add_task=$('.add-task')
        ,task_list=[]
        ,$task_delete
        ,$task_delete_trigger
        ,$task_detail=$('.task-detail')
        ,$task_detail_trigger
        ,$task_detail_mask=$('.task-detail-mask')
        ,current_index
        ,$update_form//专门用于更新详情内容的form;
        ,$task_detail_content
        , $task_detail_content_input
        , $checkbox_complete
        ,msg
        ,$msg=$('.msg')
        ,$msg_content=$msg.find('.msg-content')
        ,$msg_confirm=$msg.find('.confirmed')
        ,$alerter=$('.alerter')
        ,$body=$('body')
        ,informed
        ,$window=$(window)
        ,confirmed
        ;
    init();
    pop('abc')
        .then(function(r){
            if(r){
                console.log('r',r);
            }
        })




    $form_add_task.on("submit",on_add_task_form_submit);




    function  on_add_task_form_submit(e) {
        e.preventDefault();
        var new_task = {},
            $input;
        $input = $(this).find('input[name=content]');
        new_task.content = $input.val();
        // console.log('new_task',new_task);
        if (!new_task.content) return;
        if (add_task(new_task)) {
            render_task_list();//提交新加任务的时候要调用渲染下面任务列表函数；
            $input.val(null);
        }
    }












    function add_task(new_task){
        task_list.push(new_task);
        // store.set('task_list',task_list);
        // console.log('task_list',task_list);
        refresh_task_list();
        // store.clear();
        return true;

    }


    function refresh_task_list(){
        store.set('task_list',task_list);
        render_task_list();
    }



    function listen_task_delete(){
        $task_delete_trigger.on('click',function(){
            var $this=$(this);
            var $item=$this.parent().parent();
            var index=$item.data('index');
            var tmp=confirm('确定删除？');
            tmp?task_delete(index):null;
            task_delete(index);
        })
    }

    function task_delete(index){
        if(index===undefined||!task_list[index]) return;
        delete task_list[index];
        refresh_task_list();
    }



    function listen_task_detail(){

        //双击打开详情
        var index;
        $('.task-item').on('dblclick',function(){
            index=$(this).data('index');
            show_task_detail(index);
        })



        $task_detail_trigger.on('click',function(){
            var $this=$(this);
            var $item=$this.parent().parent();
            var index=$item.data('index');
            console.log('index',index);
            show_task_detail(index);
        })
    }





    function listen_checkbox_complete(){
        $checkbox_complete.on('click',function(){
            var $this=$(this);
            // var is_complate=$(this).is(':checked');
            var index=$this.parent().parent().data('index');
            var item=get(index);
            if (item.complete)
                update_task(index, {complete: false});
            else
                update_task(index, {complete: true});
        })
    }





    function get(index){
        return store.get('task_list')[index];
    }




    function show_task_detail(index){
        render_task_detail(index);//修改详情内容的；
        current_index=index;
        $task_detail.show();
        $task_detail_mask.show();
    }


    $task_detail_mask.on('click',hide_task_detail);
    function hide_task_detail(){
        $task_detail.hide();
        $task_detail_mask.hide();
    }




    function update_task(index,data){
        if(!index||!task_list[index]) return;
        // task_list[index]=$.merge({},task_list[index],data);
        // task_list[index]=data;
        task_list[index]=$.extend({},task_list[index],data);
        // console.log('task_list[index]',task_list[index]);
        refresh_task_list();
        console.log('task_list[index]',task_list[index]);
    }










    function render_task_detail(index){
        if(index===undefined||!task_list[index]) return;
        var item=task_list[index];
        var tpl =
            '<form>' +
            '<div class="content">' +
            item.content +
            '</div>' +
            '<div class="input-item">' +
            '<input style="display: none;" type="text" name="content" value="' + (item.content || '') + '">' +
            '</div>' +
            '<div>' +
            '<div class="desc input-item">' +
            '<textarea name="desc">' + (item.desc || '') + '</textarea>' +
            '</div>' +
            '</div>' +
            '<div class="remind input-item">' +
            '<label>提醒时间</label>'+
            '<input class="datetime" name="remind_date" type="text" value="' + (item.remind_date || '') + '">' +
            '</div>' +
            '<div class="input-item"><button type="submit">更新</button></div>' +
            '</form>';
        $task_detail.html(null);
        $task_detail.html(tpl);
        $('.datetime').datetimepicker({ format: 'Y/m/d', timepicker: false });

        $update_form=$task_detail.find('form');
        // console.log('$update_form',$update_form);
        $update_form.on('submit',function(e){
            e.preventDefault();
            var data={};
            data.content=$(this).find('[name=content]').val();
            data.desc=$(this).find('[name=desc]').val();
            data.remind_date=$(this).find('[name=remind_date]').val();
            // console.log('data',data);
            update_task(index,data);//item是以前的值这里将详情写到localstorage里面；
            hide_task_detail();//点击更新后将详情框隐藏；调用函数就行；
        })
        $task_detail_content=$update_form.find('.content');
        $task_detail_content_input=$update_form.find('[name=content]');
        $task_detail_content.on('dblclick',function(){
            $task_detail_content_input.show();
            $task_detail_content.hide();

        })

    }








    function init(){
        task_list=store.get('task_list')||[];
        if(task_list.length)
            render_task_list();
        task_remind_check();
        listen_msg_event();
    }



    function render_task_list(){
        var $task_list=$('.task-list');
        $task_list.html('');
        var  complete_items=[];//装已完成的任务
        for(var i=0;i<task_list.length;i++){
            var item=task_list[i];
            if(item && item.complete)
                complete_items[i]=item;
            else
                var $task=render_task_item(item,i);
                $task_list.prepend($task);
        }


        for(var j=0;j<complete_items.length;j++){
                $task=render_task_item(complete_items[j],j);
                if(!$task) continue;
                $task.addClass('completed');
                $task_list.append($task);
        }






        $task_delete_trigger=$('.action.delete');
        $task_detail_trigger=$('.action.detail');
        $checkbox_complete=$('.task-list .complete[type=checkbox]');
        listen_task_delete();
        listen_task_detail();
        listen_checkbox_complete();



    }





    function render_task_item(data,index){
        if(!data||!index) return;
        var list_item_item=
            '<div class="task-item"  data-index="'+index+'">'+
            '<span><input  class="complete"   ' + (data.complete ? 'checked' : '') + '  type="checkbox"></span>'+
            '<span class="task-content">'+data.content+'</span>'+
            '<span class="fr">'+
            '<span class="action delete">  删除</span>'+
            '<span class="action detail">  详细</span>'+
            ' </span>'+
            '</div>';
        return  $(list_item_item);
    }




    function task_remind_check(){
        show_msg();
        var current_timestamp
            ,task_timestamp;
       var itl=setInterval(function(){
           for(var i=0;i<task_list.length;i++){
               var item=get(i);
                   continue;
               current_timestamp=(new Date()).getTime();
               task_timestamp=(new Date(item.remind_date)).getTime();
               if(current_timestamp- task_timestamp>=1){
                   update_task(i,{informed:true});
                   show_msg(item.content);
               }
           }
       },300)
    }
    function show_msg(){
        // if (!msg) return;
          $msg_content.html(msg);
          // $alerter.get(0).play();
          $('.msg').show();
        }
    function hide_msg(){
        $('.msg').hide();
    }



    function listen_msg_event(){
        $msg_confirm.on('click',function(){
            hide_msg();
        })
    }



    //弹窗；
    function pop(arg){
        if(!arg){
            console.log('pop title is required');
        }
        var conf={}
            ,$box
            ,$mask
            ,$title
            ,$content
            ,$confirm
            ,$cancel
            ,dfd//$.Deferred();
            ,timer
        ;
        $box=$('<div>' +
            '<div class="pop-title">1234</div>' +
            '<div class="pop-content">' +
            '<button  style="margin-right:5px;"  class="primary confirm">确定</button>' +
            '<button class="cancel">取消</button>' +
            '</div>' +
            '</div>');

            $box.css({
                color:'#444',
                position:'fixed',
                width:300,
                height:200,
                background:'#fff',
                'border-raidus':3,
                'box-shadow':'0 1px 2px rgba(0,0,0,.5)'

            })
        $title=$box.find('.pop-title').css({
            padding:'5px 10px',
            'font-weight':900,
            'font-size':20,
            'text-align':'center'
        })
        $content=$box.find('.pop-title').css({
            padding:'5px 10px',
            'text-align':'center'
        })

        $confirm=$content.find('button.confirm');
        $cancel=$content.find('button.cancel');






        $mask=$('<div></div>')
            .css({
                position:'fixed',
                top:0,
                left:0,
                right:0,
                 bottom:0,
                background:'rgba(0,0,0,.5)',
            })

        var  timer=setInterval(function(){
            
        });

        $confirm.on('click',function(){
            confirmed=true;
        })

        function adjust_box_position(){
            var window_width=$window.width()
                ,window_height=$window.height()
                ,box_width=$box.width()
                ,box_height=$box.height()
                ,move_x
                ,move_y
            ;
            move_x=(window_width-box_width)/2;
            move_y=(window_height-box_height)/2-20;
            $box.css({
                left:move_x,
                top:move_y
            })

        }
        $window.on('resize',function(){
            adjust_box_position();
        })



        if(typeof arg  == "string")
            conf.title=arg;
        else{
            conf=$.extend(conf,arg);
        }


        $mask.appendTo($body);
        $box.appendTo($body);
        $window.resize();
        return dfd.promise();
    }








})()

 

;(function(){    'use strict';    var $form_add_task=$('.add-task')        ,task_list=[]        ,$task_delete        ,$task_delete_trigger        ,$task_detail=$('.task-detail')        ,$task_detail_trigger        ,$task_detail_mask=$('.task-detail-mask')        ,current_index        ,$update_form//专门用于更新详情内容的form;        ,$task_detail_content        , $task_detail_content_input        , $checkbox_complete        ,msg        ,$msg=$('.msg')        ,$msg_content=$msg.find('.msg-content')        ,$msg_confirm=$msg.find('.confirmed')        ,$alerter=$('.alerter')        ,$body=$('body')        ,informed        ,$window=$(window)        ,confirmed        ;    init();    pop('abc')        .then(function(r){            if(r){                console.log('r',r);            }        })



    $form_add_task.on("submit",on_add_task_form_submit);



    function  on_add_task_form_submit(e) {        e.preventDefault();        var new_task = {},            $input;        $input = $(this).find('input[name=content]');        new_task.content = $input.val();        // console.log('new_task',new_task);        if (!new_task.content) return;        if (add_task(new_task)) {            render_task_list();//提交新加任务的时候要调用渲染下面任务列表函数；            $input.val(null);        }    }











    function add_task(new_task){        task_list.push(new_task);        // store.set('task_list',task_list);        // console.log('task_list',task_list);        refresh_task_list();        // store.clear();        return true;
    }

    function refresh_task_list(){        store.set('task_list',task_list);        render_task_list();    }


    function listen_task_delete(){        $task_delete_trigger.on('click',function(){            var $this=$(this);            var $item=$this.parent().parent();            var index=$item.data('index');            var tmp=confirm('确定删除？');            tmp?task_delete(index):null;            task_delete(index);        })    }
    function task_delete(index){        if(index===undefined||!task_list[index]) return;        delete task_list[index];        refresh_task_list();    }


    function listen_task_detail(){
        //双击打开详情        var index;        $('.task-item').on('dblclick',function(){            index=$(this).data('index');            show_task_detail(index);        })


        $task_detail_trigger.on('click',function(){            var $this=$(this);            var $item=$this.parent().parent();            var index=$item.data('index');            console.log('index',index);            show_task_detail(index);        })    }




    function listen_checkbox_complete(){        $checkbox_complete.on('click',function(){            var $this=$(this);            // var is_complate=$(this).is(':checked');            var index=$this.parent().parent().data('index');            var item=get(index);            if (item.complete)                update_task(index, {complete: false});            else                update_task(index, {complete: true});        })    }




    function get(index){        return store.get('task_list')[index];    }



    function show_task_detail(index){        render_task_detail(index);//修改详情内容的；        current_index=index;        $task_detail.show();        $task_detail_mask.show();    }

    $task_detail_mask.on('click',hide_task_detail);    function hide_task_detail(){        $task_detail.hide();        $task_detail_mask.hide();    }



    function update_task(index,data){        if(!index||!task_list[index]) return;        // task_list[index]=$.merge({},task_list[index],data);        // task_list[index]=data;        task_list[index]=$.extend({},task_list[index],data);        // console.log('task_list[index]',task_list[index]);        refresh_task_list();        console.log('task_list[index]',task_list[index]);    }









    function render_task_detail(index){        if(index===undefined||!task_list[index]) return;        var item=task_list[index];        var tpl =            '<form>' +            '<div class="content">' +            item.content +            '</div>' +            '<div class="input-item">' +            '<input style="display: none;" type="text" name="content" value="' + (item.content || '') + '">' +            '</div>' +            '<div>' +            '<div class="desc input-item">' +            '<textarea name="desc">' + (item.desc || '') + '</textarea>' +            '</div>' +            '</div>' +            '<div class="remind input-item">' +            '<label>提醒时间</label>'+            '<input class="datetime" name="remind_date" type="text" value="' + (item.remind_date || '') + '">' +            '</div>' +            '<div class="input-item"><button type="submit">更新</button></div>' +            '</form>';        $task_detail.html(null);        $task_detail.html(tpl);        $('.datetime').datetimepicker({ format: 'Y/m/d', timepicker: false });
        $update_form=$task_detail.find('form');        // console.log('$update_form',$update_form);        $update_form.on('submit',function(e){            e.preventDefault();            var data={};            data.content=$(this).find('[name=content]').val();            data.desc=$(this).find('[name=desc]').val();            data.remind_date=$(this).find('[name=remind_date]').val();            // console.log('data',data);            update_task(index,data);//item是以前的值这里将详情写到localstorage里面；            hide_task_detail();//点击更新后将详情框隐藏；调用函数就行；        })        $task_detail_content=$update_form.find('.content');        $task_detail_content_input=$update_form.find('[name=content]');        $task_detail_content.on('dblclick',function(){            $task_detail_content_input.show();            $task_detail_content.hide();
        })
    }







    function init(){        task_list=store.get('task_list')||[];        if(task_list.length)            render_task_list();        task_remind_check();        listen_msg_event();    }


    function render_task_list(){        var $task_list=$('.task-list');        $task_list.html('');        var  complete_items=[];//装已完成的任务        for(var i=0;i<task_list.length;i++){            var item=task_list[i];            if(item && item.complete)                complete_items[i]=item;            else                var $task=render_task_item(item,i);                $task_list.prepend($task);        }

        for(var j=0;j<complete_items.length;j++){                $task=render_task_item(complete_items[j],j);                if(!$task) continue;                $task.addClass('completed');                $task_list.append($task);        }





        $task_delete_trigger=$('.action.delete');        $task_detail_trigger=$('.action.detail');        $checkbox_complete=$('.task-list .complete[type=checkbox]');        listen_task_delete();        listen_task_detail();        listen_checkbox_complete();


    }




    function render_task_item(data,index){        if(!data||!index) return;        var list_item_item=            '<div class="task-item"  data-index="'+index+'">'+            '<span><input  class="complete"   ' + (data.complete ? 'checked' : '') + '  type="checkbox"></span>'+            '<span class="task-content">'+data.content+'</span>'+            '<span class="fr">'+            '<span class="action delete">  删除</span>'+            '<span class="action detail">  详细</span>'+            ' </span>'+            '</div>';        return  $(list_item_item);    }



    function task_remind_check(){        show_msg();        var current_timestamp            ,task_timestamp;       var itl=setInterval(function(){           for(var i=0;i<task_list.length;i++){               var item=get(i);                   continue;               current_timestamp=(new Date()).getTime();               task_timestamp=(new Date(item.remind_date)).getTime();               if(current_timestamp- task_timestamp>=1){                   update_task(i,{informed:true});                   show_msg(item.content);               }           }       },300)    }    function show_msg(){        // if (!msg) return;          $msg_content.html(msg);          // $alerter.get(0).play();          $('.msg').show();        }    function hide_msg(){        $('.msg').hide();    }


    function listen_msg_event(){        $msg_confirm.on('click',function(){            hide_msg();        })    }


    //弹窗；    function pop(arg){        if(!arg){            console.log('pop title is required');        }        var conf={}            ,$box            ,$mask            ,$title            ,$content            ,$confirm            ,$cancel            ,dfd//$.Deferred();            ,timer        ;        $box=$('<div>' +            '<div class="pop-title">1234</div>' +            '<div class="pop-content">' +            '<button  style="margin-right:5px;"  class="primary confirm">确定</button>' +            '<button class="cancel">取消</button>' +            '</div>' +            '</div>');
            $box.css({                color:'#444',                position:'fixed',                width:300,                height:200,                background:'#fff',                'border-raidus':3,                'box-shadow':'0 1px 2px rgba(0,0,0,.5)'
            })        $title=$box.find('.pop-title').css({            padding:'5px 10px',            'font-weight':900,            'font-size':20,            'text-align':'center'        })        $content=$box.find('.pop-title').css({            padding:'5px 10px',            'text-align':'center'        })
        $confirm=$content.find('button.confirm');        $cancel=$content.find('button.cancel');





        $mask=$('<div></div>')            .css({                position:'fixed',                top:0,                left:0,                right:0,                 bottom:0,                background:'rgba(0,0,0,.5)',            })
        var  timer=setInterval(function(){                    });
        $confirm.on('click',function(){            confirmed=true;        })
        function adjust_box_position(){            var window_width=$window.width()                ,window_height=$window.height()                ,box_width=$box.width()                ,box_height=$box.height()                ,move_x                ,move_y            ;            move_x=(window_width-box_width)/2;            move_y=(window_height-box_height)/2-20;            $box.css({                left:move_x,                top:move_y            })
        }        $window.on('resize',function(){            adjust_box_position();        })


        if(typeof arg  == "string")            conf.title=arg;        else{            conf=$.extend(conf,arg);        }

        $mask.appendTo($body);        $box.appendTo($body);        $window.resize();        return dfd.promise();    }







})()