Statistics
| Branch: | Tag: | Revision:

root / ui / templates / instances.html @ ec06b07c

History | View | Annotate | Download (14 kB)

1 edda4d30 Markos Gogoulos
{% load i18n %}
2 edda4d30 Markos Gogoulos
3 e55b8703 Christodoulos Psaltis
<div id="instances" class="seperator"></div>
4 e55b8703 Christodoulos Psaltis
5 edda4d30 Markos Gogoulos
<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
6 ec06b07c Dimitris Moraitis
<a id="notify" rel="#misc" href="#"></a>
7 e55b8703 Christodoulos Psaltis
<div id="view-select">
8 ec06b07c Dimitris Moraitis
    <a id="standard" class="current" href="/instances">#</a>
9 e55b8703 Christodoulos Psaltis
    |
10 e55b8703 Christodoulos Psaltis
    <a id="list" href="/instances/list">=</a>
11 e55b8703 Christodoulos Psaltis
</div>
12 e55b8703 Christodoulos Psaltis
13 ec06b07c Dimitris Moraitis
14 ec06b07c Dimitris Moraitis
15 b303ba05 Christodoulos Psaltis
<div id="instancesview" class="standard">
16 e55b8703 Christodoulos Psaltis
17 ec06b07c Dimitris Moraitis
    <div class="instance" id="instance-template" style="display:none">
18 ec06b07c Dimitris Moraitis
        <div class="state">
19 ec06b07c Dimitris Moraitis
            <div class="status">Running</div>
20 ec06b07c Dimitris Moraitis
            <div class="indicator"></div>
21 ec06b07c Dimitris Moraitis
            <div class="indicator"></div>
22 ec06b07c Dimitris Moraitis
            <div class="indicator"></div>
23 ec06b07c Dimitris Moraitis
            <div class="indicator"></div>
24 ec06b07c Dimitris Moraitis
        </div>
25 ec06b07c Dimitris Moraitis
        <img class="logo" src="static/machines/ubuntu.png" />
26 ec06b07c Dimitris Moraitis
        <a href="#" class="name">
27 ec06b07c Dimitris Moraitis
            <h5>Hostname: <span class="name">node.name</span><span class="rename"></span></h5>
28 ec06b07c Dimitris Moraitis
        </a>
29 ec06b07c Dimitris Moraitis
        <a href="#" class="ip">
30 ec06b07c Dimitris Moraitis
            <h5>IP: <span class="public">node.public_ip</span></h5>
31 ec06b07c Dimitris Moraitis
        </a>
32 ec06b07c Dimitris Moraitis
        <h5 class="storage">
33 ec06b07c Dimitris Moraitis
            Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a>
34 ec06b07c Dimitris Moraitis
        </h5>
35 ec06b07c Dimitris Moraitis
        <div class="actions">
36 ec06b07c Dimitris Moraitis
            <a href="#" class="action">Reboot</a>
37 ec06b07c Dimitris Moraitis
            <a href="#" class="action">Shutdown</a>
38 ec06b07c Dimitris Moraitis
            <a href="#" class="more">more &hellip;</a>
39 ec06b07c Dimitris Moraitis
        </div>
40 ec06b07c Dimitris Moraitis
    </div>
41 ec06b07c Dimitris Moraitis
42 89976b6c Christodoulos Psaltis
    <div class="running">
43 ea3cb4e4 Christodoulos Psaltis
    </div>
44 e55b8703 Christodoulos Psaltis
    <div id="mini" class="seperator"></div>
45 ea3cb4e4 Christodoulos Psaltis
    <div class="terminated">
46 89976b6c Christodoulos Psaltis
    </div>
47 cc7c5902 Dimitris Moraitis
</div>
48 cc7c5902 Dimitris Moraitis
49 e55b8703 Christodoulos Psaltis
<div id="instances" class="seperator"></div>
50 e55b8703 Christodoulos Psaltis
51 cc7c5902 Dimitris Moraitis
<!-- the form -->
52 cc7c5902 Dimitris Moraitis
<form action="#">
53 cc7c5902 Dimitris Moraitis
        <!-- scrollable root element -->
