@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts{
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="@Url.Content("~/Scripts/knockout.validation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.asyncCommand.js")" type="text/javascript"></script>
    <script src="~/Scripts/knockout.dirtyFlag.js"></script>
    <script src="~/Scripts/Infragistics/js/infragistics.loader.js"></script>
    <script type="text/javascript">
        function Activity(id, startDate, endDate, description) {
            var self = this;
            self.id = ko.observable(id);
            self.startDate = ko.observable(startDate),
            self.endDate = ko.observable(endDate),
            self.description = ko.observable(description).extend({ required: "required" });
            self.dirtyFlag = new ko.DirtyFlag([self.description]);
        };

        function ActivityRepository() {
            var self = this,

            getActivities = function () {
                var activities = [
                    { "id": "1", "startDate": "01/01/2012", "endDate": "1/31/2012", "description": "Activity 1" },
                    { "id": "2", "startDate": "02/01/2012", "endDate": "2/28/2012", "description": "Activity 2" },
                    { "id": "3", "startDate": "03/01/2012", "endDate": "3/30/2012", "description": "Activity 3" },
                    { "id": "4", "startDate": "04/01/2012", "endDate": "4/30/2012", "description": "Activity 4" },
                    { "id": "5", "startDate": "05/01/2012", "endDate": "5/30/2012", "description": "Activity 5" },
                    { "id": "6", "startDate": "06/01/2012", "endDate": "6/30/2012", "description": "Activity 6" }
                ]

                return activities;
            };
            return {
                getActivities: getActivities
            }
        };

        function ActivityViewModel(activityRepository) {
            var self = this,
                repository = activityRepository;

            self.activities = ko.observableArray();

            self.selectedItemIndex = ko.observable();

            self.onStartDateCheckValue = function (event, args) {
                //some custom validation logic
                return true;
            };

            self.onNewClick = function (event, args) {
                var id = 99;
                var activity = new Activity(id, new Date("12/12/2012"), new Date("12/14/2012"), "description");
                self.activities.push(activity);
            };

            //self.activities.subscribe(function (a, b, c) {
            //    debugger;
            //});
            self.onDeleteClick = function (event, args) {
                self.activities.remove(function (e) {
                    return e.id() === "3";
                });
            };

            self.onUndoClick = function (event, args) {
                $("#activityListing").igGridUpdating("endEdit", false);
                $('#activityListing').data('igGrid').rollback();
            };

            self.loadActivities = function () {
                self.activities.removeAll();
                var activitiesFromDataStore = repository.getActivities();
                var internalActivitiesArray = [];

                ko.utils.arrayForEach(activitiesFromDataStore, function (item, index) {
                    var activity = new Activity(item.id, item.startDate, item.endDate, item.description);
                    internalActivitiesArray.push(activity);
                });

                self.activities(internalActivitiesArray);

            };
            self.generateActivityPrimaryKey = function (event, args) {
                args.value = -1;
            };
        };

        $.ig.loader({
            scriptPath: "../Scripts/Infragistics/js/",
            cssPath: "../Content/themes/infragistics/css/",
            resources: "igGrid.*,extensions/infragistics.datasource.knockoutjs.js,extensions/infragistics.ui.grid.knockout-extensions.js",
            theme: "infragistics"
        });
    </script>
 <script type="text/javascript">
     $.ig.loader(function () {
         var vm = new ActivityViewModel(new ActivityRepository());

         vm.loadActivities();

         //vm.ds.dataBind();

         ko.applyBindings(vm);

     });
     ///<reference path="scripts/knockout-2.2.0.js"/>
     ///<reference path="Scripts/Application/Activity/ViewModel/ActivityViewModel.js"/>  

	</script>
    }

<div style="border:solid 1px #4297d7">

    <button data-bind="click:onNewClick" id="new" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
        <span class="ui-button-text">New</span>
    </button>
    <button data-bind="click:onDeleteClick" id="delete" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
        <span class="ui-button-text">Delete</span>
    </button>

	<table id="activityListing" data-bind="igGrid: {dataSource: activities, primaryKey: 'id', autoCommit: true, 

	    columns: [
			{key: 'id', headerText: 'ID', dataType: 'number'},
            {
                headerText: 'Date Grouping',
                group:[
                	{key: 'startDate', headerText: 'Start Date', dataType: 'date'},
                    {key: 'endDate', headerText: 'End Date', dataType: 'date'}
                ]
            },
			{key: 'description', headerText: 'Description', dataType: 'string'}							
        ],
	    features: [             
            {
                name: 'Filtering', 
                allowFiltering: true,
                caseSensitive: false            
            },
            {
                name: 'MultiColumnHeaders'
            },

			{
		        name: 'Resizing'
			},
			{
		        name: 'ColumnMoving',
                addMovingDropdown:false
			},
			{
		        name: 'Sorting',
                type: 'local'
			},
			{
		        name: 'Hiding'
			},
			{
		        name: 'Updating', 
                editMode: 'row',
                validation: true,
                enableAddRow: true,
                showDoneCancelButtons: true,
                columnSettings:[
                    {
                        columnKey: 'startDate',
                        editorType: 'datepicker',
						validation: true,
						editorOptions: { 
                                            minValue: new Date(1955, 1, 19), 
                                            maxValue: new Date(2012, 1, 2), 
                                            required: true,
                                            validatorOptions: {
                                                                theme:'redmond', 
                                                                onblur: true,
                                                                onchange: true,
                                                                onsubmit: true,
                                                                showIcon: true,
                                                                errorMessage:'Start Date is a required field.', 
                                                                keepFocus:'always', 
                                                                checkValue:onStartDateCheckValue} }
                    },
                    {
                        columnKey: 'endDate',
                        editorType: 'datepicker',
						validation: true,
						editorOptions: { minValue: new Date(1955, 1, 19), maxValue: new Date(2012, 1, 2), required: true }
                    }
                ]
			}
	    ],
		jQueryTemplating: false,		
	
        virtualization: false,
        width: '100%',
        height:'400px',
        autoGenerateColumns: false
        }">

	</table>
</div>