Choose Folder to Upload

Don’t think that your server side script will be handling any type of Folder object, because in this case all that the browser does is open up the selected folder and upload all of the files inside. This operation is recursive so be warned that all of the containing files will be thrown at the server. Anyway, enjoy

Bible in Characters: 3228076
http://wiki.answers.com/Q/How_many_letters_in_the_King_James_Bible

Hard Disk Size 500G: 536870912000

SQL Server Hard Disk Space 3.6G: 3865470565
http://msdn.microsoft.com/en-us/library/ms143506.aspx

Sophos Anti Virus 500 MB: 536870912
Sophos Firewall 100 MB: 107374182
http://www.sophos.com/en-us/products/endpoint/endpoint-protection/components/anti-virus-protection/windows/system-requirements.aspx
Windows XP 1.5GB: 1610612736
http://support.microsoft.com/kb/314865

Windows XP Service Pack 3 1230 MB: 1320702443
http://support.microsoft.com/kb/947311

Bytes Remaining: 529429881162

Bible Count: 164007

All you need to to create a project in your favourite IDE.. for ease of use. Add the twitter4j library to your build path. Compile and run. If you run into any problems shoot them into the comments and I’ll lend a hand. Happy hacking.

package com.auth;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.logging.Level;
import java.util.logging.Logger;
import twitter4j.Status;
import twitter4j.Twitter;
import twitter4j.TwitterException;
import twitter4j.TwitterFactory;
import twitter4j.User;
import twitter4j.http.AccessToken;
import twitter4j.http.RequestToken;

public class Main {