54 cc7c5902 Dimitris Moraitis
        <div class="modal" id="wizard">
55 cc7c5902 Dimitris Moraitis
                <!-- status bar -->
56 cc7c5902 Dimitris Moraitis
                <ul id="status">
57 e55b8703 Christodoulos Psaltis
                        <li class="active"><strong>1.</strong> Image</li>
58 e55b8703 Christodoulos Psaltis
                        <li><strong>2.</strong> Instance</li>
59 cc7c5902 Dimitris Moraitis
                        <li><strong>3.</strong> Review</li>
60 cc7c5902 Dimitris Moraitis
                </ul>
61 cc7c5902 Dimitris Moraitis
                <!-- scrollable items -->
62 cc7c5902 Dimitris Moraitis
                <div class="items">
63 cc7c5902 Dimitris Moraitis
                        <!-- pages -->
64 cc7c5902 Dimitris Moraitis
                        <div class="page">
65 e55b8703 Christodoulos Psaltis
                <h2>Select an OS</h2>
66 cc7c5902 Dimitris Moraitis
                <ul class="tabs">
67 cc7c5902 Dimitris Moraitis
                    <li><a href="#">standard</a></li>
68 cc7c5902 Dimitris Moraitis
                    <li><a href="#">custom</a></li>
69 cc7c5902 Dimitris Moraitis
                </ul>
70 89976b6c Christodoulos Psaltis
                <div class="panes">
71 ec06b07c Dimitris Moraitis
                            <li id="image-template" style="display:none">
72 ec06b07c Dimitris Moraitis
                                    <label for="image.id"> 
73 ec06b07c Dimitris Moraitis
                            <a><div class="image">
74 ec06b07c Dimitris Moraitis
                                <img src="static/os_logos/image.logo" class="image-logo"/>
75 ec06b07c Dimitris Moraitis
                                <strong class="image-title">image.title</strong>
76 ec06b07c Dimitris Moraitis
                                <input class="radio" type="radio" name="image-id" id="image-id" />
77 ec06b07c Dimitris Moraitis
                                <br />
78 ec06b07c Dimitris Moraitis
                                <span class="description">image.description</span> 
79 ec06b07c Dimitris Moraitis
                                <span class="size">?? MB</span>
80 ec06b07c Dimitris Moraitis
                                
81 ec06b07c Dimitris Moraitis
                            </div></a>
82 ec06b07c Dimitris Moraitis
                                    </label>
83 ec06b07c Dimitris Moraitis
                            </li>
84 ec06b07c Dimitris Moraitis
                    <ul class="pane" id="standard-images">
85 cc7c5902 Dimitris Moraitis
                                            <!-- standard images -->
86 cc7c5902 Dimitris Moraitis
                                    </ul>
87 ec06b07c Dimitris Moraitis
                    <ul class="pane" id="custom-images">
88 cc7c5902 Dimitris Moraitis
                                            <!-- custom images -->
89 ec06b07c Dimitris Moraitis
90 cc7c5902 Dimitris Moraitis
                    </ul>
91 cc7c5902 Dimitris Moraitis
                </div>
92 cc7c5902 Dimitris Moraitis
                                <button type="button" class="prev" id="cancel">Cancel</button>
93 cc7c5902 Dimitris Moraitis
                                <button type="button" class="next right">Next &raquo;</button>
94 cc7c5902 Dimitris Moraitis
            </div>
95 cc7c5902 Dimitris Moraitis
                        <div class="page">
96 e55b8703 Christodoulos Psaltis
                                <h2>Select CPU, RAM and storage</h2>
97 cc7c5902 Dimitris Moraitis
                <ul>
