/*
* Micro framework templating
* example mk.tpl('body',{title:'title'},callback);
* call with $(title)
*/
var mk=(function(){'use strict';return{tpl:function(element,args,callback){var el=document.querySelector(element);if(!el) return;var b = el.innerHTML,c = this.df(b,args);el.innerHTML= c;if(typeof callback !== 'undefined'){callback(el);}},df: function(b, d){var re = /\$\(|\)/,u = b.split(re),c = u.length;for (var i = 1; i < c; i++){if (d.hasOwnProperty(u[i])){u[i] = d[u[i]];}}var s = u.join('');return s;}};})();



mk.tpl('#box',{
  img : '<img src="https://dl.dropboxusercontent.com/u/23834858/fotos/alice.jpg"/>',
  title: '<h3>Call Me Now</h3>',
  description: "<h4>It's Free !</h4>",
  content: '<p>Great new pay as you go rates to mobiles and landlines</p>'
},init);



function id(el){
  return document.getElementById(el);
}


function init(e){
  var p = id('cover'),
      t = id('title'),
      i = id('tumb'),
      c = id('content'),
      d = id('description');
  
  TweenLite.from(e, 0.5, {
    borderRadius:'100%',
    width:0,height:0,opacity:0
  });
  
  TweenLite.to(p, 1, {opacity:0}).delay(0.8);
  TweenLite.from(i, 1, {opacity:0}).delay(1);
  TweenLite.from(t, 1, {top:'-500px'}).delay(1.2);
  TweenLite.from(d, 1, {top:'500px'}).delay(1.5);
  TweenLite.from(c, 1, {left:'500px'}).delay(2);
}