====== Combining JavaScript Modules ======
When combining two or more JavaScript modules together, the first thing to consider is the use of CF.userMain function.\\
This function can only be implemented once in your entire project - see [[http://commandfusion.com/docs/scripting/startup.html#startup_sequence|here]] for more details on this.

As an example, lets say we have two scripts in our project, but both have defined their own CF.userMain() function, like so:

''Script1.js''
<sxh js; light: true;>
CF.userMain = function() {
    // iViewer initialization is now complete and the CF environment is fully available

    // Watch for page flips
    CF.watch(CF.PageFlipEvent, onPageFlip);

    // Watch for network status, get initial status
    CF.watch(CF.NetworkStatusChangeEvent, onNetworkStatusChange);

    // Watch for important system connects and disconnects
    CF.watch(CF.ConnectionStatusChangeEvent, "TEST-SYSTEM", onTestSystemConnectionStatusChange, true);
    CF.watch(CF.ConnectionStatusChangeEvent, "SERVER SYSTEM", onServerSystemConnectionStatusChange, true);

    // Watch for some crucial join changes
    CF.watch(CF.JoinChangeEvent, ["d10", "d11", "d12", "a50"], onImportantJoinChange);
};
</sxh>

''Script2.js''
<sxh js; light: true;>
CF.userMain = function() {
	// Create interlock group for buttons
	Interlock.create("buttons", "d1","d2","d3","d4");

	// Create an interlock group for subpages
	Interlock.create("subpages", ["d100", "d200", "d300", "d400"]);

	// Setup a watch callback to display the current selection
	Interlock.watch("buttons", function(group, currentSelection, previousSelection) {
		CF.setJoin("s1", "Current selection in group 1 is " + currentSelection);
		// show the subpage associated with interlock group 1
		// do it the lazy way - d1 becomes d100, d2 becomes d200 etc
		// when we show one of the subpages, the subpages interlock group kicks in and hides the others
		Interlock.select("subpages", currentSelection+"00");
	});

	// Set the group initial values
	Interlock.select("buttons", "d2");
};
</sxh>

The first thing you should do is create a single ''main.js'' file, and create a single CF.userMain function within it.\\
Then merge the contents of both CF.userMain functions (as defined in the two scripts above) into one like so:

''main.js''
<sxh js; light: true;>
CF.userMain = function() {
    // iViewer initialization is now complete and the CF environment is fully available

    // Watch for page flips
    CF.watch(CF.PageFlipEvent, onPageFlip);

    // Watch for network status, get initial status
    CF.watch(CF.NetworkStatusChangeEvent, onNetworkStatusChange);

    // Watch for important system connects and disconnects
    CF.watch(CF.ConnectionStatusChangeEvent, "TEST-SYSTEM", onTestSystemConnectionStatusChange, true);
    CF.watch(CF.ConnectionStatusChangeEvent, "SERVER SYSTEM", onServerSystemConnectionStatusChange, true);

    // Watch for some crucial join changes
    CF.watch(CF.JoinChangeEvent, ["d10", "d11", "d12", "a50"], onImportantJoinChange);
    
    // Create interlock group for buttons
    Interlock.create("buttons", "d1","d2","d3","d4");

    // Create an interlock group for subpages
    Interlock.create("subpages", ["d100", "d200", "d300", "d400"]);

    // Setup a watch callback to display the current selection
    Interlock.watch("buttons", function(group, currentSelection, previousSelection) {
        CF.setJoin("s1", "Current selection in group 1 is " + currentSelection);
        // show the subpage associated with interlock group 1
        // do it the lazy way - d1 becomes d100, d2 becomes d200 etc
        // when we show one of the subpages, the subpages interlock group kicks in and hides the others
        Interlock.select("subpages", currentSelection+"00");
    });

    // Set the group initial values
    Interlock.select("buttons", "d2");
};
</sxh>

Next step is to remove the CF.userMain functions completely from your other scripts. Only one JavaScript file in your entire guiDesigner project should mention CF.userMain (use find tools in your text editor to ensure they are completely removed from your original scripts).

Last step is to add the ''main.js'' script to your guiDesigner project by adding it to your project using the Script Manager (accessible via the main toolbar or via your project properties in guiDesigner).

It is a good idea to have ''main.js'' as the last script in your Script Manager - this just ensures that it is the last code run (but iViewer itself will make sure any content within CF.userMain is always the last thing to be run once the JavaScript API is running).