{% extends FUNC_BASE_HTML %}
{% load i18n %}
{% load utils %}



{% block css %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery/ui/1.11.1/themes/smoothness/jquery-ui.min.css" />
{{ block.super }}
<style type="text/css">
<!--
.item input {
	vertical-align: middle;
}
.item button {
	vertical-align: middle;
	padding: 0;
	border: 0;
}
.imgtxtbtn {
	cursor: pointer;
}
.imgtxtbtn div {
	display: table-cell;
	margin: 0;
	vertical-align: middle;
}
.imgtxtbtn img {
	height: 1px;
	margin-right: 5px;
}
.msgarea {
	background-color: #ccc;
	border: 1px solid #aaa;
	width: 92%;
	margin: 3px auto;
	padding: 1em;
}

{# #{{ form.date.auto_id }} { width: 100px; } #}
#{{ form.time.auto_id }} { width: 100px; }
-->
</style>
{% endblock css %}



{% block js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/1.10.2/jquery-1.10.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL|add:"js/jquery/ui/1.11.1/jquery.ui.cWidget.js"|with_version }}"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/ui/1.11.1/i18n/datepicker-{{ locale }}.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/ui/1.11.1/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/status.js"></script>
<script type="text/javascript">
<!--
(function($) {
$(function() {

	$('#id_gethostlist img').height($('#{{ form.src.auto_id }}').height());

	(new Status('../status/', 'id_status', {
		'interval': 5 * 1000,
		'success': function(data, dataType) {
			var html = data.status || '-';
			html = '<span>'+ html +'</span>';
			html = html +'<ul style="font-size:88%;margin-left:1em;">';
			html = data.hostname ? (html +'<li>{% trans "Migration: Host Name" %}: '+ data.hostname +'</li>') : (html);
			html = data.product ? (html +'<li>{% trans "Migration: Product Name" %}: '+ data.product +'</li>') : (html);
			html = data.starttime ? (html +'<li>{% trans "Migration: Start Time" %}: '+ data.starttime +'</li>') : (html);
			html = data.endtime ? (html +'<li>{% trans "Migration: End Time" %}: '+ data.endtime +'</li>') : (html);
			html = data.elapsedtime ? (html +'<li>{% trans "Migration: Elapsed Time" %}: '+ data.elapsedtime +'</li>') : (html);
			html = data.progress ? (html +'<li>{% trans "Migration: Migration Progress" %}: '+ data.progress +'</li>') : (html);
			html = html +'</ul>'
			this._elem.html(html);
			parent.iFrameResize();
		}
	})).get();

	function chgSwitch() {
		$.ajax({
			type:'GET',
			url:'../success/',
			cache:false,
			dataType:'json',
			timeout:300*1000
		})
		.success(function(data, ts, xhr) {
			$('#id_switch').prop('disabled', !data.success);
		})
		.error(function(xhr, ts, err) {
			$('#id_switch').prop('disabled', false);
		})
		.complete(function() {
			setTimeout(function() { chgSwitch(); }, 3000);
		});
	}
	chgSwitch();

	$('#{{ form.date.auto_id }}').datepicker({
			showOn: 'button',
			buttonImage: '{{ STATIC_URL }}img/pkg/migration/cal.png',
			autoSize: true,
			dateFormat: '{{ form.date.field.input_formats.0 }}'
					.replace('%y', 'y')
					.replace('%Y', 'yy')
					.replace('%m', 'mm')
					.replace('%d', 'dd')});
	$('#{{ form.time.auto_id }}').timespinner({step: 5});

	function chgDisp(disp) {
		var $line = $('#id_scheline');
		var speed = 0;
		var callback = function() { parent.iFrameResize(); };
		if (disp) { $line.show(speed, callback); }
		else { $line.hide(speed, callback); }
	}
	$('input[name="{{ form.sche.name }}"]:radio').on('change', function(e) {
		var disp = $('input[name="{{ form.sche.name }}"]:radio:checked').val() == 'True';
		chgDisp(disp);
	}).trigger('change');



	var $acinput = $('#{{ form.src.auto_id }}');
	$acinput
	.autocomplete({
		minLength:0,
		source:[{
			value: '',
			label: '{% trans "NAShift: Now Getting..." %}'}]
	})
	.on('click', function(e) {
		$(this).autocomplete('search', '');
	});
	function getSource() {
		$('#id_gethostlist img').attr('src', '/static/img/pkg/migration/spin_2.gif');
		$.ajax({
			type:'GET',
			url:'../hostlist/',
			cache:false,
			dataType:'json',
			timeout:300*1000
		})
		.success(function(datalist, ts, xhr) {
			$acinput.autocomplete('option', 'source', datalist);
		})
		.error(function(xhr, ts, err) {
			$acinput.autocomplete('option', 'source', [{
				value:'',
				label:'{% trans "Migration: Get Error" %}'}]);
		})
		.complete(function() {
			$('#id_gethostlist img').attr('src', '/static/img/pkg/migration/spin_1.gif');
			if ($acinput.is(':focus')) {
				$acinput.autocomplete('search', '');
			}
		});
	}
	getSource();
	$('#id_gethostlist').on('click', function(e) {
		$acinput.focus();
		getSource(function() { $acinput.autocomplete('search', ''); });
	});



	$('#id_switch').on('click', function(e) {
		var doSubmit = false;
		parent.wait.start();
		$.ajax({
			async:false,
			type:'GET',
			url:'../switchable/',
			cache:false,
			dataType:'json',
			timeout:300*1000
		})
		.success(function(data, ts, xhr) {
			parent.wait.stop();
			if (data.switchable) {
				if (confirm('{% trans "Migration: Message(Confirm switch)" %}')) {
					doSubmit = true;
					parent.wait.start();
				}
			} else {
				alert('{% trans "Migration: Message(Message(Cant switch))" %}');
			}
		})
		.error(function(xhr, ts, err) {
			parent.wait.stop();
		})
		.complete(function() {});

		if (!doSubmit) {
			e.preventDefault();
			return false;
		}
	});

});
})($.noConflict(true));
// -->
</script>
{{ block.super }}
<script type="text/javascript">
<!--
$(function() {
});
// -->
</script>
{% endblock js %}



{% block ajaxform_modified %}{{ block.super }}
{% endblock ajaxform_modified %}
{%comment%}
{% block to_ajaxform %}{% endblock to_ajaxform %}
{%endcomment%}



{% block function %}
<div class="basic_function">
    <table class="list_table">
        <tr>
            <th>{% trans "Migration: Status" %}</th>
            <td id="id_status">{{ status }}</td>
        </tr>
        <tr>
            <th>{{ form.src.label_tag }}</th>
            <td class="item">
               {{ form.src }}
               <button id="id_gethostlist" class="imgtxtbtn mbtn" type="button">
                   <div><img src="/static/img/pkg/migration/spin_1.gif" /></div>
                   <div>{% trans "Migration: Find Target" %}</div>
               </button>
            </td>
        </tr>
        <tr>
            <th>{{ form.passwd.label_tag }}</th>
            <td>{{ form.passwd }}</td>
        </tr>
        <tr>
            <th>{{ form.sche.label_tag }}</th>
            <td>{{ form.sche }}</td>
        </tr>
        <tr id="id_scheline">
            <th>{% trans "Migration: Datetime" %}</th>
            <td class="item">{{ form.date }}{{ form.time }}</td>
        </tr>
        <tr>
            <th>{{ form.full.label_tag }}</th>
            <td>{{ form.full }}</td>
        </tr>
    </table>
    <div class="msgarea">
        {% trans "Migration: Message(Description of Switch)" %}
    </div>
    <input id="id_save_and_execute"
           class="mbtn"
           type="submit"
           name="save_and_execute"
           value="{% trans "Migration: Save and Execute" %}" />
    <input id="id_save"
           class="mbtn"
           type="submit"
           name="save"
           value="{% trans "Migration: Save" %}" />
    <input id="id_switch"
           class="mbtn"
           type="submit"
           name="switch"
           value="{% trans "Migration: Switch" %}" />
</div>
{% endblock function %}