<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>中文 Garden</title>
	<link rel="stylesheet"  href="js/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.css">
  <link rel="stylesheet"  href="js/jquery.mobile-1.3.0/jquery.mobile.structure-1.3.0.min.css">
  <link rel="stylesheet"  href="js/jquery.mobile-1.3.0/themes/plant.min.css">
  <link rel="stylesheet"  href="js/jquery-mobile-iscrollview/lib/jquery.mobile.iscrollview.css">
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/field.css" rel="stylesheet">
  <link href="css/shop.css" rel="stylesheet">
  <link href="css/seeds.css" rel="stylesheet">
  <script type="text/javascript" src="phonegap.js"></script>
  <script src="js/jquery.js"></script>
</head>
<body>
<div data-role="page" id="loadingPage" data-theme="a">
  <div data-role="content" data-theme="a">
    <div class="loading-screen">
      <img src="img/loading.png" />
    </div>
	</div>
</div>

<div data-role="page" id="fieldPage" data-theme="a">
  <div data-role="content" data-theme="a">
	</div>
</div>

<div data-role="page" id="quizPage" data-theme="a">
  <div data-role="header">
    <a data-icon="delete"
      data-iconpos="notext"
      id="cancelQuiz"
      title="Close"></a>
    <h1>Quiz</h1>
	</div><!-- /header -->
	<div class="yuan">
    <span class="current-balance"></span>
    <img src="img/yuan.png" />
  </div>
  <div class="quiz-container" data-role="content" data-theme="a">
  </div>
  <div data-role="popup" data-theme="a" id="wrong" data-position-to="#popupLocation">
    <p>Sorry, wrong answer.</p>
    <center><a data-role="button" data-theme="a" data-inline="true" class="ok-popup">O.K.</a></center>
  </div>
  <div data-role="popup" data-theme="e" id="reward" data-position-to="#popupLocation"></div>
</div>

<div data-role="page" id="shopPage" data-theme="a" data-corners="false">

	<div data-role="header"></div>
	
	<div class="yuan">
    <span class="current-balance"></span>
    <img src="img/yuan.png" />
  </div>

	<div data-role="content" data-theme="a" class="shop-page-content">
    
	  <div class="shop-container">
      <div class="roof-top">
        <div class="lighting"></div>
        <div class="ledge"></div>
      </div>
      <div class="pillar pillar-l">
      </div>
      <div class="pillar pillar-r">
      </div>
	  	<a class="close-shop"
    	  style="z-index: 500;"
        data-rel="back"
        data-role="button"
        data-iconpos="notext"
        data-mini="true"
        data-inline="true"
        data-shadow="true"
        data-icon="delete">Close</a>
    	<div class="shop-content"></div>
      <div class="shop-bottom ui-body-a"></div>
      

  <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="ui-bar footer-bar">
    <div class="button-container">
      <a href="#catalog"
        class="catalog-btn"
        data-role="button">Phrases you own</a>
    </div>
  </div>
  	</div>
	</div><!-- /content -->
</div><!-- /page two -->

<div data-role="dialog"
    id="catalog"
    data-theme="a"
    data-overlay-theme="a"
    data-corners="false">
  <div data-role="header" data-theme="a"><h1>Catalog</h1></div>
  <div data-role="content" data-theme="a">
    <ul class="catalog-symbols" data-role="listview" data-theme="a">
      <li>List not loaded.</li>
    </ul>
  </div>
</div>

<div data-role="dialog"
    id="settings"
    data-theme="a"
    data-corners="false">
  <div data-role="header" data-theme="a"><h1>Settings</h1></div>
  <div data-role="content" data-theme="a">
    
    <form id="settings-container">
      <script id="settings-template" type="text/x-ejs-template">
        <% _.each(settings, function(setting){  %>
          <fieldset data-role="controlgroup" data-type="horizontal" >
            <legend><%- setting.label  %></legend>
            <% _.each(setting.options, function(option, optionIdx){  %>
              <input 
                <%- setting.value == (optionIdx > 0) ? "checked" : "" %>
                type="radio" 
                name="<%- setting.name  %>" 
                id="<%- setting.name + option  %>" 
                value="<%- optionIdx  %>"  />
              <label for="<%- setting.name + option  %>"><%- option  %></label>
            <% }); %>
          </fieldset>
        <% }); %>
        <% if(debug){  %>
          <a data-role="button" class="add-money-btn">Add Money</a>
        <% } %>
        <% if(!initialized){  %>
          <a data-role="button" class="save-btn">O.K.</a>
        <% } else { %>
          <a data-role="button" class="save-btn">Save</a>
          <a data-role="button" class="wipe-data-btn">Clear data</a>
        <% } %>
      </script>
    </form>
  </div>
