ariela/are.html

## are.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>やるきのないあれ</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <style>
    #loader {
        position: fixed;
        top: 10px;
        right: 10px;
    }
    #status {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 5px 5px 0 5px;
        color: #fff;
        background-color: rgba(0,0,0,0.8);
    }
    .status-line {
        margin: 0;
        padding: 0 0 5px 0;
        font-size: 12px;
    }
    </style>
    <script type="text/javascript">
    var baseurl = '';
    var defWait = 3000;
    var preloadCount = 10;

    var capIdx = 0;
    var capMax = 0;
    var wait = defWait;
    var captures;
    var timerId;
    var cache = [];

    $(function() {
        addStatus('Loading JSON...');
        $.getJSON('a.json', function(d) {
            addStatus('JSON Loaded.');
            capMax = d.captures.length - 1;
            captures = d.captures;
            $('#position').attr({
                'min': 0,
                'max': capMax
            });
            preload();

            $('#wait').val(round(wait / 1000));
            $('#currentWait').text(round(wait / 1000));
            $('#currentPosition').text('1');
            $('#maxPosition').text(capMax + 1);
            draw();
        });

        $('#position').change(function() {
            $('#currentPosition').text(parseInt($(this).val()) + 1);
            capIdx = parseInt($(this).val());
            delete cache;
            cache = [];
            preload();
        });

        $('#wait').change(function() {
            var w = round(parseFloat($(this).val()));
            $('#currentWait').text(w);
            wait = w * 1000;
        });
    });

    function preload()
    {
        for(i=capIdx; i<capIdx + preloadCount; i++) {
            if (i > capMax) break;
            if (cache.length > i) continue;

            var key = 'k' + i;
            var item = captures[i];
            var url = baseurl + item.file;

            var image = new Image();
            image.id = 'screen';
            image.class = i;
            //$(image).hide();
            image.src = url;
            image.onload = function() {
                //addStatus('Loaded image. ' + item.file);
                cache[this.class] = this;
            }
        }
    }

    function draw()
    {
        var item = captures[capIdx];
        var image;

        $('#loader').fadeIn();

        if (cache[capIdx] != undefined) {
            addStatus('Cache hit. ' + item.file);
            image = cache[capIdx];
            redraw(item, image);
            delete cache[capIdx - 1];
        } else {
            addStatus('Cache Not found.');
            var url = baseurl + item.file;

            var image = new Image();
            image.id = 'screen';
            image.class = capIdx;
            //$(image).hide();
            image.src = url;
            addStatus('Image loading... ' + item.file);
            image.onload = function() {
                redraw(item, this);
            }
        }
    }

    function redraw(item, image) {
        //$('#screen').fadeOut();
        $('#screen').replaceWith(image);
        $('#captureTime').text(item.time);

        $('#position').val(capIdx);
        $('#currentPosition').text(capIdx + 1);

        //$('#screen').fadeIn();
        $('#loader').fadeOut();

        capIdx++;
        preload();
        timerId = setTimeout(draw, wait);
    }

    function round(val) {
        return Math.round(val * 100) / 100;
    }

    function addStatus(status) {
        var now = new Date();
        var year = now.getYear(); // 年
        var month = now.getMonth() + 1; // 月
        var day = now.getDate(); // 日
        var hour = now.getHours(); // 時
        var min = now.getMinutes(); // 分
        var sec = now.getSeconds(); // 秒
        if(year < 2000) { year += 1900; }
        if(month < 10) { month = "0" + month; }
        if(day < 10) { day = "0" + day; }
        if(hour < 10) { hour = "0" + hour; }
        if(min < 10) { min = "0" + min; }
        if(sec < 10) { sec = "0" + sec; }

        var nowString = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;

        var p = $('<p>');
        p.attr({
            'id': 'id-' + now.getTime(),
            'class': 'status-line',
        });
        p.text('[' + nowString + '] ' + status);
        p.hide();

        $('#status').append(p);
        p.fadeIn('slow');

        setTimeout(function() {
            var id = p.attr('id');
            $('#' + id).fadeOut(function() {
                $('#' + id).remove();
            });
        }, 2000);
    }
    </script>
</head>
<body>

    <div id="status"></div>

    <p>
        <input id="position" type="range" min="0" max="0" step="1" value="0" />
        <span id="currentPosition">0</span> / <span id="maxPosition">0</span>

        <input id="wait" type="range" min="0.5" max="5.0" step="0.1" value="3" />
        Wait: <span id="currentWait">3</span> sec.
    </p>

    <p><img id="loader" src="ajax-loader.gif" /></p>

    <p id="captureTime"></p>
    <img id="screen" src=""></img>


