<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="CustomDataStorage.aspx.cs" Inherits="ToolkitExplorer.EventsCalendar.CustomDataStorage" %>

<%@ Register Assembly="C1.Web.Wijmo.Extenders.3" Namespace="C1.Web.Wijmo.Extenders.C1EventsCalendar" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
	<script src="../explore/js/amplify.core.min.js" type="text/javascript"></script>
	<script src="../explore/js/amplify.store.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

	<asp:Panel ID="Panel1" runat="server" Width="100%">
	</asp:Panel>
	<wijmo:C1EventsCalendarExtender ID="C1EventsCalendarExtender1" runat="server" 
		TargetControlID="Panel1" SelectedDate="2011-11-15" />

	<script type="text/javascript">
		$(document).ready(function () {
			var evcal = $("#<%=Panel1.ClientID%>");
			evcal.wijevcal({
				visibleCalendars: ["My", "Work"],
				dataStorage: {
					addEvent: _updateEvent,
					updateEvent: _updateEvent,
					deleteEvent: function (obj, successCallback, errorCallback) {
						window.setTimeout(function () {
							var curCalStore = amplify.store("calendarstore_" + obj.calendar);
							if (!curCalStore) {
								curCalStore = {};
							}
							if (curCalStore[obj.id]) {
								delete curCalStore[obj.id];
							}
							amplify.store("calendarstore_" + obj.calendar, curCalStore);
							successCallback()
						}, 400);
					},
					loadEvents: function (visibleCalendars,
												successCallback, errorCallback) {

						var i, j, events = [];
						window.setTimeout(function () {
							for (i = 0; i < visibleCalendars.length; i++) {

								var curCalStore = amplify.store("calendarstore_" + visibleCalendars[i]);
								if (!curCalStore) {
									curCalStore = {};
									amplify.store("calendarstore_" + visibleCalendars[i], curCalStore);
								}
								for (j in curCalStore) {
									events.push(curCalStore[j]);
								}
							}
							successCallback(events);
						}, 500);
					},
					addCalendar: _updateCalendar,
					updateCalendar: _updateCalendar,
					deleteCalendar: function (obj, successCallback, errorCallback) {
						successCallback();
					},
					loadCalendars: function (successCallback, errorCallback) {
						var calendars = [{ name: "My", id: "My", color: "red" },
										 { name: "Work", id: "Work", color: "blue" }];
						successCallback(calendars);
					}
				}
			});

		});

		function _updateEvent(obj, successCallback, errorCallback) {
			window.setTimeout(function () {
				var curCalStore = amplify.store("calendarstore_" + obj.calendar);
				if (!curCalStore) {
					curCalStore = {};
				}
				curCalStore[obj.id] = obj;
				amplify.store("calendarstore_" + obj.calendar, curCalStore);
				successCallback()
			}, 400);
		}

		function _updateCalendar(obj, successCallback, errorCallback) {
			successCallback();
		}
	</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Description" runat="server">
			<p>
				This sample demonstrates how to implement custom data storage for the events calendar.
			</p>
			<p>The sample uses the <b>amplify.store</b> library in order to implement local data storage.</p>
			<p>Options used in the sample include the following:</p>
			<ul>
			<li><strong>dataStorage</strong> - use this option in order to implement the custom data storage layer.</li>
			<li><strong>visibleCalendars</strong> - array of the calendar names that need to be shown.</li>			
			</ul>
</asp:Content>
