{% load i18n %}

<div id="machines" class="seperator"></div>

<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
<a id="notify" rel="#misc" href="#"></a>
<div id="view-select">
    <a id="standard" class="current" href="/machines">#</a>
    <span class="view-seperator">|</span>
    <a id="list" href="/machines/list">=</a>
</div>

<div id="machinesview" class="standard">
    <div id="spinner"></div>
    <div class="machine" id="machine-template" style="display:none">
        <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>
        </div>
        <img class="logo" src="path/to/logos" />
        <a href="#" class="name">
            <h5>Hostname: <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="actions">
            <a href="#" class="action">{% trans "Reboot" %}</a>
            <a href="#" class="action">{% trans "Shutdown" %}</a>
            <a href="#" class="more">{% trans "more &hellip;" %}</a>
        </div>
        <div class="seperator"></div>
    </div>

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

<div id="machines" class="seperator"></div>

<!-- the form -->
<form action="#">
	<!-- scrollable root element -->
	<div class="modal" id="wizard">
		<!-- status bar -->
		<ul id="status">
			<li class="active"><strong>1.</strong> {% trans "Image" %}</li>
			<li><strong>2.</strong> {% trans "Machine" %}</li>
			<li><strong>3.</strong> {% trans "Review" %}</li>
		</ul>
		<!-- scrollable items -->
		<div class="items">
			<!-- pages -->
			<div class="page">
                <h2>{% trans "Select an OS" %}</h2>
                <ul class="tabs">
                    <li><a href="#">{% trans "standard" %}</a></li>
                    <li><a href="#">{% trans "custom" %}</a></li>
                </ul>
                <div class="panes">
		            <li id="image-template" style="display:none">
			            <label for="image.id"> 
                            <a><div class="image">
                                <img src="static/os_logos/image.logo" class="image-logo"/>
                                <strong class="image-title">image.title</strong>
                                <input class="radio" type="radio" name="image-id" id="image-id" />
                                <br />
                                <span class="description">image.description</span> 
                                <span class="size">?? MB</span>
                                
                            </div></a>
			            </label>
		            </li>
                    <ul class="pane" id="standard-images">
					    <!-- standard images -->
				    </ul>
                    <ul class="pane" id="custom-images">
					    <!-- custom images -->

                    </ul>
                </div>
				<button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button>
				<button type="button" class="next right">{% trans "Next" %} &raquo;</button>
            </div>
			<div class="page">
				<h2>{% trans "Select CPU, RAM and storage" %}</h2>
                <ul>
                    <li>
                        <div class="machine-type">
                            <label for="small">
                                <input type="radio" id="small" name="machine-type" value="small" checked="true" />
                                <strong>{% trans "small" %}</strong>
                            </label>
                        </div>
                        <div class="machine-type">      
                            <label for="medium">
                                <input type="radio" id="medium" name="machine-type" value="medium" />                  
                                <strong>{% trans "medium" %}</strong>
                            </label>
                        </div>
                        <div class="machine-type">
                            <label for="large">
                                <input type="radio" id="large" name="machine-type" value="large" />
                                <strong>{% trans "large" %}</strong>
                            </label>
                        </div>
                        <div class="machine-type">
                            <label for="custom">
                                <input type="radio" name="machine-type" id="custom" value="large" />
                                <strong>{% trans "custom" %}</strong>
                            </label>
                        </div>
                    </li>
                    <li>
			            <label><strong class="sliders">CPU (cores)</strong></label>
                        <input type="range" id="cpu" value="1" max="8" min="1" />
                    </li>
                    <li>
			            <label><strong class="sliders">RAM (MB)</strong></label>
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
                    </li>
                    <li>
		                <label><strong class="sliders">Storage (GB)</strong></label>
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
                    </li>
                    <li>
                        <div class="cost">
                            {% trans "Cost per hour:" %} 20 {% trans "credits" %} | {% trans "Credits currently in account:" %} 10.000
                        </div>
                    </li>
                </ul>
				<button type="button" class="prev">&laquo; {% trans "Back" %}</button>
				<button type="button" class="next right">{% trans "Next" %} &raquo;</button>
            </div>
			<div class="page">
				<h2>{% trans "Confirm your settings" %}</h2>
                <ul>
                    <li class="required">
                        <label>
                            <strong>Machine name</strong>
                            <input type="text" class="text" name="machine_name" value="My Ubuntu 10.04 x86_64 server"/>
                        </label>
                    </li>
                    <li>
                        <strong>{% trans "Image:" %}</strong> <span>Ubuntu 10.04 x86_64 server</span>
                    </li>
                    <li>
                        <strong>{% trans "CPU:" %}</strong> <span>2 cores</span>
                    </li>
                    <li>
                        <strong>{% trans "RAM:" %}</strong> <span>1024MB</span>
                    </li>
                    <li>
                        <strong>{% trans "Storage:" %}</strong> <span>10GB</span>
                    </li>
                    <li>
                        <strong>{% trans "Cost per hour:" %}</strong> <span>20 {% trans "credits" %}</span>
                    </li>
                    <li>
                        <strong>{% trans "Remaining credits:" %}</strong> <span>10.000</span>
                    </li>
                </ul>
				<button type="button" class="prev">&laquo; {% trans "Back" %}</button>
				<button type="button" class="next right" id="start">{% trans "Create VM" %}</button>        
            </div>
		</div>
	</div>
