<ion-view >

	<ion-nav-title>
	<span>{{remainingTime}}</span><br />
	<span>{{lastwords}}</span>
	  
	</ion-nav-title>
	<ion-nav-buttons side="right"	>  
        <span class="icon chat chatLink" ng-click="chatOption()"></span>
	</ion-nav-buttons>
	<ion-content scroll="false">
	<div ng-init="loadboard()">
						<!-------------- GAME BOARD -------------------- START ------------------------- -->
						<div >
							<div class="ui-droppable" ng-drop="true" ng-drop-success="onDropComplete($data,$event)" id="main">
								<img alt="Image" class="img-thumbnail img-responsive ui-droppable new-padding" src="images/board_en.png" />
								<div id="wildcard_selector" ng-show="wildCardFlag">

									<div class="back"></div>
									<div class="container" id="wild-container">
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('a')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_a">A</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('b')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_b">B</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('c')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_c">C</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('d')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_d">D</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('e')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_e">E</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('f')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_f">F</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('g')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_g">G</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('h')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_h">H</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('i')">
											<div class="tile size40 moveable"> 
												<div style="display: none" class="index"></div>
												<div class="letter letter_i">I</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('j')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_j">J</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('k')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_l">K</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('l')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_l">L</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('m')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_m">M</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('n')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_n">N</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('o')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_o">O</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('p')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_p">P</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('q')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_q">Q</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('r')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_r">R</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('s')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_s">S</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('t')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_t">T</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('u')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_u">U</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('v')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_v">V</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('w')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_z">W</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('x')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_x">X</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('y')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_y">Y</div>

											</div>
										</div>
										<div class="wild_selector_tile wildcard-letter" ng-click="wildCardletter('z')">
											<div class="tile size40 moveable">
												<div style="display: none" class="index"></div>
												<div class="letter letter_z">Z</div>

											</div>
										</div>
									</div>
								</div>

								<div ng-bind-html="opponentPlacedTiles"></div>
								<div ng-bind-html="pointsHtml" class="pointsDiv"></div>
								<div ng-bind-html="validateHtml" id="validHtml" class="pointsDiv"></div>
								<div class="content"></div>
								<div style="display: none;" class="loading_view" ng-show="loading_view">
									<div class="inside">
										<img src="images/loading_image.gif">

										<div class="caption"></div>
									</div>
								</div>

							</div>
						</div>
					<!-------------- GAME BOARD -------------------- END ------------------------- -->
					
					<!-------------- GAME RACK -------------------- START ------------------------- -->
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ui-droppable new-padding">
						<div class="rackContainer">
							<div class="mix" data-my-order="1">
							<div id = "tileHolder0" class="tileHolder"   >
								<div id = "tileContainer0" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer0')">
									<div class="index" style="display:none">1</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" ></div>
								</div>
							</div>
							</div>
							<div class="mix" data-my-order="2">
							<div id = "tileHolder1" class="tileHolder"   >
								<div id = "tileContainer1" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer1')">
									<div class="index" style="display:none">2</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" ></div>
								</div>
							</div>
							</div>
							<div class="mix" data-my-order="3">
							<div id = "tileHolder2" class="tileHolder">
								<div id = "tileContainer2" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer2')">
									<div class="index" style="display:none">3</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" ></div>
								</div>
							</div>
							</div>
							<div class="mix" data-my-order="4">
							<div id = "tileHolder3" class="tileHolder"   >
								<div id = "tileContainer3" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer3')">
									<div class="index" style="display:none">4</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" ></div>
								</div>
							</div>
							</div>
							<div class="mix" data-my-order="5">
							<div id = "tileHolder4" class="tileHolder"   >
								<div id = "tileContainer4" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer4')">
									<div class="index" style="display:none">5</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" ></div>
								</div>
							</div>
							</div>
							<div class="mix" data-my-order="6">
							<div id = "tileHolder5" class="tileHolder"  >
								<div id = "tileContainer5" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer5')">
									<div class="index" style="display:none">6</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" ></div>
								</div>
							</div>
							</div>
							<div class="mix" data-my-order="7">
							<div id = "tileHolder6" class="tileHolder"   >
								<div id = "tileContainer6" class="tile moveable ui-draggable in_rack"  ng-click="addtoSwapArr('tileContainer6')">
									<div class="index" style="display:none">7</div>
									<div class="letter letter_b letterTileContainer"></div>
									<div class="points" style="float:right;letterTileContainerwidth: 14px;"></div>
								</div>
							</div>
							</div>
						</div>
							
							
					<!-------------- GAME RACK -------------------- END ------------------------- -->
					
					<div style="clear:both;"></div>
					
					 
					<!-------------- GAME FOOTER -------------------- START ------------------------- -->
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style=" padding: 0;"
						ng-hide="showGamesList">
						<div class="game-footer ui-droppable" >
							<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 new-padding ">
								<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 new-padding-left" ng-show="my_turn" ng-click="play()">
									<button class="bar_button play enabled">
										<span class="icon play"></span> <span
											class="button_description"><span rel="localize[play]">Play</span></span>
									</button>
								</div>
								<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 new-padding" ng-show="my_turn"  ng-click="passMyturn()">
									<button class="bar_button pass enabled">
										<span class="icon pass"></span> <span
											class="button_description"><span rel="localize[pass]">Pass</span></span>
									</button>
								</div>
								<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 new-padding-left" ng-hide="my_turn">
									<button class="bar_button poke enabled">
										<span class="icon poke"></span> <span
											class="button_description"><span rel="localize[poke]">Poke</span></span>
									</button>
								</div>
								<div class="col-xs-2 col-sm-3 col-md-3 col-lg-3 new-padding" ng-hide="my_turn">
									<button class="bar_button share">
										<span class="icon share"></span> <span
											class="button_description"><span rel="localize[share]">Share</span></span>
									</button>
								</div>
								<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 new-padding-left" ng-show="my_turn">
									<button id="recall_" class="bar_button recall enabled" ng-show="recallflag" ng-click="recall()">
										<span class="icon recall"></span> <span
											class="button_description"><span
											rel="localize[recall]">Recall</span></span>
									</button>
									<button id="swap_" class="bar_button swap swapping enabled"
										ng-click="showSwapPopupfun()" style="margin-left: 5px" ng-hide="recallflag">
										<span class="icon swap"></span> <span
											class="button_description"><span rel="localize[swap]">Swap</span></span>
									</button>
								</div>
								<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 new-padding-left" ng-hide="my_turn">
									<button id="shuffle" class="shuffle sort bar_button swap swapping enabled" data-sort="random" style="margin-left:5px">
										<span class="icon newshuffel"></span>
										<span class="button_description"><span rel="localize[swap]">Shuffle</span></span>
									</button>
								</div>
								<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 new-padding-left"
									style="margin-left: 3%; padding-right: 0%">
									<button class="bar_button more enabled" ng-click="moreopen()"
										ng-hide="moreScreen">
										<span class="icon more"></span> <span
											class="button_description"><span rel="localize[more]">more</span></span>
									</button>
									<button class="bar_button closes enabled closes" ng-show="moreScreen" ng-click="moreclose()">
										<span class="icon more"></span> <span class="button_description"><span rel="localize[close]">Close</span></span>
									</button>

								</div>
							</div>
							<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 new-padding" >
						<div class="footer-right">
							<div class="star" ng-show="my_turn"></div>
							<div class="footer-name-score">
								<span rel="localize[you]" class="footer-name" >You</span> 
								<span class="ng-binding footer-score">{{my_score}}</span>
							</div>
						</div>
						<div class="footer-right">
							<div class="star" ng-hide="my_turn"></div>
							<div class="footer-name-score">
								<span class="ng-binding footer-name" rel="LOCALIZE[BUTTON_RANDOM_OPPONENT]" >{{opponentUsername}}</span> 
								<span class="ng-binding footer-score">{{opponent_score}}</span>
							</div>
						</div>
						<div class="footer-tiles">	
							<div class="ng-binding footer-remaining-tile">
							{{remaining_tiles}}</div>
							<span rel="localize[remaining]" class="footer-score">Tiles</span>									
									</div>
						</div>
					</div>
			
						<!-------------- MORE OPTION -------------------- START ------------------------- -->
						
						<div id="backmore" ng-show="moreScreen">
							<form
								class="container-transluscent ng-pristine ng-valid col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" >
									<div class="switch">
										<input type="checkbox" id="share_checkbox"
											class="fix_checkbox" name="share_checkbox">
										<div></div>
										<span class="on">I</span> <span class="off">0</span>
									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
									<label for="share_checkbox" class="already_understand">
										<span rel="localize[extras_tutorial_09]">I understood </span>
									</label>
								</div>
							</form>
							<div id="arrow-letter">
								<span rel="localize[extras_tutorial_04]"> See which tile have<br>
									not been played
								</span> <span style="" class="arrowletters"></span>
							</div>
							<div id="arrow-validate">
								<span rel="localize[extras_tutorial_06]">Validate your words <br>automatically!
								</span> <span class="arrowvalidate" style=""></span>
							</div>
							<div id="arrow-dictionary">
								<span rel="localize[extras_tutorial_06]">See your words <br>in dictionary
								</span> <span class="arrowdictionary" style=""></span>
							</div>
						</div>
						<div class="extras highlight" ng-show="moreScreen">
							<div class="button-group">
								<div>
									<div class="button-container"
										ng-click="ShowTileBagAlertBox()">
										<button class="btn-extra btn-stock_pile">
											<span class="power-icon stock_pile"></span>
										</button>
										<span class="caption"><span
											rel="localize[extra_letters]">Letters</span></span> <span
											class="bg-selected"></span>
									</div>
									<div class="button-container"
										ng-click="ShowValidateAlertBox()">
										<button class="btn-extra btn-validator">
											<span class="power-icon validator"></span>
										</button>
										<span class="caption"><span
											rel="localize[extra_validate]">Validate</span></span> <span
											class="bg-selected"></span>
									</div>
									<div class="button-container"
										><!--ng-click="ShowDictionary()"-->
										<button class="btn-extra btn-validator">
											<span class="power-icon dictionary"></span>
										</button>
										<span class="caption"><span
											rel="localize[extra_validate]">Dictionary</span></span> <span
											class="bg-selected"></span>
									</div>
								</div>
							</div>
							<div class="button-container resign" ng-click="resign()">
								<button>
									<span class="icon resign"></span> <span class="resign_string"><span
										rel="localize[resign]">Resign</span></span> <span
										class="reject_string">Rechazar</span>
								</button>
							</div>
							<span class="tip texture-blue"></span>
						</div>
						<!-------------- MORE OPTION -------------------- END ------------------------- -->
						<!-------------- Swap -------------------- start ------------------------- -->
					<div id="backswap" style="" ng-show="SwapPopup">
						  <div id="boxswap">
								 <div class="modal_content">
									<div  class="close swapCancelling"></div>
									<div class="alerthead">
										<span rel="localize[button_random_opponent]" >
											 Change</span>
									</div>
									<div class="alertbody">
										 <div style="text-align: center">
											<div class="alert_content" style="margin-bottom: 4.5%">
											<span rel="localize[toast_awaiting_opponent]" class="ng-binding" style="font-size: 13px">Click on the chips you want to change!</span>
											</div>
										 <div class="btn-group">
											
											<button ng-click="putHideSwapPopup()" class="btn no-cancel">
											<span rel="localize[accept]">Cancel</span>
											</button>
										</div>
										<div class="btn-group" ng-click="swap()">
											<button   class="btn ok-save"><span rel="localize[accept]">Ok</span>
											</button>
										</div>
										</div>
									</div>
								</div>
						   </div>
						<div id="fixed_div_swap_tile">
						
						</div>
						<div style="margin-left: 5%;">
                        <span class="arrowswap"></span>
                        <span class="arrowswap"></span>
                        <span class="arrowswap"></span>
                        <span class="arrowswap"></span>
                        <span class="arrowswap"></span>
                        <span class="arrowswap"></span>
                        <span class="arrowswap"></span>
						</div>
                     </div>
					 <!-------------- Swap -------------------- End ------------------------- -->
					 
					 
					  <!-------------- Letter -------------------- Start ------------------------- -->
					 <div ng-show="tileBagAlertBox" style="" id="backetter" >
					  <div class="boxletter">
           				 <div class="modal_content">
                			<div class="close swapCancelling"></div>
               				<div class="alerthead">
                    			<span rel="localize[button_random_opponent]">
       								 Tile Bag</span>
                			</div>
               			<div class="alertbody">						
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 alertcontentborder">
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 alertbag"></div>
  								<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 alertbadcontent" >
									<span rel="localize[toast_awaiting_opponent]" class="ng-binding" >
									You don't need to count the tiles on the board to calculate the letters remaining. See them in just a glimpse!</span>
								</div>
                        	</div>
							<div style="padding: 0%;font-size:13px;" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">COST</div>
							<!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="" id="alertprice">6</div>
    						  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-left-zero" >
                                <img src="images/e-coin.png" id="alertcoin">
                              </div>
                            </div>-->
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							  <span id="alertprice">6</span>
                                <img src="images/e-coin.png" id="alertcoin">
                            </div>
							<div class="alertsubtext">It will be active for one turn</div>
                         <div class="btn-group">
                            <button  ng-click="HideTileBagAlertBox()" class="btn  no-cancel">
							<span rel="localize[accept]">Cancel</span>
                            </button>
                        </div>
						<div class="btn-group">
                            <button ng-click="seeRemainingTiles()"  class="btn ok-save"><span rel="localize[accept]">Accept</span>

                            </button>
                        </div>
                        </div>
                         </div>
                       </div>
                     </div>
					<!-------------- Tile Bag -------------------- Start ------------------------- -->
					<div  class="modal_view  modal-extras stock-pile letters" ng-show="tileBagPopUp" id="letter-exchange"> 
						<div class="box" style="width: 100%">
								  <div class="modal_content" >
										<div class="close" ng-click="HideTileBagPopUp()"></div>
										<div class="exchangeheader"> 
									    <span rel="localize[extra_letters_txt_01]">Exchange of letters</span>
										</div>
									<div class="modal-body"><div><div class="stock_pile_tiles" style="padding-top:2%">
										<ol type="A" class="letter-bag">
										<li class="tile size60" ng-repeat="tiles_ in tilesInTileBag">
											<div class="letter">{{tiles_.letter}}</div>
											<div class="points">{{tiles_.points}}</div>
											<div class="available">{{tiles_.available}}</div>
										</li>
										</ol></div>
								<p class="comment" ><span rel="localize[extra_letters_txt_04]" >Tiles Remaining</span></p>
								</div></div>
								  </div>
							</div>
					</div>
					<!-------------- Tile Bag -------------------- End ------------------------- -->
					<!-------------- Letter -------------------- End ------------------------- -->
					<!------------------Validate Popup--------------Start-------------------------- -->
					 <div ng-show="validateAlertBox" style="" id="backetter" >
					  <div class="boxletter">
					   
           				 <div class="modal_content">
                			<div class="close swapCancelling"></div>
               				<div class="alerthead">
                    			<span rel="localize[button_random_opponent]">
       								Automatic Validation</span>
                			</div>

               			<div class="alertbody">	
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 alertcontentborder">
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 validator"></div>
  								<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 alertbadcontent" >
									<span rel="localize[toast_awaiting_opponent]" class="ng-binding" >
									You'll be able to know if the word formed is valid and how many points you'll get at the very same moment!</span>
								</div>
                        	</div>
										<!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
										<span>The Automatic Validation is already active</span>
										</div>-->	
							<!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 alertcontentborder">
							
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 alertbag"></div>
  								<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 alertbadcontent" >
									<span rel="localize[toast_awaiting_opponent]" class="ng-binding" >
									You don't need to count the tiles on the board to calculate the letters remaining. See them in just a glimpse!</span>
								</div>
                        	</div>-->
							<!--<div style="padding: 0%;font-size:13px;" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">COST</div>-->
							<!--<div style="font-size: 18px;" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							  <span>6</span>
                                <img id="alertcoin" src="images/e-coin.png">
                            </div>-->
							<div class="alertsubtext" style="display:none">The Automatic Validation is already active</div>
							
							<div style="padding: 0%;font-size:13px;" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">COST</div>
							<!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="" id="alertprice">6</div>
    						  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-left-zero" >
                                <img src="images/e-coin.png" id="alertcoin">
                              </div>
                            </div>-->
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							  <span id="alertprice">12</span>
                                <img src="images/e-coin.png" id="alertcoin">
                            </div>
							<div class="alertsubtext" >It will be enabled for whole game.</div>
                         <div class="btn-group">
                            <button  ng-click="HideValidateAlertBox()" class="btn  no-cancel">
							<span rel="localize[accept]">Cancel</span>
                            </button>
                        </div>
						<div class="btn-group">
                            <button ng-click="validateGame()"  class="btn ok-save"><span rel="localize[accept]">Accept</span>

                            </button>
                        </div>
                        </div>
                         </div>
                       </div>
                     </div>
					 <!--------------------------Validate Popup-----------End------------- -->
					 <!------------------Dictionary Popup--------------Start-------------------------- -->
					 <div ng-show="dictionaryAlertBox" id="backetter" >
					  <div class="boxletter" id="box-dictionary">
           				 <div class="modal_content">
							<div  id="close" ng-click="HideDictionaryAlertBox()"></div>
               				<div class="alerthead">
                    			<span rel="localize[button_random_opponent]">Dictionary</span>
                			</div>
               			<div class="alertbody">						
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 alertcontentborder" style="padding: 2%;">
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 "><span class="dictionary"></span></div>
  								<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 alertbadcontent" >
									<span rel="localize[toast_awaiting_opponent]" class="ng-binding" >
									Words played in the last turns</span>
								</div>
                        	</div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							  <span id="alertprice">2</span>
                                <img id="alertcoin" src="images/e-coin.png">
                            </div>
							<!--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 serching-word">
							<span class="glyphicon glyphicon-search"></span>
							<input type="text" placeholder=" What word are you looking for?" id="serching-word"/></div>-->
							
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 serching-word">
							<span class="glyphicon glyphicon-search" id="search"></span>
							<input type="text" id="serching-word" placeholder=" What word are you looking for?"></div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="last-word">
							<span>Words Played in the last turns</span></div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="last-word-played">
							<span>{{lastwords}}</span></div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="other-words">
							<span>Other words played</span></div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 other-words"  >
							<span></span></div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 other-words">
							<span></span></div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 other-words">
							<span></span></div>
                        </div>
                         </div>
                       </div>
                     </div>
				 <!--------------------------Dictionary Popup-----------End------------- -->
 				 <!-------------- GameOver Messages -------------------- Start ------------------------- -->
                <div class="game-over-container" ng-show="GameEnded">
                    <div class="modal_view half transparent game-over" id="game-over">
                        <!--<div class="back"></div>-->
						<div id="backgameover">
                        <div class="box">
                            <h1 style="padding-top:17%"><span rel="localize[game_over]">Game Over</span></h1>
                            <div ng-hide="gameResult">
                                <div class="tile-win lose"></div>
                                <h2><span rel="localize[you_lost]">You Lost!</span></h2>
                                <a class="game_ended_message play-again" href="#" ng-click="playAgain()">
                                    <span rel="localize[play_again]">Play Again</span></a>
                                <a href="#" ng-click="backToList()" class="game_ended_message play-again"><span rel="localize[play_again]">Go To</span>
                                    <img class="img home-img" src="images/home.png">
                                </a>
                            </div>
                            <div ng-show="gameResult">
                                <div class="tile-win "></div>
                                <h2><span rel="localize[congratulations]">Congratulations!</span></h2>
                                <span class="game_ended_message you-won"><span rel="localize[you_won_the_game]">You won the Game!</span></span>
                                <a href="#" ng-click="backToList()" class="game_ended_message play-again" >
								<span rel="localize[play_again]">Go To</span>
									<img class="img home-img" src="images/home.png">			
                                </a>

                            </div>
							<div ng-show="gameExpiry">
                               <div class="tile-win lose"></div>
                                <h2><span rel="localize[you_lost]">You Lost!</span></h2>
                                <a class="game_ended_message play-again" href="#" ng-click="playAgain()">
                                    <span rel="localize[play_again]">Play Again</span></a>
                                <a href="#" ng-click="backToList()" class="game_ended_message play-again"><span rel="localize[play_again]">Go To</span>
                                   <img class="img home-img" src="images/home.png">
                                </a>
                            </div>

                        </div>
						</div>
                    </div>
                </div>
                <div ng-show="Loading_view()" class="loading_view">
                    <div class="inside">
                        <img src="images/loading_image.gif">

                        <div class="caption"><span rel="localize[loading]">Loading...</span></div>
                    </div>
                </div>
				<!-------------- GameOver Messages -------------------- End ------------------------- -->	 
					</div>
					<!-------------- GAME FOOTER -------------------- End ------------------------- -->
	</div>
	</ion-content>
</ion-view>







