[MemoryGame]update MemoryGame(tizen_2.1)

Change-Id: I4c1c122fe687c7610ac1824e153b70a05f70dda6

diff --git a/LICENSE.APLv2.0 b/LICENSE.APLv2.0
deleted file mode 100755 (executable)
index 5d43a8b..0000000
--- a/LICENSE.APLv2.0
+++ /dev/null
@@ -1,204 +0,0 @@
-                                                               Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!) The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
-
-
-

diff --git a/NOTICE.APLv2.0 b/NOTICE.APLv2.0
deleted file mode 100755 (executable)
index 79aca6c..0000000
--- a/NOTICE.APLv2.0
+++ /dev/null
@@ -1,4 +0,0 @@
-Copyright (c) 2012, Intel Corporation.
-
-This program is licensed under the terms and conditions of the Apache License, version 2.0.
-The full text of the Apache License is at http://www.apache.org/licenses/LICENSE-2.0

diff --git a/config.xml b/config.xml
index 3fda260..154ca18 100755 (executable)
--- a/config.xml
+++ b/config.xml
@@ -4,5 +4,5 @@
        <content src="index.html" />
        <name>MemoryGame</name>
        <tizen:application id="E4PRo70Ja6.MemoryGame" package="E4PRo70Ja6" required_version="2.1" />
-       <tizen:setting screen-orientation="landscape" contextmenu="enable" />
+        <tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto"/>
 </widget>

diff --git a/index.html b/index.html
index edf345a..083fc1b 100755 (executable)
--- a/index.html
+++ b/index.html
@@ -9,639 +9,219 @@
 -->
 <html>
 <head>
-<meta id="viewport_meta" name="viewport" content="" />
-<script type="text/javascript">
-       var viewport_meta = document.getElementById('viewport_meta');
-       var w = screen.availWidth;
-       var h = screen.availHeight;
-       viewport_meta.setAttribute('content', 'width=' + w + ', height=' + h + ',user-scalable=no');
-</script>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Memory Cards for Older Kids</title>
-<link rel="stylesheet" type="text/css" href="css/main.css"></link>
-<link rel="stylesheet" type="text/css" href="css/license.css"></link>
-<link rel="stylesheet" type="text/css" href="css/help.css"></link>
-<script src="js/help.js"></script>
-<script src="js/license.js"></script>
-<script src="js/jquery-1.7.2.min.js"></script>
-<script src="js/localizer.js"></script>
-<script src="js/main.js"></script>
-<script src="js/card.js"></script>
-<script src="js/curvedtextdrawer.js"></script>
-<script src="js/vec2.js"></script>
-<script src="js/utils.js"></script>
+    <meta id="viewport_meta" name="viewport" content="" />
+               <script type="text/javascript">
+                       var viewport_meta = document.getElementById('viewport_meta');
+                       var w = screen.availWidth;
+                       var h = screen.availHeight;
+                       viewport_meta.setAttribute('content', 'width=' + w + ', height=' + h + ',user-scalable=no');
+               </script>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Memory Cards for Older Kids</title>
+    <link rel="stylesheet" type="text/css" href="css/main.css"></link>
+    <link rel="stylesheet" type="text/css" href="css/license.css"></link>
+    <link rel="stylesheet" type="text/css" href="css/help.css"></link>
 </head>
 <body>
-       <!-- The "div.pagebg" is the root level div that will be resized to fill the whole screen area.
+    <!-- The "div.pagebg" is the root level div that will be resized to fill the whole screen area.
         This element has children div-elements for each view. These child divs are then shown or hidden
         as user navigates between views. -->