</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>やるきのないあれ</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
	<style>
	#loader {
	position: fixed;
	top: 10px;
	right: 10px;
	}
	#status {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 5px 5px 0 5px;
	color: #fff;
	background-color: rgba(0,0,0,0.8);
	}
	.status-line {
	margin: 0;
	padding: 0 0 5px 0;
	font-size: 12px;
	}
	</style>
	<script type="text/javascript">
	var baseurl = '';
	var defWait = 3000;
	var preloadCount = 10;

	var capIdx = 0;
	var capMax = 0;
	var wait = defWait;
	var captures;
	var timerId;
	var cache = [];

	$(function() {
	addStatus('Loading JSON...');
	$.getJSON('a.json', function(d) {
	addStatus('JSON Loaded.');
	capMax = d.captures.length - 1;
	captures = d.captures;
	$('#position').attr({
	'min': 0,
	'max': capMax
	});
	preload();

	$('#wait').val(round(wait / 1000));
	$('#currentWait').text(round(wait / 1000));
	$('#currentPosition').text('1');
	$('#maxPosition').text(capMax + 1);
	draw();
	});

	$('#position').change(function() {
	$('#currentPosition').text(parseInt($(this).val()) + 1);
	capIdx = parseInt($(this).val());
	delete cache;
	cache = [];
	preload();
	});

	$('#wait').change(function() {
	var w = round(parseFloat($(this).val()));
	$('#currentWait').text(w);
	wait = w * 1000;
	});
	});

	function preload()
	{
	for(i=capIdx; i<capIdx + preloadCount; i++) {
	if (i > capMax) break;
	if (cache.length > i) continue;

	var key = 'k' + i;
	var item = captures[i];
	var url = baseurl + item.file;

	var image = new Image();
	image.id = 'screen';
	image.class = i;
	//$(image).hide();
	image.src = url;
	image.onload = function() {
	//addStatus('Loaded image. ' + item.file);
	cache[this.class] = this;
	}
	}
	}

	function draw()
	{
	var item = captures[capIdx];
	var image;

	$('#loader').fadeIn();

	if (cache[capIdx] != undefined) {
	addStatus('Cache hit. ' + item.file);
	image = cache[capIdx];
	redraw(item, image);
	delete cache[capIdx - 1];
	} else {
	addStatus('Cache Not found.');
	var url = baseurl + item.file;

	var image = new Image();
	image.id = 'screen';
	image.class = capIdx;
	//$(image).hide();
	image.src = url;
	addStatus('Image loading... ' + item.file);
	image.onload = function() {
	redraw(item, this);
	}
	}
	}

	function redraw(item, image) {
	//$('#screen').fadeOut();
	$('#screen').replaceWith(image);
	$('#captureTime').text(item.time);

	$('#position').val(capIdx);
	$('#currentPosition').text(capIdx + 1);

	//$('#screen').fadeIn();
	$('#loader').fadeOut();

	capIdx++;
	preload();
	timerId = setTimeout(draw, wait);
	}

	function round(val) {
	return Math.round(val * 100) / 100;
	}

	function addStatus(status) {
	var now = new Date();
	var year = now.getYear(); // 年
	var month = now.getMonth() + 1; // 月
	var day = now.getDate(); // 日
	var hour = now.getHours(); // 時
	var min = now.getMinutes(); // 分
	var sec = now.getSeconds(); // 秒
	if(year < 2000) { year += 1900; }
	if(month < 10) { month = "0" + month; }
	if(day < 10) { day = "0" + day; }
	if(hour < 10) { hour = "0" + hour; }
	if(min < 10) { min = "0" + min; }
	if(sec < 10) { sec = "0" + sec; }

	var nowString = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;

	var p = $('<p>');
	p.attr({
	'id': 'id-' + now.getTime(),
	'class': 'status-line',
	});
	p.text('[' + nowString + '] ' + status);
	p.hide();

	$('#status').append(p);
	p.fadeIn('slow');

	setTimeout(function() {
	var id = p.attr('id');
	$('#' + id).fadeOut(function() {
	$('#' + id).remove();
	});
	}, 2000);
	}
	</script>
	</head>
	<body>

	<div id="status"></div>

	<p>
	<input id="position" type="range" min="0" max="0" step="1" value="0" />
	<span id="currentPosition">0</span> / <span id="maxPosition">0</span>

	<input id="wait" type="range" min="0.5" max="5.0" step="0.1" value="3" />
	Wait: <span id="currentWait">3</span> sec.
	</p>

	<p><img id="loader" src="ajax-loader.gif" /></p>

	<p id="captureTime"></p>
	<img id="screen" src=""></img>


	</body>
	</html>