98 cc7c5902 Dimitris Moraitis
                    <li>
99 cc7c5902 Dimitris Moraitis
                        <div class="instance-type">
100 cc7c5902 Dimitris Moraitis
                            <label for="small">
101 cc7c5902 Dimitris Moraitis
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
102 cc7c5902 Dimitris Moraitis
                                <strong>small</strong>
103 cc7c5902 Dimitris Moraitis
                            </label>
104 cc7c5902 Dimitris Moraitis
                        </div>
105 cc7c5902 Dimitris Moraitis
                        <div class="instance-type">      
106 cc7c5902 Dimitris Moraitis
                            <label for="medium">
107 cc7c5902 Dimitris Moraitis
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
108 cc7c5902 Dimitris Moraitis
                                <strong>medium</strong>
109 cc7c5902 Dimitris Moraitis
                            </label>
110 cc7c5902 Dimitris Moraitis
                        </div>
111 cc7c5902 Dimitris Moraitis
                        <div class="instance-type">
112 cc7c5902 Dimitris Moraitis
                            <label for="large">
113 cc7c5902 Dimitris Moraitis
                                <input type="radio" id="large" name="instance-type" value="large" />
114 cc7c5902 Dimitris Moraitis
                                <strong>large</strong>
115 cc7c5902 Dimitris Moraitis
                            </label>
116 cc7c5902 Dimitris Moraitis
                        </div>
117 cc7c5902 Dimitris Moraitis
                        <div class="instance-type">
118 cc7c5902 Dimitris Moraitis
                            <label for="custom">
119 cc7c5902 Dimitris Moraitis
                                <input type="radio" name="instance-type" id="custom" value="large" />
120 cc7c5902 Dimitris Moraitis
                                <strong>custom</strong>
121 cc7c5902 Dimitris Moraitis
                            </label>
122 cc7c5902 Dimitris Moraitis
                        </div>
123 cc7c5902 Dimitris Moraitis
                    </li>
124 cc7c5902 Dimitris Moraitis
                    <li>
125 cc7c5902 Dimitris Moraitis
                                    <label><strong class="sliders">CPU (cores)</strong></label>
126 cc7c5902 Dimitris Moraitis
                        <input type="range" id="cpu" value="1" max="8" min="1" />
127 cc7c5902 Dimitris Moraitis
                    </li>
128 cc7c5902 Dimitris Moraitis
                    <li>
129 cc7c5902 Dimitris Moraitis
                                    <label><strong class="sliders">RAM (MB)</strong></label>
130 cc7c5902 Dimitris Moraitis
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
131 cc7c5902 Dimitris Moraitis
                    </li>
132 cc7c5902 Dimitris Moraitis
                    <li>
133 cc7c5902 Dimitris Moraitis
                                <label><strong class="sliders">Storage (GB)</strong></label>
134 cc7c5902 Dimitris Moraitis
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
135 cc7c5902 Dimitris Moraitis
                    </li>
136 cc7c5902 Dimitris Moraitis
                    <li>
137 cc7c5902 Dimitris Moraitis
                        <div class="cost">
138 e55b8703 Christodoulos Psaltis
                            Cost per hour: 20 credits | Credits currently in account: 10.000
139 cc7c5902 Dimitris Moraitis
                        </div>
140 cc7c5902 Dimitris Moraitis
                    </li>
141 cc7c5902 Dimitris Moraitis
                </ul>
142 cc7c5902 Dimitris Moraitis
                                <button type="button" class="prev">&laquo; Back</button>
143 cc7c5902 Dimitris Moraitis
                                <button type="button" class="next right">Next &raquo;</button>
144 cc7c5902 Dimitris Moraitis
            </div>
145 cc7c5902 Dimitris Moraitis
                        <div class="page">
146 e55b8703 Christodoulos Psaltis
                                <h2>Confirm your settings</h2>
147 cc7c5902 Dimitris Moraitis
                <ul>
