WOF! The Javascript game!

by vijayweb

HTML

<div id="game">
    <div id="display"></div>
    <div id="playArea">
        <button id="spin">spin wheel</button>
        <button id="vowel">buy vowel</button>
        <button id="solve">solve puzzle</button>
        <button id="newpuzzle">new puzzle</button>
        <div id="moneyArea">Score: $<span id="money">0</span></div>
    </div>
    <div class="clear"></div>
    <div id="tick">⇩</div> 
    <img id="wheel" src="http://i.stack.imgur.com/hsfiy.jpg" data-rotation="0" >
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Changa+One);
#game {
    font-family: 'Changa One' serif;   
}
#wheel  {
    top: 0;
    left: 0;
    width: 500px;
    -moz-border-radius: 250px;
    -webkit-border-radius: 250px;
    border-radius: 250px;
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -moz-transform 0.5s linear;
    -opera-transition: -opera-transform 0.5s linear;
    -ms-transition: transform 0.5s linear;
}

#tick {
    margin-left: 244px;
    font-family: Arial;
    font-size: 14pt;
}

#display {
     background-color: #43759f;
     padding: 1em 2em;
     text-align: center;
     border-radius: 40px;
     border: 4px double #fff;
}
#display div.word {
    display: inline-block;
}
#display div.wordLetter {
    display: block;
    width: 50px;
    height: 65px;
    margin: 2px;
    border: 2px solid #43759f;
    float: left;
    line-height: 65px;
    font-size: 40px;
}

#display div.wordLetter.letter {
    border-color: #eee;
}
#playArea {
    clear: both;
}
#playArea button {
    text-transform: uppercase;
    z-index: 1000;
    border: 4px double #fff;
    background-color: #43759f;
    padding: 6px 14px;
    color: white;
    font-family: inherit;
    font-size: 12pt;
}
#playArea #moneyArea {
    float: right;
    position: relative;
    padding: 10px;
    border: 2px black solid;
    width: 200px;
    margin: 5px;
    font-size: 14pt;
}
#playArea #moneyArea #money {
}

.clear {
    clear: both;
}

JavaScript

var WOF = (function() {

    Array.prototype.randomize = function() {
        this.sort(function(a, b) {
            return Math.round(Math.random());
        });
    };
    var prefix = (function() {
        if (document.body.style.MozTransform !== undefined) {
            return "MozTransform";
        }
        else if (document.body.style.WebkitTransform !== undefined) {
            return "WebkitTransform";
        }
        else if (document.body.style.OTransform !== undefined) {
            return "OTransform";
        }
        else {
            return "";
        }
    }()),
        degToRad = function(deg) {
            return deg / (Math.PI * 180);
        },
        rotateElement = function(element, degrees) {
            var val = "rotate(-" + degrees + "deg)";
            if (element.style[prefix] != undefined) element.style[prefix] = val;
            var rad = degToRad(degrees % 360),
                filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + rad + ", M12=-" + rad + ", M21=" + rad + ", M22=" + rad + ")";
            if (element.style["filter"] != undefined) element.style["filter"] = filter;
            element.setAttribute("data-rotation", degrees);
        },
        oc = function(a) { //object converter (changes array to an object)
            var o = {};
            for (var i = 0; i < a.length; i++) {
                o[a[i]] = '';
            }
            return o;
        },
        GAMECLASS = (function() {

            //static int
            var round = 0,
                //in the future this could be from an external server
                puzzles = [
                    "Vijay",
                    "vijay",
                    "vijay",
                    "vijay",
                    "vijay",
                    "vijay"
                    ],
                vowels = ['A', 'E', 'I', 'O', 'U'],
                cards = ["200", "400", "-1", "750", "400", "150", "600", "400", "200", "1000",...