carlosefonseca/500pxStatusBoard.html

## 500pxStatusBoard.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>A 500px photo</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            img {
                width: 100%
            }
            .photo, a.photo {
                position:absolute;
                width: 100%;
                top:0;
                text-decoration: none;
                /*color: gray !important; doesn't work */
            }
            * {font-family:'Lucida Grande', sans-serif;margin: 0;padding: 0}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $( document ).ready(function() {
                run();
            });

            var current = 0;

            function resizeToMax(img){
                if(img.width / window.innerWidth > myImage.height / window.innerHeight){
                    img.style.width = "100%";
                } else {
                    img.style.height = "100%";
                }
            }

            function run() {
                console.log("running…");
                $.getJSON("image.php", function(data){
                    if (current == data.id) {
                        console.log("same");
                    } else {
                        current = data.id;
                        console.log(data);
                        newPhoto = $('<a class="photo" href="px://500px.com/photo/'+data.id+'"><img src="'+data.image_url+'"/><p><strong>'+data.name+'</strong> by '+data.user.firstname+' '+data.user.lastname+'</p>').hide()
                        ch = $("body").children();
                        $("body").append(newPhoto);
                        $("img", newPhoto).load(function(){
                            console.log("loaded");
                            // resizeToMax(this); Doesn't work as I wanted
                            newPhoto.fadeIn(function(){
                                ch.remove();
                            })
                        });
                    }
                    setTimeout(function(){
                        run()
                    }, 30000)
                })
            }
        </script>
    </head>

    <body>
    </body>
</html>
	<!doctype html>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>A 500px photo</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<style type="text/css">
	img {
	width: 100%
	}
	.photo, a.photo {
	position:absolute;
	width: 100%;
	top:0;
	text-decoration: none;
	/color: gray !important; doesn't work /
	}
	* {font-family:'Lucida Grande', sans-serif;margin: 0;padding: 0}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
	$( document ).ready(function() {
	run();
	});

	var current = 0;

	function resizeToMax(img){
	if(img.width / window.innerWidth > myImage.height / window.innerHeight){
	img.style.width = "100%";
	} else {
	img.style.height = "100%";
	}
	}

	function run() {
	console.log("running…");
	$.getJSON("image.php", function(data){
	if (current == data.id) {
	console.log("same");
	} else {
	current = data.id;
	console.log(data);
	newPhoto = $('<a class="photo" href="px://500px.com/photo/'+data.id+'"><img src="'+data.image_url+'"/><p><strong>'+data.name+'</strong> by '+data.user.firstname+' '+data.user.lastname+'</p>').hide()
	ch = $("body").children();
	$("body").append(newPhoto);
	$("img", newPhoto).load(function(){
	console.log("loaded");
	// resizeToMax(this); Doesn't work as I wanted
	newPhoto.fadeIn(function(){
	ch.remove();
	})
	});
	}
	setTimeout(function(){
	run()
	}, 30000)
	})
	}
	</script>
	</head>

	<body>
	</body>
	</html>