</div>

<div data-role="dialog" id="help-popup" data-theme="a" data-corners="false">
  <div data-role="header" data-theme="a" class="ui-corner-top">
		<h1>Advice</h1>
	</div>
	<div data-role="content" data-theme="a" class="advice ui-corner-bottom ui-content">
    <p>By scrolling up and down in the seed-selector you can find characters that bloom in different amounts of time.
    Expensive characters and characters that take a long time to bloom are more profitable.
    </p>
    <p>You can sell multiple phrases together if they intersect on a character like in a crossword puzzle.
    The intersecting characters get counted twice when the bouquet chain is sold.
    However, chains cannot contain duplicate words.
    </p>
    <p>It is a good idea to sell the same words multiple times to learn them better and to recover the cost of unlocking them.
    </p>
    <p>If you run out of money to buy flowers, you can earn money by plucking weeds.
    </p>
	</div>
</div>

<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/backbone.localStorage.js"></script>
<script src="js/levenshtein.js"></script>
<script type="text/javascript"  id="hacks">
//I can't disable the hash listening without breaking history,
//so instead I'm clearning the url hash because I always want to start on the field page.
window.location.hash = '';
$(document).bind("mobileinit", function(){
  document.addEventListener("deviceready", function(){
    document.addEventListener("backbutton", function(){
      var pageName = $.mobile.activePage.attr( "id" );
      if(selectedLocations.length === 1 && !selectedLocations.first().get('symbol')) {
        //deselect the tile
        selectedLocations.reset();
      } else if(pageName === "quizPage"){
        coverScreen();
      } else if(pageName === "fieldPage"){
        //TODO: tap again to confirm
        window.navigator.app.exitApp();
      } else {
        window.history.back();
      }
    }, true);
  }, false);
  
  
  $.extend( $.mobile , {
    ignoreContentEnabled : true
    //hashListeningEnabled: false
    //pushStateEnabled: false
  });
  
  //Make is so scrolling cancels clicks.
  //jQM seems to do this:
  //http://api.jquerymobile.com/vclick/
  //However it uses page offsets, which don't work with iscroll views.
  //This fix only seems to work on mobile.
  var lastDownEvt;
  $(document).on("vmousedown", function(evt) {
    lastDownEvt = evt;
  });
  $(document).on("vmouseup vmouseout", function (evt){
    var thresh = 16;
    if(!lastDownEvt) return;
    if(evt.target !== lastDownEvt.target) return;
    if(Math.abs(evt.screenX - lastDownEvt.screenX) > thresh ||
       Math.abs(evt.screenY - lastDownEvt.screenY) > thresh) {
      $(lastDownEvt.target).trigger("vmousecancel");
    }
  });
});
</script>
<script src="js/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/jquery-mobile-iscrollview/lib/jquery.mobile.iscrollview.js"></script>
<script src="js/utils.js"></script>
<script src="js/app.js"></script>
<script src="js/settings.js"></script>
<script src="js/tutorial.js"></script>
<script src="js/challenges.js"></script>
<script id="ss-template" type="text/x-ejs-template">
<div style="min-width: <%- (longestTierLength + 1) * 130 + 175 %>px;">
  <% _.each(seedsByTier, function(tier, idx){ %>
    <div class="seed-tier-title ss-item" data-idx="<%- idx %>">
      <h1 class="<%- ("" + Math.pow(2, tier.tierNum)).length > 2 ? 'big-text' : 'bigger-text' %>">
        <%- Math.pow(2, tier.tierNum) %>
      </h1>
      <div class="minute-bloom">minute bloom</div>
    </div>
    <% _.each(tier.seeds, function(packet){ %>
      <% if(packet.locked){ %>
        <div class="selectable-packet ss-item" >
          <div class="seeds locked" 
          data-spid="<%- packet.spid %>"
          data-cost="<%- packet.cost %>"
          data-tier="<%- packet.tierNum %>" >
            <div class="symbol">?</div>
            <div class="seed-packet-price">
            <%- packet.cost %> 元
            </div>
            <div class="to-unlock">to unlock</div>
          </div>
        </div>
      <% } else { %>
        <div class="selectable-packet ss-item">
          <div class="seeds useable-seeds" 
          data-spid="<%- packet.spid %>"
          data-cost="<%- packet.cost %>"
          data-tier="<%- packet.tierNum %>">
            <div class="fold"><div class="seed-packet-price"><%- packet.cost %> 元</div></div>
            <div class="symbol"><%- packet.symbol %></div>
            <div class="seed-transcription"><%= packet.transcription %></div>
            <div class="seed-translation"><%- packet.english || ". . ." %></div>
          </div>
        </div>
      <% } %>
    <% }); %>
    <br />
  <% }); %>
