/**
    create a new countdown
    @PARAM container the element you want to replace with the countdown
    @PARAM time remaining time in seconds
    @PARAM OPTIONAL po an object containing human-language strings for 'hours,minutes,seconds'
    @PARAM OPTIONAL id set an id for the parent element

*/
var maria_countdown = function (container,time,finishedCb,po,id) {

    if (typeof(id) != 'string') {
        id = '';
    }
    
    if (typeof(po) != 'object') {
        po = {
            'h': 'Hrs',
            'm': 'Min.',
            's': 'sec.'
        };
    }
    
    if (typeof(finishedCb) != 'function') {
        finishedCb = noop;
    }
    
    var myToken = $.maria.uuid();
    
    var writeTime = function () {
        time -= 1;
        if (time <= 0) {
            finishedCb();
            var hours = 0;
            var minutes = 0;
            var seconds = 0;
        } else {
            var thisTimeRemaining = time;
            var hours = Math.floor(thisTimeRemaining/3600);
            thisTimeRemaining -= hours*3600;
            if (hours < 10) hours  = "0"+hours;
            var minutes = Math.floor(thisTimeRemaining/60);
            thisTimeRemaining -= minutes*60;
            if (minutes < 10) minutes  = "0"+minutes;
            var seconds = Math.floor(thisTimeRemaining);
            if (seconds < 10) seconds  = "0"+seconds;
        }
        
        $("#maria_countdown_h_"+myToken+"_value").text(hours);
        $("#maria_countdown_m_"+myToken+"_value").text(minutes);
        $("#maria_countdown_s_"+myToken+"_value").text(seconds);
    }
    
    //create the elements
    var html = "<div id='"+id+"' class='maria_countdown maria_countdown_container'>";
    html += "<div id='maria_countdown_h_"+myToken+"' class='maria_countdown_box maria_countdown_box_hours'>";
    html += "<span id='maria_countdown_h_"+myToken+"_value' class='maria_countdown_box_value maria_countdown_box_hours'></span>";
    html += "<span id='maria_countdown_h_"+myToken+"_descr' class='maria_countdown_box_description maria_countdown_box_hours'>"+po.h+"</span>";
    html += "</div>";
    html += "<div id='maria_countdown_m_"+myToken+"' class='maria_countdown_box maria_countdown_box_minutes'>";
    html += "<span id='maria_countdown_m_"+myToken+"_value' class='maria_countdown_box_value maria_countdown_box_minutes'></span>";
    html += "<span id='maria_countdown_m_"+myToken+"_descr' class='maria_countdown_box_description maria_countdown_box_minutes'>"+po.m+"</span>";
    html += "</div>";
    html += "<div id='maria_countdown_s_"+myToken+"' class='maria_countdown_box maria_countdown_box_seconds'>";
    html += "<span id='maria_countdown_s_"+myToken+"_value' class='maria_countdown_box_value maria_countdown_box_seconds'></span>";
    html += "<span id='maria_countdown_s_"+myToken+"_descr' class='maria_countdown_box_description maria_countdown_box_seconds'>"+po.s+"</span>";
    html += "</div>";
    html += "</div>";
    
    $(container).replaceWith(html);
    
    return setInterval(writeTime,1000);
    
}