</form>

<div class="modal" id="misc">
    <h3>Your VM is being created!</h3>
    <p>{% trans "Your password is:" %}<strong> sdeEFre</strong></p>
    <p>{% trans "Please copy this! Without it you can not connect to your VM." %}</p>
</div>

<script>
// <![CDATA[ 
var image_tags = {
                1: 'archlinux',
                2: 'centos',
                3: 'debian',
                4: 'freebsd',
                5: 'gentoo',
                6: 'netbsd',
                7: 'openbsd',
                8: 'redhat',
                9: 'slackware',
                10: 'suse',
                11: 'ubuntu',
                12: 'windows',
                20: 'ubuntu',
               };

function update() {

    $(".running").text('');
    $(".terminated").text('');
    $("ul#standard-images").text('');
    $("ul#custom-images").text('');

    $.ajax({
        url: '/api/v1.0/servers/detail',
        type: "GET",
    //    async: false,
        dataType: "json",
        success: function(data) {
            $.each(data.servers, function(i,server){

                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.imageId]+'.png');
                machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
                machine.find("a.ip span.public").text(String(server.addresses.public));            

                if (server.status == 'BUILD'){
                    machine.find(".status").text('Building');
                    machine.appendTo(".running");
                } else if (server.status == 'ACTIVE') {
                    machine.find(".status").text('Running');
                    machine.appendTo(".running");
                } else if (server.status == 'SUSPENDED') {
                    machine.find(".status").text('Terminated');
                    machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
                    machine.appendTo(".terminated");
                    $("#mini.seperator").fadeIn("slow");
                } else {
                    machine.find(".status").text('Unknown');
                    machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
                    machine.appendTo(".terminated");
                }
            });
            $("div.machine:last-child").find("div.seperator").hide();
            $("#spinner").hide();
            $(".list table").tablesorter({ 
                headers: { 0: { sorter: false}, 1: {sorter: false} }, 
                sortMultiSortKey: "ctrlKey" }).show();
            $(".list .actions").show();
        }
    });

    $.ajax({
        url: '/api/v1.0/images/detail',
        type: "GET",
    //    async: false,
        dataType: "json",
        success: function(data) {
            $.each(data.images, function(i,image){
                var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");
                img.find("label").attr('for',"img-radio-" + image.id);
                img.find(".image-title").text(image.name);
                img.find("input.radio").attr('id',"img-radio-" + image.id);
                if (i==0) img.find("input.radio").attr("checked","checked"); 
                img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');
                if (image.serverId) {
                    img.appendTo("ul#custom-images");
                } else {
                    img.appendTo("ul#standard-images");
                }
            });
        }
    });
}