    public static void main(String args[])
    {
        try
        {
            // The factory instance is re-useable and thread safe.
            Twitter twitter = new TwitterFactory().getInstance();
            twitter.setOAuthConsumer("pESR4xRk4glcGKMCryvdMQ", "ddu3r7IRp0I1luSFOW2iLwKP5pYTY03AZrAjJAVaj8");

            RequestToken requestToken = twitter.getOAuthRequestToken();
            AccessToken accessToken = null;
            BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
            while (null == accessToken)
            {
                System.out.println("Open the following URL and grant access to your account:");
                System.out.println(requestToken.getAuthorizationURL());
                System.out.print("Enter the PIN(if aviailable) or just hit enter.[PIN]:");
                String pin = null;
                try
                {
                    pin = br.readLine();
                } catch (IOException ex)
                {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                }
                try
                {
                    if (pin.length() > 0)
                    {
                        accessToken = twitter.getOAuthAccessToken(requestToken, pin);
                    } else
                    {
                        accessToken = twitter.getOAuthAccessToken();
                    }
                } catch (TwitterException te)
                {
                    if (401 == te.getStatusCode())
                    {
                        System.out.println("Unable to get the access token.");
                    } else
                    {
                        te.printStackTrace();
                    }
                }
            }
            //persist to the accessToken for future reference.
            storeAccessToken(twitter.verifyCredentials(), accessToken);
            Status status = twitter.updateStatus(args[0]);
            System.out.println("Successfully updated the status to [" + status.getText() + "].");
            System.exit(0);
        } catch (TwitterException ex)
        {
            Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    private static void storeAccessToken(User user, AccessToken accessToken)
    {
        System.out.println(user.getScreenName());
    }
}

So, Azure will use my concrete class to store my data and I will retrieve it and pop it into my interface. A problem came up where I could not convert a list of one generic type (concrete) to another (interface).

However I have just discovered a way to convert between two generic lists. What this means is that I can tell azure about my concrete class and it will go ahead and persist my data to the cloud. At the same time I can also expose only the Interface of my concrete implementation to the rest of the system. This means that I can keep all of my instantiation safe and sound in factories where they belong, and also in Azure. :)
 Anyway, If you want to Convert One Generic List to Another Generic List using c# then I hope the following code will give you somewhere to begin.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace GenericListCastingTest
{
    class GenericBoxClass<T, I> where T:I
    {
        private List<T> listT;

        public IList<I> getSome() {
            IList<I> list = listT.ConvertAll(x => (I)x);
            return list;
        }

        public void setSome(List<T> value) {
            this.listT = value;
        }
    }
}

If you want to play around with the source code for my tests on this code please check out http://compilr.com/IDE/32145

Try this, copy and paste the following code to a simple HTML file and save it onto you desktop. Open it in Chrome or Firefox 4 or Opera. Then, edit the Hello World text. The HTML5 contentEditable=”true” allows the containing element to be editable. This is a really nice attribute that makes textarea redundant in an AJAX app, in my opinion.

After you’ve edited the content close the browser and open the file again. Boom! the change has been stored in the browsers localStorage and is accessible even after a browser shutdown. Pretty sweet right?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(function(){
 var edit = document.getElementById('hello');

 $(edit).blur(function(){
 localStorage.setItem('save', this.innerHTML);
 });

 if(localStorage.getItem('save')){
 edit.innerHTML = localStorage.getItem('save');
 }

});
</script>
<style>
 article, aside, figure, footer, header, hgroup,
 menu, nav, section { display: block; }
</style>
</head>
<body>
 <p id="hello" contentEditable="true">Hello World</p>
</body>
</html>
 

["a","able","about","above","abst","accordance","according","accordingly","across","act","actually", "added","adj","adopted","affected","affecting","affects","after","afterwards","again","against","ah","all", "almost","alone","along","already","also","although","always","am","among","amongst","an","and","announce", "another","any","anybody","anyhow","anymore","anyone","anything","anyway","anyways","anywhere", "apparently","approximately","are","aren","arent","arise","around","as","aside","ask","asking","at","auth", "available","away","awfully","b","back","be","became","because","become","becomes","becoming","been", "before","beforehand","begin","beginning","beginnings","begins","behind","being","believe","below","beside", "besides","between","beyond","biol","both","brief","briefly","but","by","c","ca","came","can","cannot","can't", "cause","causes","certain","certainly","co","com","come","comes","contain","containing","contains","could", "couldnt","d","date","did","didn't","different","do","does","doesn't","doing","done","don't","down","downwards", "due","during","e","each","ed","edu","effect","eg","eight","eighty","either","else","elsewhere","end","ending", "enough","especially","et","et-al","etc","even","ever","every","everybody","everyone","everything","everywhere","ex","except","f", "far","few","ff","fifth","first","five","fix","followed","following","follows","for","former","formerly","forth","found", "four","from","further","furthermore","g","gave","get","gets","getting","give","given","gives","giving","go","goes", "gone","got","gotten","h","had","happens","hardly","has","hasn't","have","haven't","having","he","hed","hence", "her","here","hereafter","hereby","herein","heres","hereupon","hers","herself","hes","hi","hid","him","himself","his", "hither","home","how","howbeit","however","hundred","i","id","ie","if","i'll","im","immediate","immediately", "importance","important","in","inc","indeed","index","information","instead","into","invention","inward","is","isn't", "it","itd","it'll","its","itself","i've","j","just","k","keep"," keeps","kept","keys","kg","km","know","known","knows","l","largely","last","lately","later","latter","latterly", "least","less","lest","let","lets","like","liked","likely","line","little","'ll","look","looking","looks","ltd","m","made", "mainly","make","makes","many","may","maybe","me","mean","means","meantime","meanwhile","merely","mg", "might","million","miss","ml","more","moreover","most","mostly","mr","mrs","much","mug","must","my","myself","n", "na","name","namely","nay","nd","near","nearly","necessarily","necessary","need","needs","neither","never", "nevertheless","new","next","nine","ninety","no","nobody","non","none","nonetheless","noone","nor","normally", "nos","not","noted","nothing","now","nowhere","o","obtain","obtained","obviously","of","off","often","oh","ok", "okay","old","omitted","on","once","one","ones","only","onto","or","ord","other","others","otherwise","ought", "our","ours","ourselves","out","outside","over","overall","owing","own","p","page","pages","part","particular", "particularly","past","per","perhaps","placed","please","plus","poorly","possible","possibly","potentially","pp", "predominantly","present","previously","primarily","probably","promptly","proud","provides","put","q","que", "quickly","quite","qv","r","ran","rather","rd","re","readily","really","recent","recently","ref","refs","regarding", "regardless","regards","related","relatively","research","respectively","resulted","resulting","results","right","run", "s","said","same","saw","say","saying","says","sec","section","see","seeing","seem","seemed","seeming","seems", "seen","self","selves","sent","seven","several","shall","she","shed","she'll","shes","should","shouldn't","show", "showed","shown","showns","shows","significant","significantly","similar","similarly","since","six","slightly","so", "some","somebody","somehow","someone","somethan","something","sometime","sometimes","somewhat", "somewhere","soon","sorry","specifically","specified","specify","specifying","state","states","still","stop", "strongly","sub","substantially","successfully","such","sufficiently","suggest","sup","sure"," t","take","taken","taking","tell","tends","th","than","thank","thanks","thanx","that","that'll","thats","that've", "the","their","theirs","them","themselves","then","thence","there","thereafter","thereby","thered","therefore", "therein","there'll","thereof","therere","theres","thereto","thereupon","there've","these","they","theyd","they'll", "theyre","they've","think","this","those","thou","though","thoughh","thousand","throug","through","throughout", "thru","thus","til","tip","to","together","too","took","toward","towards","tried","tries","truly","try","trying","ts", "twice","two","u","un","under","unfortunately","unless","unlike","unlikely","until","unto","up","upon","ups","us", "use","used","useful","usefully","usefulness","uses","using","usually","v","value","various","'ve","very","via","viz", "vol","vols","vs","w","want","wants","was","wasn't","way","we","wed","welcome","we'll","went","were","weren't", "we've","what","whatever","what'll","whats","when","whence","whenever","where","whereafter","whereas", "whereby","wherein","wheres","whereupon","wherever","whether","which","while","whim","whither","who", "whod","whoever","whole","who'll","whom","whomever","whos","whose","why","widely","willing","wish","with", "within","without","won't","words","world","would","wouldn't","www","x","y","yes","yet","you","youd","you'll", "your","youre","yours","yourself","yourselves","you've","z","zero"]

The following is the simpe program that i used to convert a text file of these Stop words into the array string above.

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package arrayify;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

/**
 *
 * @author Siriquelle
 */
public class Main {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        try
        {
            BufferedReader in = new BufferedReader(new InputStreamReader(Main.class.getResourceAsStream("StopWords.txt")));
            String str = "";
            StringBuilder sb = new StringBuilder();
            while ((str = in.readLine()) != null)
            {
                sb.append("\"").append(str).append("\"");
            }
            str = sb.toString().replaceAll("\"\"", "\",\"");
            System.out.print(str);
            in.close();
        } catch (IOException e)
        {
            System.out.print(e.toString());
        }
    }
}

