var config={
      "defaultSourceDir":"./", 
      "scriptSubDirname":"js", 
      "cssSubDirname":"css", 
      "globalScript":[{"name":"jquery-1.8.3.min.js","path":"https://code.jquery.com/jquery-1.8.3.min.js"},{"name":"test1.js"}],
      "globalCss":[{"name":"test1.css"}]
   };
   
   System.config(config);
   
   var v1=System.getReadyVersion();//get the version of the 'ready' event
   
   //if there are global file(the globalScript and globalCss),the event 'ready' will be emitted after the files are loaded.
   System.on("ready",v1,function(){
      console.log("hello world!");
   })

   var v2=System.getReadyVersion();
   
   System.install("test2.js",v2);
   System.install("test2.css",v2);
   System.install("test3.css",v2);
   
   System.on("ready",v2,function(){
     console.log("Resource has already been loaded!You can do your things safely now.");
   ])
   
   //or
   
   var v2=System.getReadyVersion();
   
   var obj=[{"name":"test2.js"},{"name":"test2.css"},{"test3.css"}];
   
   System.install(obj,v2).on("ready",v2,function(){
      console.log("Resource has already been loaded! You can do your things safely now.");
   });

    System.uninstall("test1.js");
    System.uninstall("test2.css");
    
    //or
    
    var obj=["test1.js","test2.css"];
    
    System.uninstall(obj);//no callback ,the files will be uninstalled right now! 

    //let's do it safely :)
    System.on("ready",v1,function(){
    
       System.on("event1",function(message){
         console.log(message)
       });
       
       setTimeout(function(){
          System.emit("event1","hello world!");
       },1000);
       
       //we regist the event in 'v1 ready' ,we can emit it in another 'ready' event's callback with different version
       System.on("event2",function(m){
           console.log(m);
       })
    });
    
    System.on("ready",v2,function(){
       
       System.emit("event2","we can communicate! :)"); 
       
    });

     var water_fall=System.waterFall();//the first step
     
     funciton cb(m)
     {
      setTimeout(function(){
       console.log(m);
       water_fall.next(m+1);//important!!! 
      },m%2*300);
     };
     
    var funcs=[];
    for(var i=0;i<6;i++)
       funcs.push(cb);
       
    //the second step();
    water_fall.regist(funcs,function(n){
       console.log("End at :"+n);
    });
    
    water_fall.fire(0);//the last step
    
    /*
      result:
        0
        1
        2
        3
        4
        5
        End at :6
        
        this mean that the functions will be executed one by one.when last one is done,the callback will be executed.
    */
     

    var all=System.whenAllDone();
    
    function c1(task,args)
      {
        setTimeout(function(){
        console.log(args);
        task.ok();//important!!!!
        },300);
      };
    function c2(task,args)
    {
       setTimeout(function(){
       console.log(args);
       task.ok();//important!!!
       },400);
    };
    function c3(task,args)
    {
       setTimeout(function(){
        console.log(args);
        task.ok();//important!!!
       },100);
    };
    
    all.when([c1,c2,c3]).args([1,2,3]).done(function(){
      console.log("work well!");
    });
    
    //or 
    
    all.args([1,2,3]).when([c1,c2,c3]).done(function(){
      console.log("work well");
    });
    
    //or
   
    all.when(c1,c2,c3).args(1,2,3).done(function(){
      console.log("work well");
    };
    
    //or
    
    all.when(c1,c2,c3).args([1,2,3]).done(function(){
      console.log("work well");
    });
    //.......
    
    
    // 1 是c1的传入参数，2是c2的传入参数，3是c3的传入参数，c1,c2,c3中的task这个参数是all这个对象传送的，并在函数体内
    //调用task.ok()表明这个函数执行结束
    //the number '1' is the argument of c1. '2' is the argument of c2,'3' is the argument of c3. the 'task' is an Object 
    //which is the 'all' Object pass to the function. and the method "task.ok()" must be executed by yourself,which means
    //the function  finishs executing .when all the functions are done ,the callback will be executed.
    
    /*
       the result is:
          3
          1
          2
          work well
          这样的结果表明回调函数将在c1,c2,c3都执行完之后被调用，但是c1,c2,c3的执行是同步的，不是一个接一个被执行的。
       this means that the callback will be executed after the functions c1,c2,c3 are done. but c1,c2,c3 is not done one by     one . this is the difference with waterFall Object.
       
    */

    System.setKey("name","Jason Zheng");
    
    System.getKey("name");//return "Jason Zheng"
    
    System.removeKey("name");
    
    System.getKey("name");//undefined
    
    /*note :
    
       when the page was refreshed ,all the key will lost
       
    */