</div>
</script>
<script id="field-template" type="text/x-ejs-template">
  <div data-role="header" class="field-header">
  </div>
	<div class="yuan">
    <span class="current-balance"></span>
    <img src="img/yuan.png" />
  </div>
  <div id="seed-selector">
    <div class="st-container">

      <a class="close-seed-selector" 
        data-role="button"
        data-theme="b"
        data-iconpos="notext"
        data-mini="true"
        data-inline="true"
        data-icon="delete">Close</a>
      
      <span class="seed-type-label">Seed Type:</span>
      <a class="seed-type" 
        data-role="button"
        data-theme="b"
        data-iconpos="right"
        data-mini="true"
        data-inline="true"
        data-icon="arrow-d"><%- seedType %></a>
    </div>
    <div data-iscroll='{
      "hScroll": true,
      "vScroll": true,
      "hScrollbar":true,
      "resizeEvents":"resize orientationchange",
      "scrollerClass": "seed-scroll",
      "wrapperClass": "seed-scroll-wrap",
      "scrollerContentClass": "seed-selector-content",
      "snap": ".ss-item",
      "bounce": false
    }'>
    </div>
  </div>

  <div data-role="content" class="field-content">
    <div data-iscroll='{
      "hScroll":true,
      "vScrollbar":false,
      "resizeEvents":"resize orientationchange",
      "scrollerClass":"field-scroll",
      "wrapperClass":"field-wrap",
      "scrollerContentClass":"field-content",
      "bounce": false,
      "lockDirection": false
      }' >
      <div class="sky">
        <img class="game-title" src="img/title.png" />
        <img class="sky-bg" src="img/bg_mountains.png" />
        <div class="sky-fog"></div>
      </div>
      <div class="decor">
        <img class="housie" src="img/housie.png" />
        <div class="embeded-menu">
          <a href="#challenges"
            data-role="button"
            data-mini="true"
            data-icon="star"
            data-theme="a"
            class="challenge-btn">Challenges</a>
          <a href="#settings"
            data-role="button"
            data-mini="true"
            data-icon="gear"
            data-theme="a">Settings</a>
          <a href="#help-popup"
            data-role="button"
            data-mini="true"
            data-icon="info">Advice
          </a>
          <!-- <a id="tutorial" 
            data-role="button"
            data-mini="true"
            data-icon="gear"
            data-theme="a">Tutorial</a> -->
        </div>
        <img class="challenge-tree" src="img/ch_tree.png" />
      </div>
      <div id="field" style="width:<%- rows * 60 %>px;">
        <% _.each(_.range(rows), function(row){  %>
          <div>
          <% _.each(_.range(cols), function(column){ 
              %><div
                class="tile"
                id="y<%- row %>x<%- column %>"
                data-y="<%- row %>"
                data-x="<%- column %>"></div><% 
          }); %>
          </div>
        <% }); %>
        <div class="field-bottom">&nbsp;</div>
        <div class="the-ends-of-the-earth">&nbsp;</div>
      </div>
      <div class="selection"></div>
    </div>
  </div>

  <% /* TODO: Fix this, it creates space at bottom of page */ %>
  <div data-role="panel"
      id="challenges"
      data-theme="a"
      data-display="overlay">
    <div class="challenges-header" data-role="header" data-theme="a">
      <h3>Challenges:</h3>
      <a data-icon="delete"
        data-iconpos="notext"
        data-mini="true"
        data-inline="true"
        data-rel="close"
        data-theme="b"></a>
    </div>
    
    <ul class="challenge-list" data-role="listview" data-theme="a">
        <li>Loading challenges...</li>
    </ul>
  </div>

	<div data-role="popup" id="seed-type-select" data-theme="a" class="click-to-close">
		<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
			<li data-role="divider" data-theme="a">Select Seed Type</li>
      <% _.each(seedTypes, function(seedType){  %>
        <li><a class="seed-type-option"><%- seedType  %></a></li>
      <% }); %>
		</ul>
	</div>
	
  <div data-role="popup" id="complete-popup" data-theme="a" data-position-to="window" class="click-to-close">
    <div data-role="header" data-theme="a" class="ui-corner-top">
			<h1>Congratulations!</h1>
		</div>
		<div data-role="content" data-theme="a" class="ui-corner-bottom ui-content" style="max-width:500px;">
      <p>Way to go! You completed all the challenges in 中文 Garden. But don't let that slow you down...</p>
      <p>There are many more things to grow, <a href="https://www.youtube.com/watch?v=OFzXaFbxDcM">in the garden of your mind</a>.</p>
		</div>
	</div>
	
  <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="ui-bar footer-bar">
    <div class="button-container">
      <a data-role="button" data-theme="b" style="float:left;" class="pluck-btn ui-disabled">Pluck &amp; Sell</a>
      <a data-role="button" style="float:right;" class="phrase-shop-btn">Phrase Shop</a>
    </div>
  </div>
