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

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

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="DisplayPlaceHolder">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DisplayPlaceHolder" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="AjaxCallStart" OnResponseEnd="AjaxCallEnd" />
    </telerik:RadAjaxManager>

	<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Default" />

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

	<div class="view-mode-switcher">
		<telerik:RadButton ID="ListViewButton" runat="server" Text="List View" OnClick="ListViewButton_Click"
			CssClass="btn-list" />
		<telerik:RadButton ID="GridButton" runat="server" Text="Grid View" OnClick="GridButton_Click"
			CssClass="btn-grid" />
	</div>

	<asp:Panel ID="DisplayPlaceHolder" runat="server" CssClass="product-list" />

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
	    <script type="text/javascript">
		    $(document).ready(function () {

			    //Grab the Category query string
			    var category = getQueryStringParameterByName("Category");

			    var query = "http://ebayodata.cloudapp.net/Categories"
			    + "('" + category + "')"
			    + "?$callback=detailCallback"
			    + "&$format=json";

			    $.ajax({
				    dataType: "jsonp",
				    url: query,
				    jsonpCallback: "detailCallback",
				    success: detailCallback,
				    error: function (jqXHR, textStatus, errorThrown) {
					    alert("Error: " + errorThrown);
				    }
			    });

			    function detailCallback(data) {

				    //update the category h2 element with the category we're using
				    var categoryData = data.d;
				    $('#product-category h2').html(categoryData.Name);
			    }

		    });

		    //Gets the query string parameter based on name
		    function getQueryStringParameterByName(name) {
			    var queryItem = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

			    return queryItem && decodeURIComponent(queryItem[1].replace(/\+/g, ' '));
            }

            function QuickCategoryMenu_Click(sender, args) {
                var categoryID = args.get_item().get_value();
                var argumentToPass = "Category," + categoryID;

                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(argumentToPass);
            }

            function AjaxCallStart(sender, args) {
                $find("<%= LoadingPanel.ClientID %>").show("<%= DisplayPlaceHolder.ClientID %>");
            }

            function AjaxCallEnd(sender, args) {
                $find("<%= LoadingPanel.ClientID %>").hide("<%= DisplayPlaceHolder.ClientID %>");
            }
	    </script>
    </telerik:RadCodeBlock>
</asp:Content>

<asp:Content ID="SidebarContent" ContentPlaceHolderID="SidebarContent" runat="server">
	<telerik:RadMenu ID="QuickCategoryMenu" runat="server" Flow="Vertical" OnClientItemClicked="QuickCategoryMenu_Click"
		EnableEmbeddedSkins="false" CssClass="menu">
		<Items>
			<telerik:RadMenuItem Text="Antiques" Value="20081" />
			<telerik:RadMenuItem Text="Art" Value="550" />
			<telerik:RadMenuItem Text="Books" Value="267" />
			<telerik:RadMenuItem Text="Business & Industrial" Value="12576" />
			<telerik:RadMenuItem Text="Cameras & Photo" Value="625" />
			<telerik:RadMenuItem Text="Video Games" Value="1249" />
		</Items>
	</telerik:RadMenu>
</asp:Content>