-       <div id="licensepage" style="display: none">
-               <div id="licensetext">
-                       <div id="licensescroll"></div>
-               </div>
-               <div id="licensebtnq" class="licensebtn">Back</div>
-       </div>
-       <div id="help_dialog" class="helpdialog">
-               <div class="inner">
-                       <div id="help_close" class="close">x</div>
-                       <div id="help_contents" class="contents">
-                               Can you make it through level four, and find all the matching
-                               pictures? <br>
-                               Start your journey at level one. Finish the level one
-                               challenge by finding all the pictures three times. After you’ve
-                               beaten level one, you’ve unlocked level two.  Each level gets
-                               tougher with more pictures to match. <br>
-                               Click a face-down picture card to peek at it. Click
-                               another to see if you found a match. If not, they’ll flip back over
-                               and you can try again. If they do match, they’ll remain face up, and
-                               you’re getting closer to winning! <br>
-                               If you want to restart and try a different unlocked level,
-                               click Home and you’ll go back to the beginning.
-                       </div>
-               </div>
-       </div>
-       <div id="pagebg" class="game_page">
-               <div id="main_page" class="game_page" style="display: block">
-                       <div id="main_bg"></div>
-                       <div id="main_spetacular_title" class="main_sancreek_text2">THE
-                               SPECTACULAR</div>
-                       <div id="main_memory_title" class="main_romantique_text">MEMORY</div>
-                       <div id="main_extravaganza_title" class="main_sancreek_text">EXTRAVAGANZA!</div>
-               </div>
-
-               <div id="selLevel_page" class="game_page" style="display: none">
-                       <div id="selLevel_bg"></div>
-                       <div id="selLevel_title" class="selLevel_sancreek_big">CHOOSE A
-                               LEVEL</div>
-                       <div id="selLevel_hint" class="selLevel_sancreek_small">YOU
-                               MUST UNLOCK EACH LEVEL IN ORDER TO PLAY!</div>
-
-                       <div id="selLevel_levelCard1" class="selLevel_levelCard">1</div>
-                       <div id="selLevel_levelCard2"
-                               class="selLevel_levelCard setLevel_lockedLevel">2</div>
-                       <div id="selLevel_levelCard3"
-                               class="selLevel_levelCard setLevel_lockedLevel">3</div>
-                       <div id="selLevel_levelCard4"
-                               class="selLevel_levelCard setLevel_lockedLevel">4</div>
-
-                       <div id="selLevel_resetLocked"></div>
-                       <div id="licensebtnl" style="top: 560px; left: 984px;">i</div>
-                       <div id="main_help" class="helplaunch">?</div>
-               </div>
-
-               <div id="level1" class="game_page" style="display: none">
-                       <div id="level1_bg"></div>
-                       <div id="level1_indicator" class="level1_indicator_text">LEVEL
-                               1</div>
-
-                       <!-- Cards -->
-                       <div id="level1_card_01" class="cardContainer">
-                               <div id="l1c1" class="card">
-                                       <div id="level1_card_1_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_02" class="cardContainer">
-                               <div id="l1c2" class="card">
-                                       <div id="level1_card_2_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_03" class="cardContainer">
-                               <div id="l1c3" class="card">
-                                       <div id="level1_card_3_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_04" class="cardContainer">
-                               <div id="l1c4" class="card">
-                                       <div id="level1_card_4_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_05" class="cardContainer">
-                               <div id="l1c5" class="card">
-                                       <div id="level1_card_5_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_06" class="cardContainer">
-                               <div id="l1c6" class="card">
-                                       <div id="level1_card_6_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_07" class="cardContainer">
-                               <div id="l1c7" class="card">
-                                       <div id="level1_card_7_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_08" class="cardContainer">
-                               <div id="l1c8" class="card">
-                                       <div id="level1_card_8_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_09" class="cardContainer">
-                               <div id="l1c9" class="card">
-                                       <div id="level1_card_9_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_10" class="cardContainer">
-                               <div id="l1c10" class="card">
-                                       <div id="level1_card_10_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_11" class="cardContainer">
-                               <div id="l1c11" class="card">
-                                       <div id="level1_card_11_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level1_card_12" class="cardContainer">
-                               <div id="l1c12" class="card">
-                                       <div id="level1_card_12_front" class="front"></div>
-                                       <div class="back lev1CardBg"></div>
-                               </div>
-                       </div>
-
-               </div>
-
-               <div id="level2" class="game_page" style="display: none">
-                       <div id="level2_bg"></div>
-                       <div id="level2_indicator" class="level2_indicator_text">LEVEL
-                               2</div>
-
-                       <!-- Cards -->
-                       <div id="level2_card_01" class="cardContainer">
-                               <div id="l2c1" class="card">
-                                       <div id="level2_card_1_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_02" class="cardContainer">
-                               <div id="l2c2" class="card">
-                                       <div id="level2_card_2_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_03" class="cardContainer">
-                               <div id="l2c3" class="card">
-                                       <div id="level2_card_3_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_04" class="cardContainer">
-                               <div id="l2c4" class="card">
-                                       <div id="level2_card_4_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_05" class="cardContainer">
-                               <div id="l2c5" class="card">
-                                       <div id="level2_card_5_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_06" class="cardContainer">
-                               <div id="l2c6" class="card">
-                                       <div id="level2_card_6_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_07" class="cardContainer">
-                               <div id="l2c7" class="card">
-                                       <div id="level2_card_7_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_08" class="cardContainer">
-                               <div id="l2c8" class="card">
-                                       <div id="level2_card_8_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_09" class="cardContainer">
-                               <div id="l2c9" class="card">
-                                       <div id="level2_card_9_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_10" class="cardContainer">
-                               <div id="l2c10" class="card">
-                                       <div id="level2_card_10_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_11" class="cardContainer">
-                               <div id="l2c11" class="card">
-                                       <div id="level2_card_11_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_12" class="cardContainer">
-                               <div id="l2c12" class="card">
-                                       <div id="level2_card_12_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_13" class="cardContainer">
-                               <div id="l2c13" class="card">
-                                       <div id="level2_card_13_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_14" class="cardContainer">
-                               <div id="l2c14" class="card">
-                                       <div id="level2_card_14_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_15" class="cardContainer">
-                               <div id="l2c15" class="card">
-                                       <div id="level2_card_15_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_16" class="cardContainer">
-                               <div id="l2c16" class="card">
-                                       <div id="level2_card_16_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_17" class="cardContainer">
-                               <div id="l2c17" class="card">
-                                       <div id="level2_card_17_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level2_card_18" class="cardContainer">
-                               <div id="l2c18" class="card">
-                                       <div id="level2_card_18_front" class="front"></div>
-                                       <div class="back lev2CardBg"></div>
-                               </div>
-                       </div>
-               </div>
-
-               <div id="level3" class="game_page" style="display: none">
-                       <div id="level3_bg"></div>
-                       <div id="level3_indicator" class="level3_indicator_text">LEVEL
-                               3</div>
-
-                       <!-- Cards -->
-                       <div id="level3_card_01" class="cardContainer">
-                               <div id="l3c1" class="card">
-                                       <div id="level3_card_1_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_02" class="cardContainer">
-                               <div id="l3c2" class="card">
-                                       <div id="level3_card_2_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_03" class="cardContainer">
-                               <div id="l3c3" class="card">
-                                       <div id="level3_card_3_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_04" class="cardContainer">
-                               <div id="l3c4" class="card">
-                                       <div id="level3_card_4_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_05" class="cardContainer">
-                               <div id="l3c5" class="card">
-                                       <div id="level3_card_5_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_06" class="cardContainer">
-                               <div id="l3c6" class="card">
-                                       <div id="level3_card_6_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_07" class="cardContainer">
-                               <div id="l3c7" class="card">
-                                       <div id="level3_card_7_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_08" class="cardContainer">
-                               <div id="l3c8" class="card">
-                                       <div id="level3_card_8_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_09" class="cardContainer">
-                               <div id="l3c9" class="card">
-                                       <div id="level3_card_9_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_10" class="cardContainer">
-                               <div id="l3c10" class="card">
-                                       <div id="level3_card_10_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_11" class="cardContainer">
-                               <div id="l3c11" class="card">
-                                       <div id="level3_card_11_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_12" class="cardContainer">
-                               <div id="l3c12" class="card">
-                                       <div id="level3_card_12_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_13" class="cardContainer">
-                               <div id="l3c13" class="card">
-                                       <div id="level3_card_13_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_14" class="cardContainer">
-                               <div id="l3c14" class="card">
-                                       <div id="level3_card_14_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_15" class="cardContainer">
-                               <div id="l3c15" class="card">
-                                       <div id="level3_card_15_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_16" class="cardContainer">
-                               <div id="l3c16" class="card">
-                                       <div id="level3_card_16_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_17" class="cardContainer">
-                               <div id="l3c17" class="card">
-                                       <div id="level3_card_17_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_18" class="cardContainer">
-                               <div id="l3c18" class="card">
-                                       <div id="level3_card_18_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_19" class="cardContainer">
-                               <div id="l3c19" class="card">
-                                       <div id="level3_card_19_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_20" class="cardContainer">
-                               <div id="l3c20" class="card">
-                                       <div id="level3_card_20_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_21" class="cardContainer">
-                               <div id="l3c21" class="card">
-                                       <div id="level3_card_21_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_22" class="cardContainer">
-                               <div id="l3c22" class="card">
-                                       <div id="level3_card_22_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_23" class="cardContainer">
-                               <div id="l3c23" class="card">
-                                       <div id="level3_card_23_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level3_card_24" class="cardContainer">
-                               <div id="l3c24" class="card">
-                                       <div id="level3_card_24_front" class="front"></div>
-                                       <div class="back lev3CardBg"></div>
-                               </div>
-                       </div>
-               </div>
-
-               <div id="level4" class="game_page" style="display: none">
-                       <div id="level4_bg"></div>
-                       <div id="level4_indicator" class="level3_indicator_text">FINALE!</div>
-
-                       <!-- Cards -->
-                       <div id="level4_card_01" class="cardContainer">
-                               <div id="l4c1" class="card">
-                                       <div id="level4_card_1_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_02" class="cardContainer">
-                               <div id="l4c2" class="card">
-                                       <div id="level4_card_2_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_03" class="cardContainer">
-                               <div id="l4c3" class="card">
-                                       <div id="level4_card_3_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_04" class="cardContainer">
-                               <div id="l4c4" class="card">
-                                       <div id="level4_card_4_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_05" class="cardContainer">
-                               <div id="l4c5" class="card">
-                                       <div id="level4_card_5_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_06" class="cardContainer">
-                               <div id="l4c6" class="card">
-                                       <div id="level4_card_6_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_07" class="cardContainer">
-                               <div id="l4c7" class="card">
-                                       <div id="level4_card_7_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_08" class="cardContainer">
-                               <div id="l4c8" class="card">
-                                       <div id="level4_card_8_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_09" class="cardContainer">
-                               <div id="l4c9" class="card">
-                                       <div id="level4_card_9_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_10" class="cardContainer">
-                               <div id="l4c10" class="card">
-                                       <div id="level4_card_10_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_11" class="cardContainer">
-                               <div id="l4c11" class="card">
-                                       <div id="level4_card_11_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_12" class="cardContainer">
-                               <div id="l4c12" class="card">
-                                       <div id="level4_card_12_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_13" class="cardContainer">
-                               <div id="l4c13" class="card">
-                                       <div id="level4_card_13_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_14" class="cardContainer">
-                               <div id="l4c14" class="card">
-                                       <div id="level4_card_14_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_15" class="cardContainer">
-                               <div id="l4c15" class="card">
-                                       <div id="level4_card_15_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_16" class="cardContainer">
-                               <div id="l4c16" class="card">
-                                       <div id="level4_card_16_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_17" class="cardContainer">
-                               <div id="l4c17" class="card">
-                                       <div id="level4_card_17_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_18" class="cardContainer">
-                               <div id="l4c18" class="card">
-                                       <div id="level4_card_18_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_19" class="cardContainer">
-                               <div id="l4c19" class="card">
-                                       <div id="level4_card_19_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_20" class="cardContainer">
-                               <div id="l4c20" class="card">
-                                       <div id="level4_card_20_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_21" class="cardContainer">
-                               <div id="l4c21" class="card">
-                                       <div id="level4_card_21_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_22" class="cardContainer">
-                               <div id="l4c22" class="card">
-                                       <div id="level4_card_22_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_23" class="cardContainer">
-                               <div id="l4c23" class="card">
-                                       <div id="level4_card_23_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-                       <div id="level4_card_24" class="cardContainer">
-                               <div id="l4c24" class="card">
-                                       <div id="level4_card_24_front" class="front"></div>
-                                       <div class="back lev4CardBg"></div>
-                               </div>
-                       </div>
-               </div>
-
-               <div id="finaleIntro" class="game_page" style="display: none">
-                       <div id="finaleIntro_bg"></div>
-                       <div id="finaleIntro_introducing_title"
-                               class="finaleIntro_sancreek_text">INTRODUCING THE</div>
-                       <div id="finaleIntro_finale_title"
-                               class="finaleIntro_romantique_text">FINALE</div>
-                       <div id="finaleIntro_memorymatch_title"
-                               class="finaleIntro_sancreek_text2">MEMORY MATCH!</div>
-               </div>
-
-               <div id="victory" class="game_page" style="display: none">
-                       <div id="victory_bg"></div>
-                       <div id="victory_playagain_box">
-                               <img id="victory_playagain_lines" src="images/play_again_lines.png" />
-                               <div id="victory_playagain_title"
-                                       class="victory_playagain_title_text">PLAY AGAIN</div>
-                       </div>
-                       <canvas id="curvedText" width="690" height="210"></canvas>
-               </div>
-
-               <!-- Game count indicator that looks like a hand holding a card. -->
-               <div id="handitem" style="display: none">
-                       <div id="handitem_card_rect">
-                               <div id="handitem_gamenum_title" class="handitem_gamenum_title_text">GAME
-                                       3</div>
-                               <div id="handitem_stars_container">
-                                       <img id="handleitem_star1" src="images/purple_star.png"></img> <img
-                                               id="handleitem_star2" src="images/star.png"></img> <img
-                                               id="handleitem_star3" src="images/star.png"></img>
-                               </div>
-                       </div>
-               </div>
-
-               <!-- Home-button that exits the current game and returs back to main view. -->
-               <div id="homebutton_backtomain" style="display: none">
-                       <img id="homebutton_icon" src="images/home.png"></img> <span
-                               id="homebutton_text" class="homebutton_backtomain_text"
-                               class="debugRect">HOME</span>
-               </div>
-       </div>
-
-
-       <audio id="flipcard_sound1" preload="auto">
-       <source src="audio/FlipCard.wav" type="audio/wav" /></audio>
-       <audio id="flipcard_sound2" preload="auto">
-       <source src="audio/FlipCard.wav" type="audio/wav" /></audio>
-       <audio id="startGame_sound" preload="auto" autoplay="autoplay">
-       <source src="audio/StartPage.wav" type="audio/wav" /></audio>
-       <audio id="finaleIntro_sound" preload="auto">
-       <source src="audio/TheFinale.wav" type="audio/wav" /></audio>
-       <audio id="winLevel_sound" preload="auto">
-       <source src="audio/WinLevel.wav" type="audio/wav" /></audio>
-       <audio id="victory_sound" preload="auto">
-       <source src="audio/YouWin.wav" type="audio/wav" /></audio>
+    <div id="licensepage" style="display: none">
+        <div id="licensetext"><div id="licensescroll"></div></div>
+        <div id="licensebtnq" class="licensebtn">Back</div>
+    </div>
+    <div id="help_dialog" class="helpdialog">
+         <div class="inner">
+           <div id="help_close" class="close"> x </div>
+           <div id="help_contents" class="contents">
+               Can you make it through level four,
+               and find all the matching pictures?
+               <br><br>
+               Start your journey at level one. Finish the level one
+               challenge by finding all the pictures three times.
+               After you’ve beaten level one, you’ve unlocked level two. 
+               Each level gets tougher with more pictures to match.
+               <br><br>
+               Click a face-down picture card to peek at it. Click another
+               to see if you found a match. If not, they’ll flip back over
+               and you can try again. If they do match, they’ll remain face up,
+               and you’re getting closer to winning!
+               <br><br>
+               If you want to restart and try a different unlocked level,
+               click Home and you’ll go back to the beginning.
+           </div>
+         </div>
+    </div>
+    <div id="pagebg" class="game_page">
+        <div id="main_page" class="game_page" style="display:block">
+            <div id="main_bg"></div>
+            <div id="main_spetacular_title" class="main_sancreek_text2">THE SPECTACULAR</div>
+            <div id="main_memory_title" class="main_romantique_text">MEMORY</div>
+            <div id="main_extravaganza_title" class="main_sancreek_text">EXTRAVAGANZA!</div>
+        </div>
+
+        <div id="selLevel_page" class="game_page" style="display:none">
+            <div id="selLevel_bg"></div>
+            <div id="selLevel_title" class="selLevel_sancreek_big">CHOOSE A LEVEL</div>
+            <div id="selLevel_hint" class="selLevel_sancreek_small">YOU MUST UNLOCK EACH LEVEL IN ORDER TO PLAY!</div>
+
+            <div id="selLevel_levelCard1" class="selLevel_levelCard">1</div>
+            <div id="selLevel_levelCard2" class="selLevel_levelCard setLevel_lockedLevel">2</div>
+            <div id="selLevel_levelCard3" class="selLevel_levelCard setLevel_lockedLevel">3</div>
+            <div id="selLevel_levelCard4" class="selLevel_levelCard setLevel_lockedLevel">4</div>
+
+            <div id="selLevel_resetLocked"></div>
+            <div id="licensebtnl" style="top: 560px; left: 984px;"> i </div>
+            <div id="main_help" class="helplaunch"> ? </div>
+        </div>
+
+        <div id="level1" class="game_page" style="display:none">
+            <div id="level1_bg"></div>
+            <div id="level1_indicator" class="level1_indicator_text">LEVEL 1</div>
+
+            <!-- Cards -->
+            <div id="level1_card_01" class="cardContainer"><div id="l1c1" class="card"><div id="level1_card_1_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_02" class="cardContainer"><div id="l1c2" class="card"><div id="level1_card_2_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_03" class="cardContainer"><div id="l1c3" class="card"><div id="level1_card_3_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_04" class="cardContainer"><div id="l1c4" class="card"><div id="level1_card_4_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_05" class="cardContainer"><div id="l1c5" class="card"><div id="level1_card_5_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_06" class="cardContainer"><div id="l1c6" class="card"><div id="level1_card_6_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_07" class="cardContainer"><div id="l1c7" class="card"><div id="level1_card_7_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_08" class="cardContainer"><div id="l1c8" class="card"><div id="level1_card_8_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_09" class="cardContainer"><div id="l1c9" class="card"><div id="level1_card_9_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_10" class="cardContainer"><div id="l1c10" class="card"><div id="level1_card_10_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_11" class="cardContainer"><div id="l1c11" class="card"><div id="level1_card_11_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+            <div id="level1_card_12" class="cardContainer"><div id="l1c12" class="card"><div id="level1_card_12_front" class="front"></div><div class="back lev1CardBg"></div></div></div>
+
+        </div>
+
+        <div id="level2" class="game_page" style="display:none">
+            <div id="level2_bg"></div>
+            <div id="level2_indicator" class="level2_indicator_text">LEVEL 2</div>
+
+            <!-- Cards -->
+            <div id="level2_card_01" class="cardContainer"><div id="l2c1" class="card"><div id="level2_card_1_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_02" class="cardContainer"><div id="l2c2" class="card"><div id="level2_card_2_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_03" class="cardContainer"><div id="l2c3" class="card"><div id="level2_card_3_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_04" class="cardContainer"><div id="l2c4" class="card"><div id="level2_card_4_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_05" class="cardContainer"><div id="l2c5" class="card"><div id="level2_card_5_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_06" class="cardContainer"><div id="l2c6" class="card"><div id="level2_card_6_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_07" class="cardContainer"><div id="l2c7" class="card"><div id="level2_card_7_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_08" class="cardContainer"><div id="l2c8" class="card"><div id="level2_card_8_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_09" class="cardContainer"><div id="l2c9" class="card"><div id="level2_card_9_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_10" class="cardContainer"><div id="l2c10" class="card"><div id="level2_card_10_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_11" class="cardContainer"><div id="l2c11" class="card"><div id="level2_card_11_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_12" class="cardContainer"><div id="l2c12" class="card"><div id="level2_card_12_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_13" class="cardContainer"><div id="l2c13" class="card"><div id="level2_card_13_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_14" class="cardContainer"><div id="l2c14" class="card"><div id="level2_card_14_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_15" class="cardContainer"><div id="l2c15" class="card"><div id="level2_card_15_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_16" class="cardContainer"><div id="l2c16" class="card"><div id="level2_card_16_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_17" class="cardContainer"><div id="l2c17" class="card"><div id="level2_card_17_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+            <div id="level2_card_18" class="cardContainer"><div id="l2c18" class="card"><div id="level2_card_18_front" class="front"></div><div class="back lev2CardBg"></div></div></div>
+        </div>
+
+        <div id="level3" class="game_page" style="display:none">
+            <div id="level3_bg"></div>
+            <div id="level3_indicator" class="level3_indicator_text">LEVEL 3</div>
+
+            <!-- Cards -->
+            <div id="level3_card_01" class="cardContainer"><div id="l3c1" class="card"><div id="level3_card_1_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_02" class="cardContainer"><div id="l3c2" class="card"><div id="level3_card_2_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_03" class="cardContainer"><div id="l3c3" class="card"><div id="level3_card_3_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_04" class="cardContainer"><div id="l3c4" class="card"><div id="level3_card_4_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_05" class="cardContainer"><div id="l3c5" class="card"><div id="level3_card_5_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_06" class="cardContainer"><div id="l3c6" class="card"><div id="level3_card_6_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_07" class="cardContainer"><div id="l3c7" class="card"><div id="level3_card_7_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_08" class="cardContainer"><div id="l3c8" class="card"><div id="level3_card_8_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_09" class="cardContainer"><div id="l3c9" class="card"><div id="level3_card_9_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_10" class="cardContainer"><div id="l3c10" class="card"><div id="level3_card_10_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_11" class="cardContainer"><div id="l3c11" class="card"><div id="level3_card_11_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_12" class="cardContainer"><div id="l3c12" class="card"><div id="level3_card_12_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_13" class="cardContainer"><div id="l3c13" class="card"><div id="level3_card_13_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_14" class="cardContainer"><div id="l3c14" class="card"><div id="level3_card_14_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_15" class="cardContainer"><div id="l3c15" class="card"><div id="level3_card_15_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_16" class="cardContainer"><div id="l3c16" class="card"><div id="level3_card_16_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_17" class="cardContainer"><div id="l3c17" class="card"><div id="level3_card_17_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_18" class="cardContainer"><div id="l3c18" class="card"><div id="level3_card_18_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_19" class="cardContainer"><div id="l3c19" class="card"><div id="level3_card_19_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_20" class="cardContainer"><div id="l3c20" class="card"><div id="level3_card_20_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_21" class="cardContainer"><div id="l3c21" class="card"><div id="level3_card_21_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_22" class="cardContainer"><div id="l3c22" class="card"><div id="level3_card_22_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_23" class="cardContainer"><div id="l3c23" class="card"><div id="level3_card_23_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+            <div id="level3_card_24" class="cardContainer"><div id="l3c24" class="card"><div id="level3_card_24_front" class="front"></div><div class="back lev3CardBg"></div></div></div>
+        </div>
+
+        <div id="level4" class="game_page" style="display:none">
+            <div id="level4_bg"></div>
+            <div id="level4_indicator" class="level3_indicator_text">FINALE!</div>
+
+            <!-- Cards -->
+            <div id="level4_card_01" class="cardContainer"><div id="l4c1" class="card"><div id="level4_card_1_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_02" class="cardContainer"><div id="l4c2" class="card"><div id="level4_card_2_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_03" class="cardContainer"><div id="l4c3" class="card"><div id="level4_card_3_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_04" class="cardContainer"><div id="l4c4" class="card"><div id="level4_card_4_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_05" class="cardContainer"><div id="l4c5" class="card"><div id="level4_card_5_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_06" class="cardContainer"><div id="l4c6" class="card"><div id="level4_card_6_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_07" class="cardContainer"><div id="l4c7" class="card"><div id="level4_card_7_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_08" class="cardContainer"><div id="l4c8" class="card"><div id="level4_card_8_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_09" class="cardContainer"><div id="l4c9" class="card"><div id="level4_card_9_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_10" class="cardContainer"><div id="l4c10" class="card"><div id="level4_card_10_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_11" class="cardContainer"><div id="l4c11" class="card"><div id="level4_card_11_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_12" class="cardContainer"><div id="l4c12" class="card"><div id="level4_card_12_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_13" class="cardContainer"><div id="l4c13" class="card"><div id="level4_card_13_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_14" class="cardContainer"><div id="l4c14" class="card"><div id="level4_card_14_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_15" class="cardContainer"><div id="l4c15" class="card"><div id="level4_card_15_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_16" class="cardContainer"><div id="l4c16" class="card"><div id="level4_card_16_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_17" class="cardContainer"><div id="l4c17" class="card"><div id="level4_card_17_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_18" class="cardContainer"><div id="l4c18" class="card"><div id="level4_card_18_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_19" class="cardContainer"><div id="l4c19" class="card"><div id="level4_card_19_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_20" class="cardContainer"><div id="l4c20" class="card"><div id="level4_card_20_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_21" class="cardContainer"><div id="l4c21" class="card"><div id="level4_card_21_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_22" class="cardContainer"><div id="l4c22" class="card"><div id="level4_card_22_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_23" class="cardContainer"><div id="l4c23" class="card"><div id="level4_card_23_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+            <div id="level4_card_24" class="cardContainer"><div id="l4c24" class="card"><div id="level4_card_24_front" class="front"></div><div class="back lev4CardBg"></div></div></div>
+        </div>
+
+        <div id="finaleIntro" class="game_page" style="display:none">
+            <div id="finaleIntro_bg"></div>
+            <div id="finaleIntro_introducing_title" class="finaleIntro_sancreek_text">INTRODUCING THE</div>
+            <div id="finaleIntro_finale_title" class="finaleIntro_romantique_text">FINALE</div>
+            <div id="finaleIntro_memorymatch_title" class="finaleIntro_sancreek_text2">MEMORY MATCH!</div>
+        </div>
+
+        <div id="victory" class="game_page" style="display:none">
+            <div id="victory_bg"></div>
+            <div id="victory_playagain_box">
+                <img id="victory_playagain_lines" src="images/play_again_lines.png"/>
+                <div id="victory_playagain_title" class="victory_playagain_title_text">PLAY AGAIN</div>
+            </div>
+            <canvas id="curvedText" width="690" height="210"></canvas>
+        </div>
+
+        <!-- Game count indicator that looks like a hand holding a card. -->
+        <div id="handitem" style="display:none">
+            <div id="handitem_card_rect">
+                <div id="handitem_gamenum_title" class="handitem_gamenum_title_text">GAME 3</div>
+                <div id="handitem_stars_container">
+                    <img id="handleitem_star1" src="images/purple_star.png"></img>
+                    <img id="handleitem_star2" src="images/star.png"></img>
+                    <img id="handleitem_star3" src="images/star.png"></img>
+                </div>
+            </div>
+        </div>
+
+        <!-- Home-button that exits the current game and returs back to main view. -->
+        <div id="homebutton_backtomain" style="display:none">
+            <img id="homebutton_icon" src="images/home.png"></img>
+            <span id="homebutton_text" class="homebutton_backtomain_text" class="debugRect">HOME</span>
+        </div>
+    </div>
+    <script src="js/help.js"></script>
+    <script src="js/license.js"></script>
+    <script src="js/jquery-1.7.2.min.js"></script>
+    <script src="js/main.js"></script>
+       <script src="js/vec2.js"></script>
+    <script src="js/utils.js"></script>
+    <script src="js/curvedtextdrawer.js"></script>
 </body>
 </html>

