Phone/Screen demo

by dceast

HTML

<div id="phone">
    <div id="screen">
        <ul id="app-list">
            <li id="app-one"><span>1</span></li>
            <li id="app-two"><span>2</span></li>
            <li id="app-three"><span>3</span></li>
            <li id="app-four"><span>4</span></li>
            <li id="app-five"><span>5</span></li>
            <li id="app-six"><span>6</span></li>
            <li id="app-seven"><span>7</span></li>
            <li id="app-eight"><span>8</span></li>
            <li id="app-nine"><span>9</span></li>
            <li id="app-ten">10</li>
            <li id="app-eleven">11</li>
            <li id="app-twelve">12</li>
        </ul> <!-- end #app-list #ul -->
        <span id="theApp"></span>
    </div> <!-- end #screen div -->
    <div id="control-panel">
        <button id="btBack"><--</button>
            </div> <!-- end #control-panel div -->
            </div> <!-- end #phone div -->

CSS

@import url(http://fonts.googleapis.com/css?family=Abel);

body
{
    background:#f9e830 url(http://tympanus.net/Development/VerticalSlidingAccordion/images/pattern.png) repeat top left;
    font-family: Abel, 'Arial', 'Sans-serif';
}

#phone
{
    background-color: #444;
    border: 1px solid #555;
    max-height: 480px;
    width: 325px;
    overflow: none;
    padding: 15px;
}

#screen
{
    background-color: #555;
    max-width: 319px; 
    margin: auto;
    min-height: 425px;
    overflow: none;
    padding: 2px;
}

#screen li /* app */
{
    background-color: #BBB;
    height: 100px;   
    width: 100px;
    border: 1px solid #AAA;
    margin: 2px 2px;
    display: block;
    float: left;
    z-index: 100;
    color: #FFF;
    font-size: 55px;
}

#app-list li span
{
    margin: 35px;
    padding-top: 20px;
}

#theApp
{
    color: #EEE;
    margin: 5px 0px 2px 130px;
}

#control-panel
{
    margin-top: 10px;
}

#btButton
{
    
}

.selected
{
    background-color: #F00;
}

JavaScript

var hover, click = false;
var Phone = {
    init: function() {
        this.hover.init();
        this.appClick.init();
        this.backClick.init();
    },
    hover: {
        init: function() {
            this.activate();
        },
        getColor: function() {
            var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'],
                color = '#',
                i;
            for (i = 0; i < 6; i++) {
                color = color + hex[Math.floor(Math.random() * 16)];
            }
            return color;
        },
        activate: function() {
            // Retrieve the applications on the phone
            var $apps = $('#app-list li');

            // Grab the place holder that shows the current app
            var $theApp = $('#theApp');

            //Initate the hover function
            $apps.hover(function(e) {
                //e.target.id is the item that is currently being hovered over
                var hoverAppId = e.target.id.toString();

                //Turn e.target.id into a jQuery object
                $hoverApp = $('#' + hoverAppId.toString());

                var theColor = Phone.hover.getColor();

                //Set the background color of the app and
                $hoverApp.css('background-color', theColor);

                //Set the place holder to the id of the hovered app
                $theApp.text(hoverAppId);

                //Initiate callback function
            }, function(e) {
                //Set the elements back to their original states
                $hoverApp.css('background-color', '#BBB');
                $theApp.text('');
            });
        }
    },
    appClick: {
        init: function() {
            var $apps = $('#app-list li');
            $apps.click(function(e) {
                var id = e.target.id;
                var $clicked = $('#' + id);

                jQuery.data(document.body, "blah", id);

                var $notSelected =...