</script>

<script id="quiz-template" type="text/x-ejs-template">
    <div class="quiz-symbol-box"><%= symbols %></div>
    <p style="text-align: center;">
      <% if(type === "transcription"){ %>
        To sell this <%- itemType %> select its <%- myGameState.get('useZhuyin') ? 'zhuyin' : 'pīnyīn' %> transcription.
      <% } else if(type === "english"){ %>
        To sell this <%- itemType %> select its meaning.
      <% } else if(type === "weed"){ %>
        To pluck the weed select the character with this <%- myGameState.get('useZhuyin') ? 'zhuyin' : 'pīnyīn' %> transcription.
      <% } %>
    </p>
    <div class="answers"></div>
    <div id="popupLocation" style="position: absolute; bottom: 100px; width: 100%;"></div>
</script>

<script id="shop-template" type="text/x-ejs-template">
  <div class="shop-sign">
    <div class="shop-sign-text">Phrase Shop</div>
  </div>
  <% if(items.length === 0){  %>
    <div class="shelf">
      <div class="shelf-overhang ui-body-a"></div>
      <h3 style="margin-left: 20px;margin-right:20px;">
        Sorry, there are no more phrases that can be planted
        with the seeds you have unlocked so far.
      </h3>
    </div>
  <% } %>
  <% _.each(_.range(items.length / itemsPerShelf), function(shelf){  %>
    <div class="shelf">
      <div class="shelf-overhang ui-body-a"></div>
      <% _.each(items.slice(shelf * itemsPerShelf, shelf * itemsPerShelf + itemsPerShelf),
      function(item){  %><!--
        --><div class="buyable-item" data-spid="<%-item.spid %>">
          <div class="price"><%-item.cost %> 元</div>
          <div class="book">
            <img src="img/book.png" />
            <div class="book-title <%-item.symbols.length > 3 ? 'long' : '' %>"><%-item.symbols %></div>
            <div class="book-subtitle"><%-item.meaning %></div>
          </div>
        </div><!--
      --><% }); %>
    </div>
  <% }); %>
    
  </div>
</script>

<script id="catalog-item-template" type="text/x-ejs-template">
  <li class="catalog-item">
    <span><strong><%- symbols %></strong></span>
    <span><%= transcription %></span>
    <span><%- obj.english || "" %></span>
    <!--

    <span><%- numPlanted %></span>
    <span><%- numPlucked %></span>
    
    <% if('tier' in obj){  %>
      <span><%- tier %></span>
    <% } %>
    -->
  </li>
</script>

<script id="reward-template" type="text/x-ejs-template">
  <p id="reward-audit">
  <% if(itemType === 'weed') { %>
    You got <b><%- totalReward %> 元</b> for plucking an unsightly weed!
  <% } else { %>
      You got <b><%- totalReward %> 元</b>
      for your <%- _.shuffle(
          "beautiful|delightful|devine|exquisite|glorius|handsome|lovely|marvelous|sublime|spectacular".split('|')
      )[0] %>
      <%- itemType %>
      <% if(valuedFlowerObjects.length > 1){  %>
        <hr />
        <div style="text-align: center;">
          <% _.each(valuedFlowerObjects, function(fob){  %>
            + <%- fob.value %> for <%- fob.symbol %><br />
          <% }); %>
          <hr />
          <%- flowerSum %> 元<br />
          x <%- bouquetMultiplier %> bouquet multiplier
        </div>
      <% } %>
    <% } %>
  </p>
  <center><a data-role="button" data-theme="e" data-inline="true" class="ok-popup">O.K.</a></center>
</script>
</html>