<?php include("../style/header.php") ?>

<h1>Sort of 3D test</h1>
<script>
var x = 0;
var t = 0;
function findLeft(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft;
        while (obj = obj.offsetParent)
            curleft += obj.offsetLeft;
    }
    return curleft;
}
function mouseFunc(e) {
    var posx = 0;
    if (!e)
        var e = window.event;
    if (e.pageX) {
        posx = e.pageX;
    }
    else if (e.clientX) {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
    }
    obj = document.getElementById('blah');
    posx -= findLeft(obj);
    if (posx < 100) {
        if ( !t )
        t = setTimeout("scrollLeft();",100);
    } else if (posx > 300) {
        if ( !t )
        t = setTimeout("scrollRight();",100);
    } else { 
        clearTimeout(t);
        t = 0;
    }
}
function scrollLeft() {
        clearTimeout(t);
    t = setTimeout("scrollLeft();",100);
    x += 5;
    obj = document.getElementById('blah');
    obj.style.backgroundPosition = ' ' + x + 'px 0px';
}
function scrollRight() {
        clearTimeout(t);
    t = setTimeout("scrollRight();",100);
    x -= 5;
    obj = document.getElementById('blah');
    obj.style.backgroundPosition = ' ' + x + 'px 0px';
}
</script>
<style>
#blah {
    background-image: url(test.png);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    width: 400px;
    height: 300px;
}
</style>
<div id=blah onMouseMove="mouseFunc(event);"></div>

<?php include("../style/footer.php") ?>