Hope this saves you some time. Many thanks to <a href=”http://www.ranks.nl/resources/stopwords.html” >http://www.ranks.nl/resources/stopwords.html </a> for the list of words.

In this example you will learn how to create a Python application that will determine if a given number is whole or decimal.

Step One: Download Python

Python is a cool language. Like Ruby it’s very simple to use. You can download it from the python site. Choose your version, download, install and move onto step two.

Step Two: Simple Python Function

Python functions are defined using the def keyword. In this example we define an isWhole function to check weather the number entered by the user is whole or not.

Code:

def isWhole(x):
	if(x%1 == 0):
		return True
	else:
		return False

You’ll notice that after the function definition there is a colon and there are no semi colons at the end of lines. This is because indention is used to perform code blocks. Using indented code blocks, it is thought, will make the code easier to read.

Step Three: Desktop application

Copy and paste the following code into your favourite text editor. I use Notepad++ for, like, everything. It really is a very good text editor. Make sure you save it as a .py file. Then, you should be able to run this file by double clicking it. If something goes wrong you micht want to re-st-ar-t your computer. But that’s it. You’ve got a start with python.

NOTE: The first line you’ll see is commented out ‘#!/usr/bin/python’ this is only used my Unix machines and is used for specifying the location of the python install. You may want to edit this line if you are using a Mac or Linux machine. But if you are, chances are, you knew that already.

Code:

#!/usr/bin/python
# Filename: run.py

print '*******************'
print #
print '|   Welcome to Python   |'
print #

def isWhole(x):
	if(x%1 == 0):
		return True
	else:
		return False

