Let's create a CASE and embody the IMCE integration on it:

- An application named myApp
- Has an url field for file url:
<input type="text" name="urlField" id="urlField">
- Has a browse button with click event(inline or set by jQuery): (This can be a text link or anything that is clickable)
<input type="button" value="Browse" onclick="openFileBrowser()">

Now let's go through the integration methods and define the openFileBrowser function that opens IMCE and makes it fill our url field on file selection.

INTEGRATION BY URL
-----------
When IMCE is opened using an url that contains &app=applicationName|fileProperty1@FieldId1|fileProperty2@FieldId2|...
the specified fields are filled with the specified properties of the selected file.

Avaliable file properties are: url, name, size(formatted), width, height, date(formatted), bytes(integer size in bytes), time(integer date timestamp), id(file id for newly uploaded files, 0 or integer), relpath(rawurlencoded path relative to file directory path.)

In our CASE, we should open IMCE using this URL: /imce?app=myApp|url@urlField which contains our application name and our url field id

That's all we need. Leave the rest to IMCE.
It will automatically create an operation tab named "Insert file" that sends the file url to our url field.
Clicking the files in preview do the same thing as well.

- What if we had another field for another file property e.g, Size: <input type="text" id="file-size"> ?
- We should have opened imce using this URL: /imce?app=myApp|url@urlField|size@file-size

- USING imceload:
You can point a predefined function to be executed when IMCE loads.
When the URL is like "app=myApp|imceload@myOnloadFunc", IMCE looks for "myOnloadFunc" in the parent window and executes it with the window parameter referring to IMCE window.

- USING sendto:
You can point a predefined function to which the selected files are sent.
When the URL is like "app=myApp|sendto@myFileHandler", IMCE calls "myFileHandler" function of the parent window with file and window parameters.

Usually sendto method is easier to implement, on the other hand imceload method is more flexible as you manually add your sento operator and also can do any modification before IMCE shows up.

ADVANCED INTEGRATION
-----------
In case:
- Your application wants to go beyond the simple "give me that file property" interaction with IMCE.
- Your application wants IMCE to send multiple files to it.(e.g., a gallery application)
- Your application wants to gain total control over IMCE.
Then you should consider applying advanced integration.

The initial step of advanced integration is the same as imceload-integration above.

We open IMCE and set its onload function:
window.open('/imce?app=myApp|imceload@initiateMyApp', '', 'width=760,height=560,resizable=1'); //initiateMyApp(win) will run when imce loads

Now we define our initiator function in which we do the necessary manipulations to IMCE interface:

- Allright, but what do we add/romeve/change in IMCE ?
- Depends on our goal. Here are some properties and methods that can help us to achieve it:

Hooks
imce.hooks.load: an array of functions that run after imce loads. they are called with the window parameter.
imce.hooks.list: an array of functions that run while processing the file list. each row of the file list is sent to these functions.
imce.hooks.navigate: an array of functions that run after a directory is loaded. parameters sent are data(from ajax or cache), old_directory, cached(boolean that states the data is from the cache or not).
imce.hooks.cache: an array of functions that run just before a new directory is loaded. parameters are cached_data and new_directory.

Directory related properties
imce.tree: stores the directory list where imce.tree['.'] is the root element.

Directory related methods
imce.dirAdd(directory_name, parent_element, clickable): adds directory_name under parent_element. ex: imce.dirAdd('foo', imce.dir['.'], true)
imce.dirSubdirs(directory_name, subdirectories): adds each subdirectory in subdirectories array under directory_name. ex: imce.dirSubdirs('foo', ['bar', 'baz'])

File related properties
imce.findex: indexed array of files(table rows that contain file properties.)
imce.fids: object containing file_id(file name)-file(row) pairs.
imce.selected: object containing currently selected file_id(file name)-file(row) pairs.

File related methods
imce.fileAdd(file): adds the file object to the list. file object has the properties; name, size(bytes), width, height, date(timestamp), fsize(formatted), fdate(formatted)
imce.fileRemove(fiile_id): removes the file having the file_id from the list.
imce.fileGet(file_id). returns the file object having the file_id. file object contains name, url, size, bytes, width, height, date, time, id(file id for newly uploaded files, 0 or integer), relpath(rawurlencoded path relative to file directory path.)

File operations
imce.opAdd(op): adds an operation tab to the interface. op contains name, title, content(optional), func(optional onclick function)
imce.opEnable(name), imce.opDisable(name): enable/disable operation tabs.

Miscellaneous
imce.setMessage(msg, type): logs a message of the type(status, warning, error)