{% load i18n %}

<!-- the standard view -->
<div id="machinesview" class="standard">
    <div id="emptymachineslist">{% trans "You have no virtual machines! Press Create New to create some!" %}</div>
    <div id="spinner"></div>
    <div class="machine" id="machine-template" style="display:none">
        <div class="actions">
            <a href="#" class="action-start">{% trans "Start" %}</a>
            <a href="#" class="action-reboot">{% trans "Reboot" %}</a>
            <a href="#" class="action-shutdown">{% trans "Shutdown" %}</a>
            <a href="#" class="more">{% trans "more &hellip;" %}</a>
        </div>        
        <div class="state">
            <div class="status">{% trans "Running" %}</div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <img class="spinner" style="display:none" src="/static/progress.gif" />
            <img class="wave" style="display:none" src="/static/wave.gif" />
        </div>
        <img class="logo" src="" />
        <a href="#" class="name">
            <h5>Name: <span class="name">node.name</span><span class="rename"></span></h5>
        </a>
        <a href="#" class="ip">
            <h5>IP: <span class="public">node.public_ip</span></h5>
        </a>
        <h5 class="settings">
            {% trans "Show:" %} <a href="#">{% trans "disks" %}</a> | <a href="#">{% trans "networks" %}</a> | <a href="#">{% trans "group" %}</a>
        </h5>

        <div class="confirm_single">
            <button class="yes">{% trans "Confirm" %}</button>
            <button class="no">{% trans "Cancel" %}</button>
        </div>
        <div class="action_error" align="center">
            {% trans "<span class='orange'>Error</span> on" %} <span class="action">error action</span>
            <span class="message"></span>
            <button class="details">Details</button>
        </div>
        <div class="separator"></div>
    </div>

    <div class="running"></div>
    <div id="mini" class="separator"></div>
    <div class="terminated"></div>
</div>

<script>
    
// intercept reboot click 
$("div.actions a.action-reboot").live('click', function(){
    var serverID = $(this).parent().parent().attr("id");
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
    var found = false;
    
    $(this).parent().children('a').removeClass('selected');
    $(this).addClass('selected');
    $(this).parent().addClass('display');
    $(this).parent().parent().find('.action_error').hide();
    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
        if (pending_actions[i][1]==serverID){
            pending_actions[i][0] = reboot;
            found = true
        }
    }
    if (!found) // no pending action for this server was found, so let's just add it to the list
        pending_actions.push([reboot, serverID, serverName])
    update_confirmations();
    return false;
});

// intercept shutdown click
$("div.actions a.action-shutdown").live('click', function(){ 
    var serverID = $(this).parent().parent().attr("id");
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
    var found = false;
    $(this).parent().children('a').removeClass('selected');
    $(this).addClass('selected');
    $(this).parent().addClass('display')
    $(this).parent().parent().find('.action_error').hide();

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
        if (pending_actions[i][1]==serverID){
            pending_actions[i][0] = shutdown;
            found = true
        }
    }
    if (!found) // no pending action for this server was found, so let's just add it to the list 
        pending_actions.push([shutdown, serverID, serverName])
    update_confirmations();
    return false;
});

// intercept start click
$("div.actions a.action-start").live('click', function(){ 
    var serverID = $(this).parent().parent().attr("id");
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
    var found = false;
    $(this).parent().children('a').removeClass('selected');
    $(this).addClass('selected');
    $(this).parent().addClass('display')
    $(this).parent().parent().find('.action_error').hide();

    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
        if (pending_actions[i][1]==serverID){
            pending_actions[i][0] = start;
            found = true
        }
    }
    if (!found) // no pending action for this server was found, so let's just add it to the list
        pending_actions.push([start, serverID, serverName])
    update_confirmations();    
    return false;
});

$("div.confirm_single .yes").live('click', function(){
    var serverID = $(this).parent().parent().attr("id");
    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server execute it
        if (pending_actions[i][1]==serverID){
            action = pending_actions.splice(i,1)[0]; // extract action
            action[0]([action[1]]); // execute action            
        }
    }
    $(this).parent().hide();
    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');
    $(this).parent().parent().children('.state').children('.spinner').show()
    $(this).parent().parent().children('div.actions').removeClass('display');
    update_confirmations();    
    return false;
});

$("div.confirm_single .no").live('click', function(){
    // remove the action from the pending list
    var serverID = $(this).parent().parent().attr("id");
    
    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');
    $(this).parent().parent().children('div.actions').removeClass('display');    
    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server remove it
        if (pending_actions[i][1]==serverID){
            pending_actions.splice(i,1);
        }
    }
    $(this).parent().hide();
    update_confirmations();    
    return false;
});