update();

$("#list").click(function(event){
    $("div.standard#machinesview").load($("#list").attr("href"));
    $("a#standard")[0].className += ' activelink'
    this.style.color = '#5f8dd3';
    update(); 
    return false;
});

$("a#standard").click(function(event){
    href=$("a#standard").attr("href");
    $("div.pane#machines-pane").load(href);
    //$("a#standard")[0].className += ' activelink'
    //this.style.color = '#5f8dd3';
    return false;
});

$("ul.tabs").tabs("div.panes ul");

$(":range").rangeinput({progress:true});

function disableSliders() {
    $("#cpu").attr('disabled',true);
    $("#ram").attr('disabled',true);
    $("#storage").attr('disabled',true);
}

$("#custom").click(function(event){
    $("#cpu").attr('disabled',false);
    $("#ram").attr('disabled',false);
    $("#storage").attr('disabled',false);
    $("strong.sliders").style = 'color: #778899;';
});

$("#small").click(function(event){
    $("#cpu").data('rangeinput').setValue(1);
    $("#ram").data('rangeinput').setValue(256);
    $("#storage").data('rangeinput').setValue(5);
});

$("#medium").click(function(event){
    $("#cpu").data('rangeinput').setValue(4);
    $("#ram").data('rangeinput').setValue(1024);
    $("#storage").data('rangeinput').setValue(30);
});

$("#large").click(function(event){
    $("#cpu").data('rangeinput').setValue(8);
    $("#ram").data('rangeinput').setValue(4096);
    $("#storage").data('rangeinput').setValue(80);
});

$("#cancel").click(function(event){
    $("a#create[rel]").overlay().close();
});

$("#start").click(function(event){
    var triggers = $("a#notify").overlay({
	    // some mask tweaks suitable for modal dialogs
	    mask: {
		    color: '#ebecff',
		    opacity: '0.9'
	    },
        top: 'center',
	    closeOnClick: false,
        oneInstance: false,
        load: true,
        onClose: function(event){
            $("div.pane#machines-pane").load($("a#standard").attr("href"));
        }
    });
    $("#wizard").hide();
    update();
});

$("a#create").click(function(event){
    $("#wizard").scrollable().begin();
});

$("#cpu").change(function(event){
    $("#custom").click();
});

$("#ram").change(function(event){
    $("#custom").click();
});

$("#storage").change(function(event){
    $("#custom").click();
});

$(function() { 
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
});

$(function() {
    var root = $("#wizard").scrollable();

    // some variables that we need
    var api = root.scrollable();

    // rangeinput with default configuration
    // validation logic is done inside the onBeforeSeek callback
    api.onBeforeSeek(function(event, i) {
	    // we are going 1 step backwards so no need for validation
	    if (api.getIndex() < i) {
             // 1. get current page
		     var page = root.find(".page").eq(api.getIndex()),
			 // 2. .. and all required fields inside the page
			 inputs = page.find(".required :input").removeClass("error"),
			 // 3. .. which are empty
			 empty = inputs.filter(function() {
				return $(this).val().replace(/\s*/g, '') == '';
			 });
		     // if there are empty fields, then
		    if (empty.length) {
			    // add a CSS class name "error" for empty & required fields
			    empty.addClass("error");
			    // cancel seeking of the scrollable by returning false
			    return false;
		    // everything is good
		    } 
	    }
	    // update status bar
	    $("#status li").removeClass("active").eq(i).addClass("active");
    });

    // if tab is pressed on the next button seek to next page
    root.find("button.next").keydown(function(e) {
	    if (e.keyCode == 9) {
		    // seeks to next tab by executing our validation routine
		    api.next();
		    e.preventDefault();
	    }
    });
// ]]>
});
</script>