This blueprint has already become a mess, please suggest some restructuring

I'm particularly concerned about where I have declared the functions, can I move them around to clean up the code without breaking anything? The "conjugate" function contains a lot of stuff that has nothing to do with actually conjugating verbs and rather handles output strings and html DOM objects. I really want to minimalize/optimize that function so it only does the essential and have the other DOM stuff handled by a more appropriate function but I'm scared to break anything lol

Also my use of multiple global variables, is there a better way to do that?

Sorry for the incredibly noobish question but I have kinda rushed through this to get my ideas down as quick as possible and it's suddenly become a bit overwhelming :/

Thanks in advance for any help!

```




.answer {

list-style-type: none;
cursor: pointer;
font-family: fontin;
}
#base, .answer {
padding:10px 15px;
background-color: #B7BECC;
overflow: auto;
margin: 20px 1px;
border: 1px solid;
font-size: 18.7pt;
text-align: center;
display:inline;
}
#base {
border-radius: 10px;
}
.answers{
margin-top:30px;
}
#container{
margin: 21px auto;
position: relative;
width: 100%;
max-width: 1000px;
text-align: center;
min-width: 600px;
}



$(function () {
var video = $("#video").get(0);
var baseverbs = ["작다", "놀다", "닦다"];
var questionnum = 0;
var correct = "";
//set mouseover colors
$(".answer").each(function () {
$(this).mouseover(function () {

I didn't really have a chance to really take this apart but your first foreach loop binding the mouseover events can actually be written like in this jsfiddle http://jsfiddle.net/KSzFy/

When you call a event binding function on a jquery array it will apply the event to all items in the jquery array.

As far as dealing with global functions and variables, its best to wrap all of them in a javascript object and then bind that object to the window. That way you are still keeping the potential for naming collisions to a minimum but you are also creating ad-hoc name spaces for yourself.

window.pageSpaceName = {
      publicVariable : 'value',
      publicFunction : function(){alert('I do something')}
}

Also since all JS objects are really just hashes, jquery has a handy function called extend that will combine objects together for you allowing you to 'import' separate pieces of your js namespace together.

Assume we have a top level javascript object with functions that are required across the entire site.

(function(){
   $.extend(true, siteNameSpace, {pageSpaceName : {
       publicVariable : 'value',
       publicFunction : function(){alert('I do something')}
    }});
}).call(this);

then on your page you can access your variables and functions like so

window.siteNameSpace.pageSpaceName.publicFunction();

If you have all of your objects in self executing blocks and are using extend like in the example importing the namespaces will be as simple as including the script file on the page.

I generally create a 'global' namespace object and include it in the base page of the site so every child page will already have that base object created for it.

window.siteNameSpace = {};

StackExchange Code Review Q#20495, answer score: 3