kennydude/videoview.html

## videoview.html
<!DOCTYPE HTML>
<html>
<!-- Copied from David Karp. David, you're sexy and you know it so please don't delete it. -->
    <head>
        <script type="text/javascript">
            // Configuration
            var tag = 'big pictures';
            var batch_size = 10;
        </script>

        <style type="text/css">
            html { overflow-y: scroll; }

            body {
 font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
                margin: 0px;
                padding: 0px 20px 20px 20px;
            }

            h1 {
                margin: 20px auto 0px auto;
                font: 300 30px "Helvetica Neue", Arial, Helvetica, sans-serif;
                max-width: 1280px;
            }

                h1 span { color: #bbb; }

            #pictures, #theplayer {
                max-width: 1280px;
                margin: auto;
            }
            #theplayer{ text-align: center; padding: 10px; }

            img {
                width: 100%;
                margin-top: 16px;
                background-color: #eee;
                border-width: 0px;
            }

            #loader {
                margin-top: 20px;
                height: 16px;
                background: url(http://static.tumblr.com/sajzoro/i9Vll9fm1/spinner.gif) no-repeat center;
                text-align: center;
                font: 300 20px "Helvetica Neue", Arial, Helvetica, sans-serif;
                letter-spacing: 1px;
                color: #bbb;
            }

            .vid{
                padding: 30px;
                width: 200px;
                text-align: center;
                float: left;
                color: blue;
                text-decoration: none;
            }
            .more{
                height: 100px;
                overflow: scroll;
            }
        </style>

        <script type="text/javascript"
        src="http://static.tumblr.com/sajzoro/Wfzloggrk/tumblr-query.js"></script>

        <script type="text/javascript">
            var loading;
            var picture_offset = 0;

            function openplayer(player){
                $("theplayer").innerHTML = shit[player];
            }

            window.onload = function(){
                var d = document;
                window.$ = function(id){ return document.getElementById(id); }

                window.sayings = [
                    "Pick me!",
                    "Watch this!",
                    "You'll love me!",
                    "PLZ WATCH ME",
                    "You know you want me",
                    ";)",
                    "GO ON!",
                    "You'll lol on me",
                    "^__^ DO IT",
                    "Maybe me?",
                    "Hypothetically, maybe?"
                ];
                window.shit = {};

                setInterval(function(){
                    if (loading || picture_offset == -1) return;

                    if (
                        // Only load more pictures when we're close to the bottom
                        picture_offset != 0 &&
                        (d.body.scrollHeight ? d.body.scrollHeight : d.documentElement.scrollHeight) - (
                            (d.body.scrollTop ? d.body.scrollTop : d.documentElement.scrollTop) +
                            (window.innerHeight ? window.innerHeight : d.documentElement.clientHeight)
                        ) > 200
                    ) return;

                    loading = true;
                    if(document.location.host == "localhost")
                        b = "tumblr.kennydude.me";
                    else
                        b = "?";

                    TumblrQuery.query(
                        'http://api.tumblr.com/v2/blog/'+b+'/posts/video',
                        {
                            limit:  batch_size,
                            offset: picture_offset,

                            api_key:  'HqevKXSv91oe8iz7QcAdqNoqqw4NvAJZ7SDHAsF4k5o74MqGTF',

                            onSuccess: function(transport){
                                if ($('header').style.display == 'none') {
                                    d.title = transport.response.blog.title;
                                    $('header').innerHTML = d.title + $('header').innerHTML;
                                    $('sub').innerHTML = '/ ' + $('sub').innerHTML;
                                    $('header').style.display = 'block';
                                }

                                if (picture_offset + batch_size >= transport.response.total_posts) {
                                    picture_offset = -1;
                                    $('loader').style.display = 'none';
                                } else {
                                    picture_offset = picture_offset + batch_size;
                                }

                                for (i in transport.response.posts) {
                                    var post = transport.response.posts[i];
                                    shit[i] = post.player[2].embed_code + "<br/><a href='http://tumblr.com/reblog/"+post.id+"/"+post.reblog_key+"' target='_blank'>Reblog</a><div class='more'>" + post.caption + "</div>";
                                    console.log(Math.floor(Math.random()*sayings));
                                    $('pictures').innerHTML = $('pictures').innerHTML + "<a class='vid' href='#' onclick='openplayer("+i+")'>"+ sayings[Math.floor(Math.random()*(sayings.length + 1))] +"</a>";
                                }
                            },
                            onFailure: function(){
                                $('loader').innerHTML = 'Problem loading pictures &nbsp;:(';
                                $('loader').style.backgroundImage = 'none';
                            },
                            onComplete: function(){
                                loading = false;
                            }
                        }
                    );
                }, 333);
            };
        </script>
    <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
    <body>
        <h1 id="header" style="display:none;">
            <span id="sub">Videos</span>
        </h1>
        <div id="theplayer"></div>
        <div id="pictures"></div>
        <div style="clear: both"></div>
        <div id="loader"></div>
