Create more layout samples, simplify edition

[joaorb64]

• Create a global library file to clean up all the .js
• Comment code
• Create documentation for editing layouts
• Check for errors such as undefined variables, etc
• Idea: have the js search for specific classes and check if the element exists to add text into it. Example: jQuery search for ".p1-name" so user can put this anywhere in the html (or not) and it will just work. Do this for all exported variables, maybe in an automatic way using key names from json

[joaorb64]

For new samples:

• Showcase Japanese kana to romaji
• Showcase animated alternating text (show player name, then twitter, then go back to name...)
• Showcase alternating logos
• Have a versus/head to head layout
• Try to pull data from other sources using smashgg id, if possible. PowerRankings has support for that

[joaorb64]

Maybe if the starting animation uses classes like ".fadein" ".scrollDown" (and if there's support for mixing animations using gsap) it could be possible to make it reeeeeally easy for the end user.

Example: <div class="text_p1_twitter fade_in slide_right align_left kana_to_romaji"></div>

Still, the user has to put those in the html and edit stuff on the CSS. Maybe have the elements positioned via inline HTML or have a second CSS ready for the user to edit and overwrite rules...?