#The scope of the following while loop
#is determined by the indentation. Spooky huh.
while(True):
	print '*******************'
	print #
	print 'Enter a number and i\'ll tell\nyou if its whole or not:'
	print #

#The function raw_input('Your number please: ') accepts
#raw input from the user. In this case we cast the raw
#input as a float and pass the input to the isWhole function.
	if(isWhole(float(raw_input('Your number please: ')))):
		print #
		print 'Well, this is clearly a whole number.'
	else:
		print #
		print 'Ick, I dont like decimal numbers'

	print #
	print '*******************'
	print #

#The following conditional statement will break out of the while
#loop we are in now, and terminate the program if the user enters N.
#the upper() funciton converts the users input to
#uppercase so that it compares to the N.
	if(raw_input('Would you like to try another number?(Y/N) ').upper() == 'N'):
		break
	print #

Conclusion

Now that you have this application up and running you can answer that is this a decimal or whole number question with confidence.

Source Demo

So, now that you’ve had a peek at it working you can look over the code. The first thing is folder structure. I like base folder > assets > and then folders for each asset like > ajax for the pages of content and css for css and so on. The following is the HTML and JQUERY all on one page as its fairly simple to put together.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

	<head>
		<title>
			Bouncing Accordian
		</title>
		<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico" />
		<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
		<script type="text/javascript" src="assets/js/jquery.js"></script>
		<script type="text/javascript" charset="utf-8">

		 $(document).ready(function() {

			$('#nav_list li').live('click', function(e) {
				loadContent(e.target.id);
			});

			function loadContent(pgNum){

					$('#ajax').animate({'height' : '0px', opacity : 0}, 1000, function(){
						//console.log($('#'+this.id).height());
						$('#'+this.id).load('assets/ajax/' + pgNum + '.html', function(){
						$('#'+this.id).animate({'height' : '420px' , opacity : 1}, 1000);
						});
					});
			}

			});

		</script>
	</head>
	<body>
		<div id="main">

			<div id="container" class="aligncenter">

				<div id="nav">
					<ul id="nav_list" class="aligncenter">
						<li id="page1" >Home</li>
						<li id="page2">About</li>
						<li id="page3">Contact</li>
					</ul>
				</div>

				<div id="content">
					<div id="ajax">
						<img src="http://bulk.destructoid.com/ul/122540-hands-on-yakuza-3-japanese-demo/wow-468x.jpg" width="460px"/>
					</div>
				</div>

				<div id="footer">
				<div>© Threadbare Canvas Productions & James Hogan</div>
				</div>

			</div>

		</div>

	</body>
</html>

That was easy, a couple of lines of jquery and youve got a neat effect. Add some CSS for Style.

body{margin:0; padding:0px; background-color: #bdbdbd;}
a{text-decoration:inherit; color: inherit;}
.aligncenter{margin-left:auto;margin-right:auto;}

#main{
background-color:#dedede;
font-family:arial;
}

#container{
width:480px;
background-color:#dedede;
}

#nav{
border:5px #efefef solid;
-moz-border-radius:15px;
}
#nav #nav_list{
width:355px;
}

#nav #nav_list li{
display:inline;
margin-left:30px;
padding:5px;
border:1px #ccc outset;
background-color:#cdcdcd;
color:#fefefe;
-moz-border-radius:10px;
font-weight:bold;
cursor:pointer;
}

#content{
-moz-border-radius:15px;
min-height:0px;
padding:5px;
border-left: 5px #efefef solid;
border-right: 5px #efefef solid;
}
#content h1{
font-size:18px;
}
#content p{
font-size:14px;
}

#footer{
-moz-border-radius:15px;
border: 5px #efefef solid;
padding:5px;
text-align:center;
font-size:12px;
}

Also there are three other pages those are the ajax pages that will be dragged in to fill the content area.. So I created three files page1, page2, page3 .html and put them in an ajax folder then I gave an id of page1, page2, page3 to each of the buttons that i wanted to activate the ajax request for the content. The following is the sample content I had in those files.

<h1>Home</h1>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis </p>

<p>et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci </p>

<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea</p>

<p> commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate</p>

<p> velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

