<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample demonstrates how you can modify database data when interacting with 
an ADO.NET Data Service, by using a Sys.Data.AdoNetDataContext.
-->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Read-write, with AdoNetDataContext</title>
    <link href="../styles/Images.css" rel="stylesheet" type="text/css"/>
    
    <script src="../Scripts/MicrosoftAjax/Start.debug.js" type="text/javascript"></script>

    <script type="text/javascript">
        var imagesList, imageData, dataContext,
            fetchParameters = { $expand: "Contributor", $orderby: "Name" };

        Sys.activateDom = false; 
        
        Sys.require([Sys.components.dataView, Sys.components.adoNetDataContext]);

        Sys.onReady(function() {
            dataContext = Sys.create.adoNetDataContext({
                serviceUri: "../Services/ImagesDataService.svc",
                mergeOption: Sys.Data.MergeOption.appendOnly
            });
    
            Sys.activateElements(document.documentElement);

            imagesList = $find("imagesListView");
        });
    
        function onRendering(sender, args) {
            imageData = args.get_data();
            Sys.Observer.makeObservable(imageData);
        }

        function onSort(orderby) {
            fetchParameters.$orderby = orderby;
            imagesList.fetchData();
        }

        function onInsert() {
            var newImage = { Name: "Name", Description: "Description", Contributor: null, Uri: "../images/question.jpg" };

            dataContext.insertEntity(newImage, "Images");
            imageData.add(newImage);

            var newIndex = imageData.length - 1;
            imagesList.set_selectedIndex(newIndex);
            Sys.get(".listitem", imagesList.get_contexts()[newIndex]).scrollIntoView();
        }

        function onDetailViewCommand(sender, args) {
            switch (args.get_commandName()) {
                // A custom command     
                case "Delete":
                    var index = imagesList.get_selectedIndex();
                    var deletedImage = imageData[index];

                    dataContext.removeEntity(deletedImage);
                    imageData.remove(deletedImage);

                    if (index >= imageData.length) index--;
                    imagesList.set_selectedIndex(index);
            }
        }

        function trim(value) { return value ? value.trim() : ""; }

        function convertBackName(value, binding) {
            if (value !== "") {
                debugger;
            }
        }
    </script>   
</head>

<body xmlns:dataview="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys">
    <div class="title">Image Organizer</div>
    
    <!--Toolbar-->
    <div class="sorttoolbar">
        Sort:
        <select onchange="onSort(this.value)">
            <option value="Name">Name</option>
            <option value="Description">Description</option>
        </select>
        <a class="editbutton" href="#" onclick="onInsert()">Add Image</a>
        <a class="editbutton" href="#" onclick="dataContext.saveChanges()">Save Changes</a>
        <a class="editbutton" href="#" onclick="imagesList.fetchData(null, null, Sys.Data.MergeOption.overwriteChanges)">Fetch Images</a>
    </div>

    <!--Master View-->
    <div id="imagesListView" class="imageslist sys-template" 
        sys:attach="dataview"
        dataview:autofetch="true"
        dataview:dataprovider="{{ dataContext }}" 
        dataview:fetchoperation="Images"
        dataview:fetchparameters="{{ fetchParameters }}"
        dataview:selecteditemclass="selecteditem" 
        dataview:onrendering="{{ onRendering }}" 
        dataview:initialselectedindex="0" 
    >
        <span sys:command="Select" class="listitem" id="listItem" >
            <input type="button" sys:value="{binding Name}" />
            <!--Live binding oneWay-->
            <img sys:src="{binding Uri}"/>
            <span>{binding FirstName, convert=trim, defaultValue=, source={{ Contributor || {} }}}</span> 
            <span>{binding LastName, convert=trim, defaultValue=, source={{ Contributor || {} }}}</span>
        </span>
    </div>
    
    <!--Detail View-->
    <!--Live binding to Master View-->
    <div id="detailView" class="sys-template"
        sys:attach="dataview"
        dataview:oncommand="{{ onDetailViewCommand }}"
        dataview:data="{binding selectedData, source=$imagesListView}" 
    >
        <div class="detailbox edit">
            <a href="#" sys:command="Delete" class="leftbutton" >Delete Image</a>
            <div class="detailtitle">{binding Name}</div>
            <div class="fieldblock">
                <label for="name">Name: </label>
                <input id="name" type="text" sys:value="{binding Name}"/>
            </div>
            <div class="fieldblock">
                <label for="description">Description: </label>
                <input id="description" type="text" sys:value="{binding Description}"/>
            </div>
            <div class="fieldblock">
                <label for="uri">Uri: </label>
                <input id="uri" type="text" sys:value="{binding Uri}"/>
            </div>
            <div class="fieldblock">
                <label for="contributor">Contributor: </label>
                <input id="firstName" type="text" sys:value="{binding Contributor.FirstName, convert=trim, defaultValue=}"/>
                <input id="lastName" type="text" sys:value="{binding Contributor.LastName, convert=trim, defaultValue=}"/>
            </div>
        </div>
        <img class="detailimage" sys:alt="{binding Name}" sys:src="{binding Uri}" />
        </div>
    </div>
</body>
</html>
