<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Home.Master" AutoEventWireup="true"
	CodeBehind="Default.aspx.cs" Inherits="TelerikStore.Default" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

	<section id="latest-products">
		<h2>Latest Products</h2>

		<telerik:RadListView ID="TempListView" runat="server">
			<LayoutTemplate>
				<ul>
					<div id="itemPlaceholder" runat="server">
					</div>
				</ul>
			</LayoutTemplate>
			<ItemTemplate>
				<li>
					<a href="#" class="thumb">
						<asp:Image runat="server" ImageUrl='<%# Eval("SmallPictureUrl") %>' AlternateText='<%# Eval("Title") %>' />
					</a>
					<h3 class="title">
						<asp:Literal runat="server" Text='<%# Eval("Title") %>' />
					</h3>
					<p class="price-and-buy">
						<asp:Label runat="server" Text='<%# Eval("ConvertedCurrentPrice", "{0:C}") %>' CssClass="price" />
					</p>
				</li>
			</ItemTemplate>
		</telerik:RadListView>

	</section>

	<div id="product-categories">
		<h2>Categories</h2>
		<ul><li><!-- --></li></ul>

		<p class="paging simple-paging">
			<telerik:RadButton ID="CategoryPreviousButton" runat="server" Text="Previous" AutoPostBack="false"
				CssClass="prev" Enabled="false" />
			<telerik:RadButton ID="CategoryNextButton" runat="server" Text="Next" AutoPostBack="false"
				CssClass="next" />
		</p>

		<div id="search-form">
			<telerik:RadTextBox ID="SearchBox" runat="server" placeholder="Search an item..." />
			<telerik:RadButton ID="SearchButton" runat="server" Text="Search" AutoPostBack="true"
				OnClick="SearchButtonClick" EnableEmbeddedSkins="false" />
			<br />
			<span id="SearchError"><!-- --></span>
		</div>
	</div>

		<script type="text/javascript">
			$(document).ready(function () {

				//Call our Page Method with a start index of 0 and call onInitialSuccess when successful
				PageMethods.GenerateCategories(0, onInitialSuccess)

				function onInitialSuccess(categoryData) {
					//some globals to ensure the page looks OK
					window.global_currentPage = 0;
					window.global_maximumRows = 14;
					window.global_maximumPage = 3;

					//create the list of categories
					CreateCategoriesList(categoryData);
				}

				//Previous Button Click
				$('#<%= CategoryPreviousButton.ClientID %>').click(function () {
					var currentPage = window.global_currentPage;
					var previousPage = currentPage - 1;

					if (currentPage !== 0) {

						//find index of the first category of this subset
						var categoryToStart = (previousPage * window.global_maximumRows) + 1;
						if (previousPage === 0) {
							PageMethods.GenerateCategories(0, onPreviousSuccess);
						}
						else {
							PageMethods.GenerateCategories(categoryToStart, onPreviousSuccess);
						}
					}

					function onPreviousSuccess(categoryData) {
						window.global_currentPage -= 1;

						var PreviousButton = $find('<%= CategoryPreviousButton.ClientID %>');
						var NextButton = $find('<%= CategoryNextButton.ClientID %>');

						//enable or disable the previous/next buttons
						if (NextButton.get_enabled() == false) {
							NextButton.set_enabled(true);
						}
						if (window.global_currentPage == 0) {
							PreviousButton.set_enabled(false);
						}

						//Create list of categories
						CreateCategoriesList(categoryData);
					}
				});

				$('#<%= CategoryNextButton.ClientID %>').click(function () {
					var currentPage = window.global_currentPage;
					var nextPage = currentPage + 1;

					if (currentPage !== window.global_maximumPage) {

						//find index of the first category of this subset
						var categoryToStart = (nextPage * window.global_maximumRows) + 1;

						PageMethods.GenerateCategories(categoryToStart, onNextSuccess);
					}

					function onNextSuccess(categoryData) {
						window.global_currentPage += 1;

						var PreviousButton = $find('<%= CategoryPreviousButton.ClientID %>');
						var NextButton = $find('<%= CategoryNextButton.ClientID %>');

						//enable or disable the previous/next buttons
						if (PreviousButton.get_enabled() == false) {
							PreviousButton.set_enabled(true);
						}
						if (window.global_currentPage == 2) {
							NextButton.set_enabled(false);
						}

						//Create list of categories
						CreateCategoriesList(categoryData);
					}
				});

				function CreateCategoriesList(categoryData) {
					
					//find the ul element within the product-categories class and add <li> elements for each category (max 14)
					$('#product-categories ul').html("");
					for (var i = 0; i < categoryData.length; i++) {
						$('#product-categories ul').append('<li><a href="CategoryView.aspx?Category=' + categoryData[i].CategoryId + '">' + categoryData[i].CategoryName + '</a></li>');
					}
				}
			});

	</script>
</asp:Content>