diff --git a/js/main.js b/js/main.js
index 569c851..35ff283 100755 (executable)
--- a/js/main.js
+++ b/js/main.js
@@ -7,6 +7,14 @@
  *
  */
 
+Card = function() {
+    this.cardId = "";
+    this.cardFrontId = "";
+    this.cardGraphics = "";
+    this.cardType = -1;
+    this.found = false;
+}
+
 Game = {};
 
 var normalCardImages = [
@@ -53,6 +61,15 @@ var audioItems = [
     "victory_sound"
 ];
 
+var audioSrc = [
+    "audio/FlipCard.wav",
+    "audio/FlipCard.wav",
+    "audio/StartPage.wav",
+    "audio/TheFinale.wav",
+    "audio/WinLevel.wav",
+    "audio/YouWin.wav"
+];
+
 var SOUND_FLIPCARD1 = 0;
 var SOUND_FLIPCARD2 = 1;
 var SOUND_STARTGAME = 2;
@@ -68,7 +85,6 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
 
 
 (function () {
-    var localizer = new Localizer();
     var cardsArray = new Array();
     var levelSelectionUserChoice = -1;
     var ignoreInputs = false;
@@ -87,6 +103,22 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
     Game.introViewSkipCallback = introViewSkipCallback;
 
     /**
+     * Create sound element base on their ID
+     */
+    function createSoundElement(soundId) {
+        var audioElement = document.createElement('audio');
+        audioElement.setAttribute("id", audioItems[soundId]);
+        audioElement.setAttribute("src", audioSrc[soundId]);
+        if (soundId == SOUND_STARTGAME) {
+            audioElement.setAttribute("preload", "auto");
+            audioElement.setAttribute("autoplay", "autoplay");
+        } else {
+            audioElement.setAttribute("preload", "none");
+        }
+        document.body.appendChild(audioElement);
+    }
+
+    /**
      * Plays sounds base on their ID
      */
     function playSound(soundId) {
@@ -99,14 +131,12 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
      * This function prepares the graphical elements of Victory-screen.
      */
     function prepareVictoryScreen() {
-        localizer.localizeVictoryScreen();
-
         // Draw the curved YOU WIN text.
         var drawer = new CurvedTextDrawer(document.getElementById("curvedText"));
         var centerPos = drawer.getCanvasCenterPos();
         centerPos.mY = -625;
         drawer.useFont = '70px Romantiques';
-        drawer.drawSectorArc(localizer.getTranslation("victory_youwin"), centerPos.mX, centerPos.mY, 780, 180, 270, 'ccw', true, 'center');
+        drawer.drawSectorArc("YOU WIN", centerPos.mX, centerPos.mY, 780, 180, 270, 'ccw', true, 'center');
 
         $("#homebutton_backtomain").hide();
     }
@@ -117,7 +147,6 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
      */
     function prepareSelectLevelScreen() {
         console.log("--> prepareSelectLevelScreen()");
-        localizer.localizeSelectLevelScreen();
         var lockedLevels = localStorage.getItem(LOCAL_STORAGE_KEY);
         for (var i=1; i < levelLockingStatus.length; ++i) {
             if (lockedLevels != undefined && lockedLevels != null && lockedLevels.length > i) {
@@ -294,6 +323,7 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
             saveStatus();
             // Currently finished level was 4. It means that player has finished the game.
             prepareVictoryScreen();
+            createSoundElement(SOUND_VICTORY);
             playSound(SOUND_VICTORY);
             $("#level4").hide();
             $("#victory").show();
@@ -314,8 +344,8 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
         }
         if (levelOfNextGame == 4) {
             // Show intro view before entring the final level.
-            localizer.localizeFinaleIntroScreen();
             levelLockingStatus[3] = false;
+            createSoundElement(SOUND_FINALEINTRO);
             playSound(SOUND_FINALEINTRO);
             $("#homebutton_backtomain").hide();
             $("#handitem").hide();
@@ -424,7 +454,6 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
             $("#handitem_gamenum_title").text("GAME 3");
         }
 
-        localizer.localizeGameScreen(levelNum, passedGames+1);
         $("#homebutton_backtomain").show();
         console.log("<-- startGame()");
     }
@@ -435,22 +464,23 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
             $("#main_page").hide();
             $("#selLevel_page").show();
         }
+        license_init("license", "pagebg");
+        help_init("main_help", "help_");
+        createSoundElement(SOUND_FLIPCARD1);
+        createSoundElement(SOUND_FLIPCARD2);
+        createSoundElement(SOUND_LEVEL_WON);
     }
 
     // Initialize game once everything has been loaded.
     $(document).ready(function () {
         console.log("--> document.ready()");
 
-        license_init("license", "pagebg");
-        help_init("main_help", "help_");
-        localizer.localizeMainScreen();
+        createSoundElement(SOUND_STARTGAME);
 
         // Add the event handler functions.
         $("#main_page").click(function () {
             // Hide mainview and show level selection.
-            prepareSelectLevelScreen();
-            $("#main_page").hide();
-            $("#selLevel_page").show();
+            introViewSkipCallback();
         });
 
         $("#selLevel_levelCard1").click(function () {
@@ -507,6 +537,7 @@ var LOCAL_STORAGE_KEY = "memorygame_locked_levels";
                 } else {
                     lastPlayedFlipSound = SOUND_FLIPCARD1;
                 }
+                createSoundElement(SOUND_FLIPCARD1);
                 playSound(lastPlayedFlipSound);
                 clickedCardElement = $(this);
                 ignoreInputs = true;

diff --git a/signature1.xml b/signature1.xml
old mode 100644 (file)
new mode 100755 (executable)
index 5d986f6..a2c77fd
--- a/signature1.xml
+++ b/signature1.xml
@@ -368,4 +368,4 @@ S5WLPBgd4IQpQ0tNiGd2NLyCqaZXL7U=
 </X509Data>
 </KeyInfo>
 <Object Id="prop"><SignatureProperties xmlns:dsp="http://www.w3.org/2009/xmldsig-properties"><SignatureProperty Id="profile" Target="#DistributorSignature"><dsp:Profile URI="http://www.w3.org/ns/widgets-digsig#profile"></dsp:Profile></SignatureProperty><SignatureProperty Id="role" Target="#DistributorSignature"><dsp:Role URI="http://www.w3.org/ns/widgets-digsig#role-distributor"></dsp:Role></SignatureProperty><SignatureProperty Id="identifier" Target="#DistributorSignature"><dsp:Identifier></dsp:Identifier></SignatureProperty></SignatureProperties></Object>
-</Signature>
\ No newline at end of file
+</Signature>