$("div.action_error .details").live('click', function(){
    // remove the action from the pending list
    ajax_error($(this).parent().children('.message').text());
    $(this).parent().hide();
});


// update the servers list
function update_machines_view(data){
    /* 
    Go through the servers in the input data. Update existing entries, add
    new ones to the list
    */    
    $.each(data.servers, function(i,server){
        
        existing = $('#' + server.id);
        
        // if multiple machines exist in the DOM, delete all but one
        // defensive coding - that shouldn't happen normally
        while (existing.length > 1){
            existing.remove();
        }
        
        // server already exists in DOM
        if (existing.length){
            $("div.machine:last-child").find("div.separator").show();                

            //  if the status is deleted, delete it from the DOM
            if (server.status == 'DELETED') {
                existing.remove();            
                try {
                    console.info(existing.find("a.name span.name").text() + ' removed');
                } catch(err) {}            
            } else if (existing.find(".status").text() != STATUS_MESSAGES[server.status]) {
                
                try { // firebug console logging
                    console.info(existing.find("a.name span.name").text() + ' from ' 
                                + existing.find(".status").text() + ' to ' + STATUS_MESSAGES[server.status]);
                } catch(err) {}
                
                if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&
                    [STATUS_MESSAGES['STOPPED'], STATUS_MESSAGES['ERROR']].indexOf(existing.find(".status").text()) >= 0) {
                    // from stopped to running
                    moved = existing.clone().appendTo(".running");
                    moved.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'.png');
                    existing.remove();
                    existing = moved;
                } else if (['STOPPED','ERROR'].indexOf(server.status) >= 0 &&
                           [STATUS_MESSAGES['ACTIVE'], STATUS_MESSAGES['BUILD'], STATUS_MESSAGES['REBOOT']].indexOf(existing.find(".status").text()) >= 0) {
                    moved = existing.clone().appendTo(".terminated");
                    moved.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'-off.png');
                    existing.remove();
                    existing = moved;
                } 
                existing.find('.spinner').hide();
                existing.find(' .wave').attr('src','static/wave.gif').show();
                setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);         
                existing.find(".status").text(STATUS_MESSAGES[server.status]);
                            
            }
            existing.find("a.name span.name").text(server.name);
            existing.find("a.ip span.public").text(String(server.addresses.public.ip.addr).replace(',',' '));
        } else if (server.status != 'DELETED') {
            // If it does not exist and it's not deleted, we should create it
            var machine = $("#machine-template").clone().attr("id", server.id).fadeIn("slow");
            machine.find("a.name span.name").text(server.name);
            machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'.png');
            machine.find("span.imagetag").text(image_tags[server.imageRef]);
            machine.find("a.ip span.public").text(String(server.addresses.public.ip.addr).replace(',',' '));            
            machine.find(".status").text(STATUS_MESSAGES[server.status]);
            if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) >= 0){
                machine.appendTo(".running");
            } else {
                machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'-off.png');
                machine.appendTo(".terminated");
            }
            //machine.find(' .wave').attr('src','static/wave.gif').show();
            //setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);  
        }
    });

    $("#spinner").hide();
    // show all separators
    $("div.machine div.separator").show();
    // hide the last one
    $("div.machine:last-child").find("div.separator").hide();
    // the separator shows only when running and terminated machines are available
    if ($(".terminated a.name").length > 0 && $(".running a.name").length > 0) {
        $("#mini.separator").fadeIn("slow");
    } else {
        $("#mini.separator").fadeOut("slow");
    }
    // show message in case user has no servers!
    if (servers.length == 0) {
        $("#emptymachineslist").fadeIn("slow");
    }
    
    // set confirm box position
    if (window.innerHeight - 200 < $('#machinesview').height())
        $('.confirm_multiple').addClass('fixed');
    else
        $('.confirm_multiple').removeClass('fixed');
}

// indicate that the requested action was succesfully completed
function display_success(serverID) {

}

// indicate that the requested action was not completed
function display_failure(serverID, status, action) {
    $('#'+serverID+ ' .spinner').hide();
    $('#'+serverID+ ' .action_error .action').text(action);
    $('#'+serverID+ ' .action_error .message').text(status);
    $('#'+serverID+ ' .action_error').show();
    
}

if (images.length == 0) {
    // populate image list
    update_images();
}
if (flavors.length == 0) {
    // configure flavors
    update_flavors(); 
}
// set the label of the multiple buttons 
$('div.confirm_multiple button.yes').text('Confirm All');
$('div.confirm_multiple button.no').text('Cancel All');
// start updating vm list
update_vms(UPDATE_INTERVAL);
</script>