148 cc7c5902 Dimitris Moraitis
                    <li class="required">
149 cc7c5902 Dimitris Moraitis
                        <label>
150 e55b8703 Christodoulos Psaltis
                            <strong>Instance name</strong>
151 cc7c5902 Dimitris Moraitis
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
152 cc7c5902 Dimitris Moraitis
                        </label>
153 cc7c5902 Dimitris Moraitis
                    </li>
154 cc7c5902 Dimitris Moraitis
                    <li>
155 cc7c5902 Dimitris Moraitis
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
156 cc7c5902 Dimitris Moraitis
                    </li>
157 cc7c5902 Dimitris Moraitis
                    <li>
158 cc7c5902 Dimitris Moraitis
                        <strong>CPU:</strong> <span>2 cores</span>
159 cc7c5902 Dimitris Moraitis
                    </li>
160 cc7c5902 Dimitris Moraitis
                    <li>
161 cc7c5902 Dimitris Moraitis
                        <strong>RAM:</strong> <span>1024MB</span>
162 cc7c5902 Dimitris Moraitis
                    </li>
163 cc7c5902 Dimitris Moraitis
                    <li>
164 cc7c5902 Dimitris Moraitis
                        <strong>Storage:</strong> <span>10GB</span>
165 cc7c5902 Dimitris Moraitis
                    </li>
166 cc7c5902 Dimitris Moraitis
                    <li>
167 cc7c5902 Dimitris Moraitis
                        <strong>Cost per hour:</strong> <span>20 credits</span>
168 cc7c5902 Dimitris Moraitis
                    </li>
169 cc7c5902 Dimitris Moraitis
                    <li>
170 cc7c5902 Dimitris Moraitis
                        <strong>Remaining credits:</strong> <span>10.000</span>
171 cc7c5902 Dimitris Moraitis
                    </li>
172 cc7c5902 Dimitris Moraitis
                </ul>
173 cc7c5902 Dimitris Moraitis
                                <button type="button" class="prev">&laquo; Back</button>
174 cc7c5902 Dimitris Moraitis
                                <button type="button" class="next right" id="start">Create VM</button>        
175 cc7c5902 Dimitris Moraitis
            </div>
176 cc7c5902 Dimitris Moraitis
                </div>
177 cc7c5902 Dimitris Moraitis
        </div>
178 cc7c5902 Dimitris Moraitis
</form>
179 cc7c5902 Dimitris Moraitis
180 cc7c5902 Dimitris Moraitis
<div class="modal" id="misc">
181 cc7c5902 Dimitris Moraitis
    <h3>Your VM is being created!</h3>
182 cc7c5902 Dimitris Moraitis
    <p>Your password is:<strong> sdeEFre</strong></p>
183 cc7c5902 Dimitris Moraitis
    <p>Please copy this! Without it you can not connect to your VM.</p>
184 cc7c5902 Dimitris Moraitis
</div>
185 cc7c5902 Dimitris Moraitis
186 cc7c5902 Dimitris Moraitis
<script>
187 cc7c5902 Dimitris Moraitis
// <![CDATA[ 
188 ec06b07c Dimitris Moraitis
var image_tags = {
189 ec06b07c Dimitris Moraitis
                1: 'archlinux',
190 ec06b07c Dimitris Moraitis
                2: 'centos',
191 ec06b07c Dimitris Moraitis
                3: 'debian',
192 ec06b07c Dimitris Moraitis
                4: 'freebsd',
193 ec06b07c Dimitris Moraitis
                5: 'gentoo',
194 ec06b07c Dimitris Moraitis
                6: 'netbsd',
195 ec06b07c Dimitris Moraitis
                7: 'openbsd',
196 ec06b07c Dimitris Moraitis
                8: 'redhat',
197 ec06b07c Dimitris Moraitis
                9: 'slackware',
198 ec06b07c Dimitris Moraitis
                10: 'suse',
199 ec06b07c Dimitris Moraitis
                11: 'ubuntu',
200 ec06b07c Dimitris Moraitis
                12: 'windows',
201 ec06b07c Dimitris Moraitis
               };
