{% load i18n %}

<div id="instances" 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="/instances">#</a>
    |
    <a id="list" href="/instances/list">=</a>
</div>



<div id="instancesview" class="standard">

    <div class="instance" id="instance-template" style="display:none">
        <div class="state">
            <div class="status">Running</div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
            <div class="indicator"></div>
        </div>
        <img class="logo" src="static/machines/ubuntu.png" />
        <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="storage">
            Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a>
        </h5>
        <div class="actions">
            <a href="#" class="action">Reboot</a>
            <a href="#" class="action">Shutdown</a>
            <a href="#" class="more">more &hellip;</a>
        </div>
    </div>

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

<div id="instances" 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> Image</li>
			<li><strong>2.</strong> Instance</li>
			<li><strong>3.</strong> Review</li>
		</ul>
		<!-- scrollable items -->
		<div class="items">
			<!-- pages -->
			<div class="page">
                <h2>Select an OS</h2>
                <ul class="tabs">
                    <li><a href="#">standard</a></li>
                    <li><a href="#">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">Cancel</button>
				<button type="button" class="next right">Next &raquo;</button>
            </div>
			<div class="page">
				<h2>Select CPU, RAM and storage</h2>
                <ul>
                    <li>
                        <div class="instance-type">
                            <label for="small">
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
                                <strong>small</strong>
                            </label>
                        </div>
                        <div class="instance-type">      
                            <label for="medium">
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
                                <strong>medium</strong>
                            </label>
                        </div>
                        <div class="instance-type">
                            <label for="large">
                                <input type="radio" id="large" name="instance-type" value="large" />
                                <strong>large</strong>
                            </label>
                        </div>
                        <div class="instance-type">
                            <label for="custom">
                                <input type="radio" name="instance-type" id="custom" value="large" />
                                <strong>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">
                            Cost per hour: 20 credits | Credits currently in account: 10.000
                        </div>
                    </li>
                </ul>
				<button type="button" class="prev">&laquo; Back</button>
				<button type="button" class="next right">Next &raquo;</button>
            </div>
			<div class="page">
				<h2>Confirm your settings</h2>
                <ul>
                    <li class="required">
                        <label>
                            <strong>Instance name</strong>
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
                        </label>
                    </li>
                    <li>
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
                    </li>
                    <li>
                        <strong>CPU:</strong> <span>2 cores</span>
                    </li>
                    <li>
                        <strong>RAM:</strong> <span>1024MB</span>
                    </li>
                    <li>
                        <strong>Storage:</strong> <span>10GB</span>
                    </li>
                    <li>
                        <strong>Cost per hour:</strong> <span>20 credits</span>
                    </li>
                    <li>
                        <strong>Remaining credits:</strong> <span>10.000</span>
                    </li>
                </ul>
				<button type="button" class="prev">&laquo; Back</button>
				<button type="button" class="next right" id="start">Create VM</button>        
            </div>
		</div>
	</div>
</form>

<div class="modal" id="misc">
    <h3>Your VM is being created!</h3>
    <p>Your password is:<strong> sdeEFre</strong></p>
    <p>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',
               };

function update() {

    $("div.running").text('');
    $("div.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 instance = $('#instance-template').clone().attr("id",server.id).fadeIn("slow");
                instance.find("a.name span.name").text(server.name);
                instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');
                instance.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
                instance.find("a.ip span.public").text(String(server.addresses.public));            

                if (server.status == 'BUILD'){
                    instance.find("div.status").text('Building');
                    instance.appendTo("div.running");
                } else if (server.status == 'ACTIVE') {
                    instance.find("div.status").text('Running');
                    instance.appendTo("div.running");
                } else if (server.status == 'SUSPENDED') {
                    instance.find("div.status").text('Terminated');
                    instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
                    instance.appendTo("div.terminated");
                } else {
                    instance.find("div.status").text('Unknown');
                    instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
                    instance.appendTo("div.terminated");
                }


            });
        }
    });

    $.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#instancesview").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#instances-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
    });
    $("#wizard").hide();
    update();
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
});

$("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>