And there you have it a few simple files and a few lines of jquery can create a really nice effect for a website. Even if it looks fuggley :). PEACE!!

In this example you will get four files. This is what your game will look like when it’s finished:

Source Demo

So there you have it, a lovley hangman game to develop further and impress your friends with. The following is the code to the other files contained within the source folder.

First off let me show you hangman.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Hangman</title>
        <link type="text/css" rel="stylesheet" media="screen" href="assets/css/style.css" />
        <script type="text/JavaScript" src="assets/js/script.js" ></script>
    </head>
    <body>
        <div id="container">
            <div id="head"><a name="_top">Get ready to play</a></div>
            <div id="body">
                <div id="body_head">Hangman</div>

                <div id="body_image">
                    <script>
                        if (window.innerWidth == null) {
                            intWidth = document.body.clientWidth;
                            intHeight = document.body.clientHeight;
                        }
                        else {
                            intWidth = window.innerWidth;
                            intHeight = window.innerHeight;
                        }
                        if (intWidth >= intHeight) {
                            intHeight = Math.round(intHeight * 0.4);
                            intWidth = Math.round(180 * intHeight / 240);
                        }
                        else {
                            intWidth = Math.round(intWidth * 0.4);
                            intHeight = Math.round(240 * intWidth / 180);
                        }
                        doc.write('<img name="PicHang" src="assets/images/Hangman_11.jpg" width="' + intWidth + '" height="' + intHeight + '" id="PicHang" alt="PicHang"/>');
                    </script>
                    <noscript>You do not appear to have JavaScript capabilities. This game is written in JavaScript.</noscript>

                </div>

                <div id="body_footer">Don't Get Dead!!</div>
            </div>
            <div id="response">
                <form name="Game" action="./hangman.htm" method="post">
                    <input type="text" name="TWord" id="TWord" />
                    <label for="TGuess">What's your guess?</label>
                    <input type="text" name="TGuess" id="TGuess" maxlength="1" />
                    <input type="text" name="TAnswer" id="TAnswer" />

                    <input type="button" class="action_buttons" name="check" id="check" onclick="CheckGuess();" value="Check" >
                    <input type="button" class="action_buttons" name="start" id="start" onclick="StartOver();" value="Start" >

                    <input type="text" name="TMessage" id="TMessage" />
                    <label for="TGuess">You have used the following letters:</label>
                    <input type="text" name="TPrevious" id="TPrevious" />
                </form>
            </div>
            <div id="guess">

            </div>
            <div id="footer">
                <script>document.write('<a href="#_top" onClick="javascript:ShowHelp()" >HELP</a>');</script>
                <noscript><hr />
                    You do not appear to have JavaScript capabilities. This game is written in JavaScript.
                </noscript>
            </div>
        </div>
    </body>
</html>

Next up, is the help file that we will be using javascript to open in a new window, help_popup.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Hangman</title>
        <link type="text/css" rel="stylesheet" media="screen" href="assets/css/style.css" />
		<script type="text/JavaScript">
			function closeWindow(){
				window.close();
			}
		</script>
    </head>
    <body>
        <div id="container">
            <div id="head">help</div>
			<p>boy am i glad that hangman is over... still some things bothering me, i'll get back to them,</p>
            <p><a target="_parent" href="#head" onClick="javascript:closeWindow();" >close</a></p>
    </body>
</html>

This is the interesting file, script.js

window.onload = init();
var doc = document;
var p;
var preLoad;
var curWord;
var word;
var curPic = -1;
var count = 0;
var gcount = 0;

function init(){
    var Pic = new Array();	  //Declare the new array
    Pic[0] = 'assets/images/Hangman_1.jpg'; //Assign values to each element of
    Pic[1] = 'assets/images/Hangman_2.jpg'; //the array
    Pic[2] = 'assets/images/Hangman_3.jpg';
    Pic[3] = 'assets/images/Hangman_4.jpg';
    Pic[4] = 'assets/images/Hangman_5.jpg';
    Pic[5] = 'assets/images/Hangman_6.jpg';
    Pic[6] = 'assets/images/Hangman_7.jpg';
    Pic[7] = 'assets/images/Hangman_8.jpg';
    Pic[8] = 'assets/images/Hangman_9.jpg';
    Pic[9] = 'assets/images/Hangman_10.jpg';
    Pic[10] = 'assets/images/Hangman_11.jpg';

    p = Pic.length;
    preLoad = new Array();
    for(var i = 0; i < p; i++){
        preLoad[i] = new Image();
        preLoad[i].src = Pic[i];
    }

//add new words as you see fit the application will adapt to the new words.
    word = new Array();
    word[0] = 'JOKER';
    word[1] = 'TYPICAL';
    word[2] = 'GOOGLE';

    curWord = Math.floor(Math.random() * word.length)+1;
    StartOver;
}