202 ec06b07c Dimitris Moraitis

203 ec06b07c Dimitris Moraitis
function update() {
204 ec06b07c Dimitris Moraitis

205 ec06b07c Dimitris Moraitis
    $("div.running").text('');
206 ec06b07c Dimitris Moraitis
    $("div.terminated").text('');
207 ec06b07c Dimitris Moraitis
    $("ul#standard-images").text('');
208 ec06b07c Dimitris Moraitis
    $("ul#custom-images").text('');
209 ec06b07c Dimitris Moraitis

210 ec06b07c Dimitris Moraitis
    $.ajax({
211 ec06b07c Dimitris Moraitis
        url: '/api/v1.0/servers/detail',
212 ec06b07c Dimitris Moraitis
        type: "GET",
213 ec06b07c Dimitris Moraitis
    //    async: false,
214 ec06b07c Dimitris Moraitis
        dataType: "json",
215 ec06b07c Dimitris Moraitis
        success: function(data) {
216 ec06b07c Dimitris Moraitis
            $.each(data.servers, function(i,server){
217 ec06b07c Dimitris Moraitis
                var instance = $('#instance-template').clone().attr("id",server.id).fadeIn("slow");
218 ec06b07c Dimitris Moraitis
                instance.find("a.name span.name").text(server.name);
219 ec06b07c Dimitris Moraitis
                instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');
220 ec06b07c Dimitris Moraitis
                instance.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
221 ec06b07c Dimitris Moraitis
                instance.find("a.ip span.public").text(String(server.addresses.public));            
222 cc7c5902 Dimitris Moraitis

223 ec06b07c Dimitris Moraitis
                if (server.status == 'BUILD'){
224 ec06b07c Dimitris Moraitis
                    instance.find("div.status").text('Building');
225 ec06b07c Dimitris Moraitis
                    instance.appendTo("div.running");
226 ec06b07c Dimitris Moraitis
                } else if (server.status == 'ACTIVE') {
227 ec06b07c Dimitris Moraitis
                    instance.find("div.status").text('Running');
228 ec06b07c Dimitris Moraitis
                    instance.appendTo("div.running");
229 ec06b07c Dimitris Moraitis
                } else if (server.status == 'SUSPENDED') {
230 ec06b07c Dimitris Moraitis
                    instance.find("div.status").text('Terminated');
231 ec06b07c Dimitris Moraitis
                    instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
232 ec06b07c Dimitris Moraitis
                    instance.appendTo("div.terminated");
233 ec06b07c Dimitris Moraitis
                } else {
234 ec06b07c Dimitris Moraitis
                    instance.find("div.status").text('Unknown');
235 ec06b07c Dimitris Moraitis
                    instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
236 ec06b07c Dimitris Moraitis
                    instance.appendTo("div.terminated");
237 ec06b07c Dimitris Moraitis
                }
238 ec06b07c Dimitris Moraitis

239 ec06b07c Dimitris Moraitis

240 ec06b07c Dimitris Moraitis
            });
241 ec06b07c Dimitris Moraitis
        }
242 ec06b07c Dimitris Moraitis
    });
243 ec06b07c Dimitris Moraitis

244 ec06b07c Dimitris Moraitis
    $.ajax({
245 ec06b07c Dimitris Moraitis
        url: '/api/v1.0/images/detail',
246 ec06b07c Dimitris Moraitis
        type: "GET",
247 ec06b07c Dimitris Moraitis
    //    async: false,
248 ec06b07c Dimitris Moraitis
        dataType: "json",
249 ec06b07c Dimitris Moraitis
        success: function(data) {
250 ec06b07c Dimitris Moraitis
            $.each(data.images, function(i,image){
251 ec06b07c Dimitris Moraitis
                var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");
252 ec06b07c Dimitris Moraitis
                img.find("label").attr('for',"img-radio-" + image.id);
253 ec06b07c Dimitris Moraitis
                img.find(".image-title").text(image.name);
254 ec06b07c Dimitris Moraitis
                img.find("input.radio").attr('id',"img-radio-" + image.id);
255 ec06b07c Dimitris Moraitis
                if (i==0) img.find("input.radio").attr("checked","checked"); 
256 ec06b07c Dimitris Moraitis
                img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');
257 ec06b07c Dimitris Moraitis
                if (image.serverId) {
258 ec06b07c Dimitris Moraitis
                    img.appendTo("ul#custom-images");
259 ec06b07c Dimitris Moraitis
                } else {
260 ec06b07c Dimitris Moraitis
                    img.appendTo("ul#standard-images");
261 ec06b07c Dimitris Moraitis
                }
262 ec06b07c Dimitris Moraitis
            });
263 ec06b07c Dimitris Moraitis
        }
264 ec06b07c Dimitris Moraitis
    });
265 ec06b07c Dimitris Moraitis
}
266 ec06b07c Dimitris Moraitis
update();
267 cc7c5902 Dimitris Moraitis
$("#list").click(function(event){
268 ec06b07c Dimitris Moraitis
    $("div.standard#instancesview").load($("#list").attr("href"));
269 e55b8703 Christodoulos Psaltis
    $("a#standard")[0].className += ' activelink'
270 e55b8703 Christodoulos Psaltis
    this.style.color = '#5f8dd3';
271 ec06b07c Dimitris Moraitis
    update(); 
272 ec06b07c Dimitris Moraitis
    return false;
273 ec06b07c Dimitris Moraitis
});
274 ec06b07c Dimitris Moraitis

