<!DOCTYPE html>
<html>
<head>
 
    <link href="../resources/css/kendo.mobile.all.min.css" rel="stylesheet" />
 
     <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
   <script src="../resources/js/jquery.min.js"></script>
	<script src="../resources/js/kendo.all.min.js"></script>
	   <style>
    .km-arrow-e:after,
    .km-arrow-e:before
    {
        content: "\e0fb";
    }
      .km-e038-e:after,
    .km-e038-e:before
    {
        content: "\e038";
    }
</style>
</head>
<body>
    
     <div id="example" data-role="view" data-layout="default">
             
          <div id="invitationsDiv">
               	
             </div>
                
     </div>
         <div data-role="layout" data-id="default">
		    <header data-role="header">
		        <div data-role="navbar">
		            <span data-role="view-title">Navi 4 Seniors</span>
		        </div>
		    </header>
		    <footer data-role="footer">
		        <div id="tabstrip" data-role="tabstrip">
		            <a data-icon="e038-e"></a>
		            <a data-icon="info"></a>
		            <a data-icon="arrow-e"></a>
		            <a data-icon="settings"></a>
		            <a data-icon="contacts"></a>
		        </div>
		    </footer>
 
	</div>
	<script id="template" type="text/x-kendo-template">
      <ul id="invitationsPanelBar">
        # for (var i = 0; i < data.length; i++) { #
            <li id="1">#= data[i].userName #<button style="position:absolute;right:30px; type="button" id="deleteButton" data-bind="click: deleteProduct"><span class="k-icon k-i-close"></span></button>
								
<ul>
						# for (var j = 0; j < data[i].invitationsList.length; j++) { #
							<li><span>
										<a href="resultsContainer.html?userStarId=#= data[i].invitationsList[j].userStarId#&amp;userName=#= data[i].invitationsList[j].userName#">#= data[i].invitationsList[j].userStarName #</a>
										#if (data[i].invitationsList[j].status === "New") {#
											<span style="position:absolute;right:30px;color:\#85b2cb;">New</span>
										#}#
									</span>	
							</li>
						#}#
					</ul>
			</li>
        # } #
       </ul>
		
		
    </script>
            <script>
           
          var app = new kendo.mobile.Application(document.body);
      	
            $(document).ready(function() {
            	
            	  var dataSourceInvitations = new kendo.data.DataSource({
           			  transport: {
           				  read: {
           			           
           			            url: "http://localhost:8080/NavXzy/rest/SecurityService/getNotifications?emailAddress=ab@bc.ca",
           						
           			            type: "GET",
           			            
           			            dataType: "json"
           					}
           			  },
           			  requestEnd: function(e) {
           				 // console.log("requestEnd");
           				 console.log(e);
           				//console.log(e.type);
           				 var invitationsResponse  = e.response;
           				console.log("### invitationsResponse : " + invitationsResponse);
           				   
    					 	var invitemplate = kendo.template($("#template").html());
           		  			
           	   				var invitations = invitemplate(invitationsResponse); //Execute the template
           	   			
               				$("#invitationsDiv").html(invitations); //Append the result
               			 $("#invitationsPanelBar").kendoPanelBar({
               				expand: onExpand
               			 });
               			
           			   }
           			});
            	  dataSourceInvitations.read();
            	   
            		var viewModel = kendo.observable({
                        
                  		deleteProduct: function(e) {
                        	console.log("deleteProduct");
                            var pbar = $("#invitationsPanelBar").data("kendoPanelBar");
       						pbar.remove($(e.currentTarget).closest("li"));
                           // pbar.remove("#1")
                        }
                       
                    	
                    });
            		kendo.bind($("#deleteButton"), viewModel);
            	   function onExpand(e) {
             			 var selectedText = $(e.item).find("> .k-link").text();
             			// console.log(selectedText);
                  	  
             		} 
             });
           

            </script>
        
<style scoped>

#invitationsPanelBar .k-header  {
	background-color: #85b2cb;
}
#invitationsPanelBar .k-state-selected  {
	background-color: #85b2cb;
	box-shadow: #85B2CB 0px 0px 3px 4px inset;
}
#invitationsPanelBar .k-state-hover, .k-state-hover:hover  {
	background-color: #85B2CB;
}
.km-ios .km-view-title, .km-ios .km-dialog-title {

font-weight: normal;

}


</style>



</body>
</html>