function CheckGuess(){
    var curGuess = doc.Game.TGuess.value;

    if(count < 10){         if (curGuess != '' && curGuess != ' '){             var curPos = word[curWord].indexOf(curGuess.toUpperCase());             var nomPos = doc.Game.TWord.value.indexOf(curGuess);             if (curPos >= 0){

                //doc.Game.TMessage.value = doc.Game.TWord.value + ' ' + curGuess + ' ' + gcount + ' ';

                if(nomPos >= 0){

                    do{
                        gcount = gcount-1;
                        nomPos = doc.Game.TWord.value.indexOf(curGuess, (nomPos+1));
                    }while(nomPos > 0);
                //doc.Game.TMessage.value += ' ' + gcount + ' ' + doc.Game.TWord.value.indexOf(curGuess);
                }

                do{
                    gcount++;
                    doc.Game.TWord.value = DeBlankMachine(curWord, curPos, curGuess, doc.Game.TWord.value);
                    curPos = word[curWord].indexOf(curGuess.toUpperCase(), (curPos+1));
                } while(curPos > 0);
            }else{
                count++;
                if(doc.Game.TPrevious.value.indexOf(curGuess) >= 0){
                    count = count-1;
                }else{
                    doc.PicHang.src = preLoad[++curPic].src;
                    doc.Game.TPrevious.value += curGuess + ' ';
                }
            }
        }
    }else{
        doc.Game.TAnswer.value= word[curWord];
        doc.Game.TMessage.value = 'You Died, Press Start';
    }

    if(gcount == word[curWord].length){
        doc.Game.TAnswer.value= word[curWord];
        doc.Game.TMessage.value = 'You Win, Press Start';
        curPic = 11;
    }
    doc.Game.TGuess.value = '';

}

function StartOver(){
    curPic = 0;
    count = 0;
    gcount=0;
    doc.PicHang.src = preLoad[0].src;
    doc.Game.TGuess.value = '';
    doc.Game.TAnswer.value = '';
    doc.Game.TMessage.value = '';
    doc.Game.TPrevious.value = '';
    curWord = Math.floor(Math.random() * word.length);
    doc.Game.TWord.value = FillNewWord(curWord);
}

function FillNewWord(curWord, wpos, letter){
    var blankSpace = '';
    for(var j = 0; j < word[curWord].length; j++){
        blankSpace += "_ ";
    }
    return blankSpace;
}

function DeBlankMachine(curWord, wpos, letter, old){
    var oldArray = ExplodeStringToArray(old);

    for(var i = 0; i < word[curWord].length; i++){
        if(wpos == i){
            oldArray[2*i] = letter;
        }
    }

    return ImplodeArrayToString(oldArray)

}

function ExplodeStringToArray(string){
    var stringLength = string.length;
    var charArray = new Array(stringLength);

    for(var i = 0; i < stringLength; i++){
        charArray[i] = string.charAt(i);
    }

    return charArray;

}

function ImplodeArrayToString(array){
    var newString = '';

    for(var i = 0; i < array.length; i++){
        newString += array[i];
    }

    return newString;
}

function ShowHelp(){
    NewWindow = window.open('help_popup.htm','newWin','width=450,height=350, scrollbars=yes');
}

And finally weve got to style the thing, style.css

#container{width:180px; margin-left:auto;margin-right:auto; font-family:tahoma, arial, sans-serif; color:#333;}
#head {font-size:1.2em;}
#head, #body_head, #body_footer {font-weight:bold;}

#head, #body_head, #body_footer {text-align:center;}

#head{}