275 ec06b07c Dimitris Moraitis
$("a#standard").click(function(event){
276 ec06b07c Dimitris Moraitis
    href=$("a#standard").attr("href");
277 ec06b07c Dimitris Moraitis
    $("div.pane#instances-pane").load(href);
278 ec06b07c Dimitris Moraitis
    //$("a#standard")[0].className += ' activelink'
279 ec06b07c Dimitris Moraitis
    //this.style.color = '#5f8dd3';
280 cc7c5902 Dimitris Moraitis
    return false;
281 cc7c5902 Dimitris Moraitis
});
282 cc7c5902 Dimitris Moraitis

283 cc7c5902 Dimitris Moraitis
$("ul.tabs").tabs("div.panes ul");
284 cc7c5902 Dimitris Moraitis

285 3141976d Christodoulos Psaltis
$(":range").rangeinput({progress:true});
286 cc7c5902 Dimitris Moraitis

287 cc7c5902 Dimitris Moraitis
function disableSliders() {
288 cc7c5902 Dimitris Moraitis
    $("#cpu").attr('disabled',true);
289 cc7c5902 Dimitris Moraitis
    $("#ram").attr('disabled',true);
290 cc7c5902 Dimitris Moraitis
    $("#storage").attr('disabled',true);
291 cc7c5902 Dimitris Moraitis
}
292 cc7c5902 Dimitris Moraitis

293 cc7c5902 Dimitris Moraitis
$("#custom").click(function(event){
294 cc7c5902 Dimitris Moraitis
    $("#cpu").attr('disabled',false);
295 cc7c5902 Dimitris Moraitis
    $("#ram").attr('disabled',false);
296 cc7c5902 Dimitris Moraitis
    $("#storage").attr('disabled',false);
297 cc7c5902 Dimitris Moraitis
    $("strong.sliders").style = 'color: #778899;';
298 cc7c5902 Dimitris Moraitis
});
299 cc7c5902 Dimitris Moraitis

