How to best design (code wise) a highly interactive web page in JS
Let me start by giving a bit of background on me so you know what my status is, I'm a experienced web developer, have knowledge of design patterns, and come from a background of performance and optimizations. However, most of my background is server-side down to the server OS and it's config. I code mainly in PHP and Python. I do know HTML, JS and CSS to a certain level - far from calling myself a front-end developer.
My question is this; I'm currently working on a small personal project in which i have a single web page (the main part of it anyway) which has basically a map (Google map), a side bar (show relevant data on the map) and a top bar with controls (to effect what's visible on the map+side bar). This page is highly "interactive" and every action, whether on the map, the sidebar or the controls effects any number of other elements. for example, clicking somewhere on a map, might highlight a sidebar item, and vise versa. (it could be that for every action there is a opposite action, or not... 1 way actions/2 way actions)
What are the "best practices" or best design patterns to build the JS library to power these interactions? I'm trying to avoid repeating myself in the code and also making it easy to maintain and add "actions/interaction" in the future.
I was thinking of building a PageManager object (of sorts) which has all these "events" then use JQuery to add these custom events thus enabling the correlation of 2 way actions...
I would like to know how you would go about designing the main JS and any other tips you client-side guru's might have :)
Good day and thanks for all the fish .. i mean tips..