Online OS

by Tgwizman

HTML

<div id="ActualFullBrowserWindow">

    <div id="menu">
        <ul class="left">
            <li class="a"><a class="menuItem"></a></li>
            <li class="a"><a class="menuItem"><b></b></a>
                <ul class="B">
                    <li class="b"><a>About</a></li>
                    <li class="b"><a>App Store</a></li>
                    <li class="b"><hr></li>
                    <li class="b"><a>Dock<sr>»</sr></a>
                        <ul class="C">
                            <li class="c"><a>Position<sr>»</sr></a>
                                <ul class="D">
                                    <li class="d"><a onclick="moveDock('top')">
                                            Top
                                        </a></li>
                                    <li class="d"><a onclick="moveDock('right')">
                                            Right
                                        </a></li>
                                    <li class="d"><a onclick="moveDock('bottom')">
                                            Bottom<sl>√</sl>
                                        </a></li>
                                    <li class="d"><a onclick="moveDock('left')">
                                            Left
                                        </a></li>
                                </ul>
                            </li>
                            <li class="c"><hr></li>
                            <li class="c"><a>Dock Prefrences</a></li>
                        </ul>
                    </li>
                    <li class="b"><a>System Prefrences</a></li>
                    <li class="b"><hr></li>
                    <li class="b"><a>Restart</a></li>
                    <li class="b"><a>Sign Out</a></li>
                </ul>
            </li>
            <li class="a"><a class="menuItem">File</a>
                <ul class="B">
                    <li class="b"><a onclick="newWindow(50,50,320,240)">
       ...

CSS

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #DDD;
}

::-webkit-scrollbar-track-piece {
    width: 6px;
    height: 6px;
    border-top: 1px solid #BBB;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #BBB;
}

::-webkit-scrollbar-thumb {
    width: 4px;
    height: 4px;
    background-color: #999;
    border-top: 1px solid #BBB;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    border-left: 1px solid #BBB;
}

#ActualFullBrowserWindow {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color: #999;
}

#menu {
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
    height: 22px;
    background-color: #CCC;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #BBB;
    -moz-box-shadow: inset -5px -5px 5px 5px #888;
    -webkit-box-shadow: inset -5px -5px 5px 5px #888;
    box-shadow: inset -5px -5px 5px 5px #888;
    -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
}

#menu .left, #menu .right {
    margin: 0px;
    padding: 0px;
    display: inline;
    float: left;
}

#menu .right {
    float: right;
}

#menu ul .a {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 16px;
}

#menu ul .a .menuItem {
    margin: 0px;
    padding: 2px 10px;
    display: block;
    height: 18px;
    border-left: 1px solid #DDD;
    border-right: 1px solid #BBB;
}

#menu .left .a .menuEnd {
    display: block;
    height: 22px;
    border-left: 1px solid #DDD;
}

#menu .right .a .menuEnd {
    display: block;
    height: 22px;
    border-right: 1px solid #BBB;
}

#menu .a .B, #menu .b .C, #menu .c .D {
   ...

JavaScript

var winW = 630, winH = 460;

if (document.body && document.body.offsetWidth) {
    winW = document.body.offsetWidth;
    winH = document.body.offsetHeight;
}

if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
    winW = document.documentElement.offsetWidth;
    winH = document.documentElement.offsetHeight;
}

if (window.innerWidth && window.innerHeight) {
    winW = window.innerWidth;
    winH = window.innerHeight;
}

setInterval(function(){
    date = new Date().toString().split("2012")[0];
    time = new Date().toString().split(" ")[4].split(" ")[0];
    if (time.split(":")[0]>11) {
        M = "PM";
    } else {
        M = "AM";
    }
    if (time.split(":")[0]>12) {
        time = 
            (time.split(":")[0]-12)+":"+
            time.split(":")[1]+":"+
            time.split(":")[2]+" "+M;
    } else {
        time = 
            time.split(":")[0]+":"
            +time.split(":")[1]+":"
            +time.split(":")[2]+" "+M;
    }
    document.querySelector("#date .menuItem").innerHTML = 
        date + " " + time;
},1000);

function moveDock(position) {
    dock = document.querySelector("#dock");
    wins = document.querySelector("#windows");
    
    if (position === "top") {
        dock.style.width = (winW - 2) + "px";
        dock.style.height = 74 + "px";
        dock.style.top = "24px";
        dock.style.right = "";
        dock.style.bottom = "";
        dock.style.left = "0px";
        wins.style.width = (winW) + "px";
        wins.style.height = (winH - 106) + "px";
        wins.style.top = "";
        wins.style.right = "";
        wins.style.bottom = "0px";
        wins.style.left = "0px";
    }
    
    if (position === "right") {
        dock.style.width = "100px";
        dock.style.height = (winH - 32) + "px";
        dock.style.top = "";
        dock.style.right = "0px";
        dock.style.bottom = "0px";
        dock.style.left = "";
        wins.style.width...