Original code by David Karp. Modified by @kennydude
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<!-- Copied from David Karp. David, you're sexy and you know it so please don't delete it. -->
	<head>
	<script type="text/javascript">
	// Configuration
	var tag = 'big pictures';
	var batch_size = 10;
	</script>

	<style type="text/css">
	html { overflow-y: scroll; }

	body {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px 20px 20px 20px;
	}

	h1 {
	margin: 20px auto 0px auto;
	font: 300 30px "Helvetica Neue", Arial, Helvetica, sans-serif;
	max-width: 1280px;
	}

	h1 span { color: #bbb; }

	#pictures, #theplayer {
	max-width: 1280px;
	margin: auto;
	}
	#theplayer{ text-align: center; padding: 10px; }

	img {
	width: 100%;
	margin-top: 16px;
	background-color: #eee;
	border-width: 0px;
	}

	#loader {
	margin-top: 20px;
	height: 16px;
	background: url(http://static.tumblr.com/sajzoro/i9Vll9fm1/spinner.gif) no-repeat center;
	text-align: center;
	font: 300 20px "Helvetica Neue", Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	color: #bbb;
	}

	.vid{
	padding: 30px;
	width: 200px;
	text-align: center;
	float: left;
	color: blue;
	text-decoration: none;
	}
	.more{
	height: 100px;
	overflow: scroll;
	}
	</style>

	<script type="text/javascript"
	src="http://static.tumblr.com/sajzoro/Wfzloggrk/tumblr-query.js"></script>

	<script type="text/javascript">
	var loading;
	var picture_offset = 0;

	function openplayer(player){
	$("theplayer").innerHTML = shit[player];
	}

	window.onload = function(){
	var d = document;
	window.$ = function(id){ return document.getElementById(id); }

	window.sayings = [
	"Pick me!",
	"Watch this!",
	"You'll love me!",
	"PLZ WATCH ME",
	"You know you want me",
	";)",
	"GO ON!",
	"You'll lol on me",
	"^__^ DO IT",
	"Maybe me?",
	"Hypothetically, maybe?"
	];
	window.shit = {};

	setInterval(function(){
	if (loading \|\| picture_offset == -1) return;

	if (
	// Only load more pictures when we're close to the bottom
	picture_offset != 0 &&
	(d.body.scrollHeight ? d.body.scrollHeight : d.documentElement.scrollHeight) - (
	(d.body.scrollTop ? d.body.scrollTop : d.documentElement.scrollTop) +
	(window.innerHeight ? window.innerHeight : d.documentElement.clientHeight)
	) > 200
	) return;

	loading = true;
	if(document.location.host == "localhost")
	b = "tumblr.kennydude.me";
	else
	b = "?";

	TumblrQuery.query(
	'http://api.tumblr.com/v2/blog/'+b+'/posts/video',
	{
	limit: batch_size,
	offset: picture_offset,

	api_key: 'HqevKXSv91oe8iz7QcAdqNoqqw4NvAJZ7SDHAsF4k5o74MqGTF',

	onSuccess: function(transport){
	if ($('header').style.display == 'none') {
	d.title = transport.response.blog.title;
	$('header').innerHTML = d.title + $('header').innerHTML;
	$('sub').innerHTML = '/ ' + $('sub').innerHTML;
	$('header').style.display = 'block';
	}

	if (picture_offset + batch_size >= transport.response.total_posts) {
	picture_offset = -1;
	$('loader').style.display = 'none';
	} else {
	picture_offset = picture_offset + batch_size;
	}

	for (i in transport.response.posts) {
	var post = transport.response.posts[i];
	shit[i] = post.player[2].embed_code + "<br/><a href='http://tumblr.com/reblog/"+post.id+"/"+post.reblog_key+"' target='_blank'>Reblog</a><div class='more'>" + post.caption + "</div>";
	console.log(Math.floor(Math.random()*sayings));
	$('pictures').innerHTML = $('pictures').innerHTML + "<a class='vid' href='#' onclick='openplayer("+i+")'>"+ sayings[Math.floor(Math.random()*(sayings.length + 1))] +"</a>";
	}
	},
	onFailure: function(){
	$('loader').innerHTML = 'Problem loading pictures  :(';
	$('loader').style.backgroundImage = 'none';
	},
	onComplete: function(){
	loading = false;
	}
	}
	);
	}, 333);
	};
	</script>
	<meta http-equiv="x-dns-prefetch-control" content="off"/></head>
	<body>
	<h1 id="header" style="display:none;">
	<span id="sub">Videos</span>
	</h1>
	<div id="theplayer"></div>
	<div id="pictures"></div>
	<div style="clear: both"></div>
	<div id="loader"></div>
	Original code by David Karp. Modified by @kennydude
	</body>
	</html>