300 cc7c5902 Dimitris Moraitis
$("#small").click(function(event){
301 cc7c5902 Dimitris Moraitis
    $("#cpu").data('rangeinput').setValue(1);
302 cc7c5902 Dimitris Moraitis
    $("#ram").data('rangeinput').setValue(256);
303 cc7c5902 Dimitris Moraitis
    $("#storage").data('rangeinput').setValue(5);
304 cc7c5902 Dimitris Moraitis
});
305 cc7c5902 Dimitris Moraitis

306 cc7c5902 Dimitris Moraitis
$("#medium").click(function(event){
307 cc7c5902 Dimitris Moraitis
    $("#cpu").data('rangeinput').setValue(4);
308 cc7c5902 Dimitris Moraitis
    $("#ram").data('rangeinput').setValue(1024);
309 cc7c5902 Dimitris Moraitis
    $("#storage").data('rangeinput').setValue(30);
310 cc7c5902 Dimitris Moraitis
});
311 cc7c5902 Dimitris Moraitis

312 cc7c5902 Dimitris Moraitis
$("#large").click(function(event){
313 cc7c5902 Dimitris Moraitis
    $("#cpu").data('rangeinput').setValue(8);
314 cc7c5902 Dimitris Moraitis
    $("#ram").data('rangeinput').setValue(4096);
315 cc7c5902 Dimitris Moraitis
    $("#storage").data('rangeinput').setValue(80);
316 cc7c5902 Dimitris Moraitis
});
317 cc7c5902 Dimitris Moraitis

318 cc7c5902 Dimitris Moraitis
$("#cancel").click(function(event){
319 cc7c5902 Dimitris Moraitis
    $("a#create[rel]").overlay().close();
320 cc7c5902 Dimitris Moraitis
});
321 cc7c5902 Dimitris Moraitis

322 cc7c5902 Dimitris Moraitis
$("#start").click(function(event){
323 cc7c5902 Dimitris Moraitis

324 ec06b07c Dimitris Moraitis
    var triggers = $("a#notify").overlay({
325 cc7c5902 Dimitris Moraitis
            // some mask tweaks suitable for modal dialogs
326 cc7c5902 Dimitris Moraitis
            mask: {
327 cc7c5902 Dimitris Moraitis
                    color: '#ebecff',
328 cc7c5902 Dimitris Moraitis
                    opacity: '0.9'
329 cc7c5902 Dimitris Moraitis
            },
330 cc7c5902 Dimitris Moraitis
        top: 'center',
331 ec06b07c Dimitris Moraitis
            closeOnClick: false,
332 ec06b07c Dimitris Moraitis
        oneInstance: false,
333 ec06b07c Dimitris Moraitis
        load: true
334 cc7c5902 Dimitris Moraitis
    });
335 ec06b07c Dimitris Moraitis
    $("#wizard").hide();
336 ec06b07c Dimitris Moraitis
    update();
337 ec06b07c Dimitris Moraitis
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
338 cc7c5902 Dimitris Moraitis
});
339 cc7c5902 Dimitris Moraitis

340 cc7c5902 Dimitris Moraitis
$("a#create").click(function(event){
341 cc7c5902 Dimitris Moraitis
    $("#wizard").scrollable().begin();
342 cc7c5902 Dimitris Moraitis
});
343 cc7c5902 Dimitris Moraitis

344 cc7c5902 Dimitris Moraitis
$("#cpu").change(function(event){
345 cc7c5902 Dimitris Moraitis
    $("#custom").click();
346 cc7c5902 Dimitris Moraitis
});
347 cc7c5902 Dimitris Moraitis

348 cc7c5902 Dimitris Moraitis
$("#ram").change(function(event){
349 cc7c5902 Dimitris Moraitis
    $("#custom").click();
350 cc7c5902 Dimitris Moraitis
});
351 cc7c5902 Dimitris Moraitis

