{{extend 'layout.html'}}

<script>
	var context;
	var canvas;

    $(document).ready(function() {

	
	window.setInterval(function() {
/*
            $.post('/default/grab', function(response) {
		$('#camera-image').attr('src', response.src);
		}, 'json');
*/
		var rnd = Math.floor((Math.random()*1000)+1);
/*
		var img = $('<img />').attr('id', 'camera-image').css('z-index', 1).attr('src', '/static/images/image.jpg?='+rnd)
			.load(function() {
				if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
					alert('error');
				} else {
					var active = $('#image-container img:first');					
					//$("#image-container").append(this);
					$(this).insertAfter(active);
					//$(this).css('z-index', 2);

					//alert('here');
					//active.replaceWith(this);

					if (active) {
						//alert("removing");
						//active.css('z-index', 1);
						active.detach();							
					}
				

					
				}
				
			});
*/

        $('#camera-image').attr('src', '/static/images/image.jpg?='+rnd);

	}, 1000);

	window.setInterval(function() {
		query_status();
	}, 2000);


        $('.value').change(function() {
            val = $(this).val();
            key = $(this).attr('id');
            key = key.substr(key.indexOf('-') + 1);
            profile = $(this).attr('data-profile');

            if ($(this).attr('type') == 'checkbox') {
			val = $(this).attr('checked') ? 'true' : 'false';
            }

		$.ajax({
			url: '/api/data_item_value/' + key + '/' + profile,
			type: 'PUT',
			data: 'value='+val,
		});
        });	// doc ready

        $('.accordion').on('show', function (e) {
            var category_id = $(e.target).prev('.accordion-heading').find('.accordion-toggle').attr('id');
            var stub = document.URL.substr(0, document.URL.indexOf('#'))
            history.replaceState(null, null, stub + '#s-' + category_id)
        });


        pos = document.URL.indexOf('#');

        if (pos != -1) {
            var hash = document.URL.substr(pos + 3)
            $('#body-' + hash).collapse('show');
        }

		$('.row .toggle-settings').on('click', function(e) {
			e.preventDefault();
			//var $this = $(this);
			//var $collapse = $this.closest('.collapse-group').find('.collapse');
			var $collapse = $('.settings');
			//$collapse.collapse('toggle');
			$collapse.fadeToggle();
		});

	query_status();

    });

	function query_status() {
            $.getJSON('/api/data_item_value/camera_status/0/value.json', function(response) {
			var obj = jQuery.parseJSON(response.content['0'].value);
		
			if (obj.state == 'Acquiring') {
				$('#status-state').html('<span class="label label-success">' + obj.state + '</span>');
			} else {
				$('#status-state').html('<span class="label label-warning">' + obj.state + '</span>');
			}	

//				$('#status-state').html('<span class="label label-success">' + obj.state + '</span>');
			$('#status-count').html(obj.count);

			if (obj.state == 'Idle') {
				$('#btn-start-stop').html('Start');
			}

			if (obj.state == 'Acquiring') {
				$('#btn-start-stop').html('Stop');
			}

		});
	}

	function set_value(key, val, profile) {
                profile = typeof profile !== 'undefined' ? profile : '0'; 
		$.ajax({
			url: '/api/data_item_value/' + key + '/0',
			type: 'PUT',
			data: 'value='+val,
		});
	}

	function toggle_acquisition() {
		if ($('#status-state span').html() == 'Idle') {
			set_value('acq_enable', 'true');
		} else {	
			set_value('acq_enable', 'false');
		}
	}


</script>

<div class="row">
    <div class="span12">
        <div class="camera-controls">
            <div class="left-controls">
				<a class="btn btn-primary btn-large toggle-settings" href="#">Settings &raquo;</a>
                <a id="btn-start-stop" class="btn btn-primary btn-large" onclick="toggle_acquisition(); return false;">Start</a>
                <a class="btn btn-primary btn-large" onclick="set_value('camera_exit', 'true'); return false;">Exit SW</a>
                <a class="btn btn-primary btn-large" onclick="$.post('/default/restart', { }); return false;">Restart</a>
                <a class="btn btn-primary btn-large" onclick="$.post('/default/shutdown', { }); return false;">Shutdown</a>
                <a class="btn btn-primary btn-large" onclick="set_value('camera_reconfigure', 'true'); return false;">Reconfigure</a>
            </div>
            <div class="right-controls">
			<table class="camera-status table table-condensed">
				<tr>
					<td>Status</td>
					<td id="status-state"></td>
				</tr>
				<tr>
					<td>Image Count</td>
					<td id="status-count"></td>
				</tr>
			</table>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div id="image-container" class="span12">
        {{
        import random
        k = random.randint(0, 10000)
        }}
        <img id="camera-image" src="/static/images/image.jpg?rnd={{=k}}"/>
    </div>
</div>

<div class="row">
    <div class="span4 settings">

        <div class="data_items">
            <div class="accordion" id="accordion2">

                {{for c in categories:}}

                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a id="category-{{=c.id}}" class="accordion-toggle" data-toggle="collapse"
                           data-parent="#accordion2" href="#body-category-{{=c.id}}">
                            <strong>{{=c.name}}</strong>
                        </a>
                    </div>
                    <div id="body-category-{{=c.id}}" class="accordion-body collapse" style="height: 0px; ">
                        <div class="accordion-inner">


                            <form class="form-horizontal">
                                <fieldset>

                                    {{for p in data_items[c.id]:}}
                                    {{if p.data_type=='string' or p.data_type=='text' or p.data_type=='integer' or p.data_type=='decimal' or p.data_type=='json':}}

                                    <div class="control-group">
                                        <label class="control-label">{{=p.name}}</label>

                                        <div class="controls">
                                            <input id="value-{{=p.key}}" data-profile="{{=p.profile}}" type="text"
                                                                             class="value span2"
                                                                             value="{{=p.value}}"/>
                                            <span class="help-block">{{=p.description}}</span>
                                        </div>
                                    </div>

                                    {{elif p.data_type=='select':}}
                                    <div class="control-group">
                                        <label class="control-label">{{=p.name}}</label>

                                        <div class="controls">
                                            <select class="span2">

                                                {{for o in p.options:}}
                                                <option value="{{=o[0]}}"
                                                {{if p.value==o[0]:}} selected {{pass}}>{{=o[1]}}</option>
                                                {{pass}}

                                            </select>
                                            <span class="help-block">{{=p.description}}</span>
                                        </div>
                                    </div>
                                    {{elif p.data_type=='boolean':}}

                                    <div class="control-group">
                                        <label class="control-label">{{=p.name}}</label>

                                        <div class="controls">
                                            <input id="value-{{=p.key}}"  data-profile="{{=p.profile}}" type="checkbox"
		                                                           class="value span2"
		                                                           value="true"
		                                                           {{if p.value=='true':}} checked="checked" {{pass}}/>
                                      
                                            <span class="help-block">{{=p.description}}</span>
                                        </div>
                                    </div>

                                    {{pass}}
                                    {{pass}}

                                </fieldset>

                            </form>


                        </div>
                    </div>
                </div>


                {{pass}}


            </div>
        </div>
    </div>

</div>