#body{}
#body_head{}
#body_image{}
#PicHang{border:1px solid #000;}
#body_footer{margin-bottom:5px;}

#response{}
#response{}

#response input#TWord, #response input#TGuess, #response input#TAnswer, #response input#TMessage,#response input#TPrevious {text-align:center; text-transform:uppercase; margin-top:5px; margin-bottom:5px;}
#response input#TWord, #response input#TAnswer, #response input#TMessage,#response input#TPrevious {border:0; border-bottom:1px solid #ccc; font-weight:bold; font-size:12px; color:#000080; width:180px;}
#response input#TGuess {width:15px;}
#response input#TAnswer {font-weight:bold; font-size:14px; color:#800000; width:180px;}
#response label{font-weight:bold;}
#response .action_buttons{width:80px; margin-left:5px; margin-top:5px; cursor:pointer;}
#guess{}
#footer{}

And thats it, a genuine, working hangman game, with proper string manipulation functions. Give it a go :)

Now, you should end up with something like this:

Source Demo

If you want to glance through the source code you can do so here: index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Bingo - Card</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

        <script type="text/javascript" src="assets/js/script.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
    </head>
    <body>

        <div id="page">
            <h1>Free Bingo Card</h1>
            <table>
                <tr>
                    <td id="cell0"> nbsp;</td>
                    <td id="cell5"> nbsp;</td>
                    <td id="cell10"> nbsp;</td>
                    <td id="cell14"> nbsp;</td>
                    <td id="cell19"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell1"> nbsp;</td>
                    <td id="cell6"> nbsp;</td>
                    <td id="cell11"> nbsp;</td>
                    <td id="cell15"> nbsp;</td>
                    <td id="cell20"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell2"> nbsp;</td>
                    <td id="cell7"> nbsp;</td>
                    <td id="free">Free</td>
                    <td id="cell16"> nbsp;</td>
                    <td id="cell21"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell3"> nbsp;</td>
                    <td id="cell8"> nbsp;</td>
                    <td id="cell12"> nbsp;</td>
                    <td id="cell17"> nbsp;</td>
                    <td id="cell22"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell4"> nbsp;</td>
                    <td id="cell9"> nbsp;</td>
                    <td id="cell13"> nbsp;</td>
                    <td id="cell18"> nbsp;</td>
                    <td id="cell23"> nbsp;</td>
                </tr>
            </table>
            <h3><a href="#" id="newCard" >Click me for a new card</a></h3>
        </div>

    </body>
</html>

The following is the source of the CSS: style.css

#page{
    width:455px;
    margin:0 auto;
}

td{
    font-family:arial;
    color:#333;
    padding:10px;
    width:50px;
    height:50px;
    text-align:center;
    border:10px solid #ddc;
    background-color:#eee;
}

.bingohead{
    border:10px solid #c2324c;
}

h1, h3, h3 a{
    font-family:arial;
    text-align:center;
    padding:3px;
    color:#211111;
    background-color:#EEEEEE;
    border:2px solid #DDDDCC;
}

td{
    cursor:pointer;
}

#free{
    background-color:#fff;
    color:#eee;
    cursor:default;
}

And finally all of that JavaScript goodness: script.js

$(document).ready(function(){

    var usedArray = new Array(76);
    var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var number = 0;
    var base = 0;

    init();

    function init(){
        for(var i = 0; i<24; i++){
            fillCard(i);
        }
    }

    function fillCard(i){
        base = baseArray[i] * 15;
        number = base + Math.floor(Math.random()*15)+1;

        if(usedArray[number] != true){
            $('#cell'+i).html(number);
            usedArray[number] = true;
        }else{
            fillCard(i);
        }
    }

    function resetUsedNumbersArray(){
        for(var j = 0; j < usedArray.length; j++){
            usedArray[j] = false;
        }
    }

    $('#newCard').click(function(){
        resetUsedNumbersArray();
        init();
    });

    $('td').click(function(){

        var toggle = this.style;
        toggle.backgroundColor = toggle.backgroundColor? "":"#333";
        toggle.color = toggle.color? "":"#fff";
    });

});

Something to read while eating your sandwich and drinking your tea, yummie! Extreme programming!!