352 cc7c5902 Dimitris Moraitis
$("#storage").change(function(event){
353 cc7c5902 Dimitris Moraitis
    $("#custom").click();
354 cc7c5902 Dimitris Moraitis
});
355 cc7c5902 Dimitris Moraitis

356 cc7c5902 Dimitris Moraitis
$(function() { 
357 ec06b07c Dimitris Moraitis
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
358 cc7c5902 Dimitris Moraitis
});
359 cc7c5902 Dimitris Moraitis

360 cc7c5902 Dimitris Moraitis
$(function() {
361 cc7c5902 Dimitris Moraitis
    var root = $("#wizard").scrollable();
362 cc7c5902 Dimitris Moraitis

363 cc7c5902 Dimitris Moraitis
    // some variables that we need
364 cc7c5902 Dimitris Moraitis
    var api = root.scrollable();
365 cc7c5902 Dimitris Moraitis

366 cc7c5902 Dimitris Moraitis
    // rangeinput with default configuration
367 cc7c5902 Dimitris Moraitis
    // validation logic is done inside the onBeforeSeek callback
368 cc7c5902 Dimitris Moraitis
    api.onBeforeSeek(function(event, i) {
369 cc7c5902 Dimitris Moraitis
            // we are going 1 step backwards so no need for validation
370 cc7c5902 Dimitris Moraitis
            if (api.getIndex() < i) {
371 cc7c5902 Dimitris Moraitis
             // 1. get current page
372 cc7c5902 Dimitris Moraitis
                     var page = root.find(".page").eq(api.getIndex()),
373 cc7c5902 Dimitris Moraitis
                         // 2. .. and all required fields inside the page
374 cc7c5902 Dimitris Moraitis
                         inputs = page.find(".required :input").removeClass("error"),
375 cc7c5902 Dimitris Moraitis
                         // 3. .. which are empty
376 cc7c5902 Dimitris Moraitis
                         empty = inputs.filter(function() {
377 cc7c5902 Dimitris Moraitis
                                return $(this).val().replace(/\s*/g, '') == '';
378 cc7c5902 Dimitris Moraitis
                         });
379 cc7c5902 Dimitris Moraitis
                     // if there are empty fields, then
380 cc7c5902 Dimitris Moraitis
                    if (empty.length) {
381 cc7c5902 Dimitris Moraitis
                            // add a CSS class name "error" for empty & required fields
382 cc7c5902 Dimitris Moraitis
                            empty.addClass("error");
383 cc7c5902 Dimitris Moraitis
                            // cancel seeking of the scrollable by returning false
384 cc7c5902 Dimitris Moraitis
                            return false;
385 cc7c5902 Dimitris Moraitis
                    // everything is good
386 cc7c5902 Dimitris Moraitis
                    } 
387 cc7c5902 Dimitris Moraitis
            }
388 cc7c5902 Dimitris Moraitis
            // update status bar
389 cc7c5902 Dimitris Moraitis
            $("#status li").removeClass("active").eq(i).addClass("active");
390 cc7c5902 Dimitris Moraitis
    });
391 cc7c5902 Dimitris Moraitis

392 cc7c5902 Dimitris Moraitis
    // if tab is pressed on the next button seek to next page
393 cc7c5902 Dimitris Moraitis
    root.find("button.next").keydown(function(e) {
394 cc7c5902 Dimitris Moraitis
            if (e.keyCode == 9) {
395 cc7c5902 Dimitris Moraitis
                    // seeks to next tab by executing our validation routine
396 cc7c5902 Dimitris Moraitis
                    api.next();
397 cc7c5902 Dimitris Moraitis
                    e.preventDefault();
398 cc7c5902 Dimitris Moraitis
            }
399 cc7c5902 Dimitris Moraitis
    });
400 cc7c5902 Dimitris Moraitis
// ]]>
401 cc7c5902 Dimitris Moraitis
});
402 cc7c5902 Dimitris Moraitis
</script>