<?xml version="1.0" encoding="ISO-8859-1"?>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:html="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://www.w3.org/1999/xhtml" 
    xmlns:xforms="http://www.w3.org/2002/xforms" 
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:my="test">
	<head>
	<!--
		-->
<title>Slide Editor</title>
		<link rel="stylesheet" type="text/css" href="../../xforms/xformsdemo.css" />
		<link rel="stylesheet" type="text/css" href="editors.css" />
        <style type="text/css">

        	textarea::value {font-weight:normal;}
            input,tree,tree::value,tree label,textarea::value ,input::value{display:block;}
            textarea,input {display:block;}
            input::value {width: 200px;}
            input label {width:200px;}
            div.editor {padding-left:10px;}
            input::value {background-color:white;}
            group.nodeview label, group.nodeview output {display:inline;font-size:9pt;}
            *:disabled {display:none;visibility:hidden ;}
            input.h1 {font-size:150%;font-weight:bold;margin-bottom:10px;}
            div.editor {overflow:scroll;width:400px;height:300px;margin-top:10px;}
            div.row {margin-top:2px;margin-bottom:2px;}
            textarea::value {background-color:white;height:80px;}
            input::value, textarea::value {width:660px;}
            repeat::repeat-index *::value{background-color:white;;}
            repeat::repeat-item *::value {background-color:#dedede;}
			repeat::repeat-index {background-color:#bbbbbb;}
            repeat {margin-left:10px;margin-top:10px;}
			case#showimages {border-style:solid;border-width:2px;}
			switch {margin:5px;}
			.imggroup {text-align:center;}
			output.image,output.image::value,output.image label {display:block;}
			repeat#repimg::repeat-item,repeat#repimg::repeat-index{background-color:transparent;border-color:black!important;}
            tree{background-color:white;border-style:solid;}
            tree {overflow:scroll;height:300px;width:300px;}
            
            #previewarea {background-color:white;border-style:solid;border-color:black;padding:4px;margin:4px;}
            #previewarea img {width:600px;}
            #previewarea table img {width:200px;}
            #previewarea h1 {background-color:blue;width:100%;}
            </style>
		<xforms:model id="form1">
			<xforms:submission id="savelocal" method="put" action="file:slides.xhtml" replace="all"/>
			<xforms:submission id="httpsubmit" method="put" action="http://sinex.tml.hut.fi:8080/xforms/request" replace="all"/>
			<xforms:submission id="previewsubmit" method="post" action="http://localhost:8080/xforms/echo" replace="all" target="new"/>
			<xforms:submission id="submission1" method="put" action="./article.xhtml" replace="none"/>
			<xforms:submission id="submission2" method="post" action="http://sinex.tml.hut.fi:8080/xforms/request"/>
			<xforms:instance id="folderdata" xmlns="" src="slides.xhtml"/>
			<xforms:instance id="clip" xmlns="">
				<data>
					<ui><hasdata/></ui>
					<copy></copy>
					<text>heplaa</text>
                    <column>1</column>
				</data>
			</xforms:instance>
			<xforms:instance id="quick" xmlns="">
				<data>
					<images xmlns="http://www.w3.org/1999/xhtml">
						<img src="./img/video.jpg"/>
						<img src="./img/worldmap.jpg"/>
					</images>
				</data>
			</xforms:instance>
			<xforms:instance id="prototypes" xmlns="http://www.w3.org/1999/xhtml">
				<html xmlns="http://www.w3.org/1999/xhtml">
				<body>
					<p></p>
					<h1></h1>
					<h2></h2>
					<h3></h3>
					<h4></h4>
					<p class="notice"></p>
					<p class="small"></p>
					<div class="empty">
						<p>FILL IN TEXT</p>
					</div>
					</body>
				</html>
			</xforms:instance>
			<xforms:bind nodeset="instance('clip')/ui/hasdata" readonly="count(instance('clip')/copy/*)&lt;1"/>
		</xforms:model>
<ev:script global="true" language="Javascript"><![CDATA[
      
      
         var instance= null;
   var instanceroot = null;
   var xform =null;
   var column=null;
   var table=null;
   var livetable=null;
   //browser.println("instance: "+instance+" instanceroot: "+instanceroot);
   function init()
   {
   browser.println("Document: "+document+"rootelement:"+document.getDocumentElement());
   xform = document.getElementsByTagNameNS("http://www.w3.org/2002/xforms","model").item(0);
   browser.println("xform: "+xform);
   instanceroot = xform.getInstanceDocument().getDocumentElement();
   column = xform.getInstanceDocument("clip").getDocumentElement().getElementsByTagName("column").item(0);
   browser.println("xform: "+xform+" instanceroot: "+instanceroot);
   table = instanceroot.getElementsByTagNameNS("http://www.w3.org/1999/xhtml","table").item(0);
   livetable = document.getElementById("previewarea");
   browser.println("livetable: "+livetable);
   }

function currSlideIndex()
{
		return column.getFirstChild().getNodeValue();
}

  function getSlide(root,index)
{
		var i=0;
		var child = root.getFirstChild();
		while (child!=null)
		{
			if (child.getLocalName()=="div")
			{
				if (child.getAttribute("class")=="slide")
				{
					i++;
					if (index==i) return child;
				}
			}
			child=child.getNextSibling();
		}  		
	return null;
}
   
   function preview()
   {
   		init();
	    //instanceroot = xform.getInstanceDocument().getDocumentElement();
       var body = instanceroot.getElementsByTagNameNS("http://www.w3.org/1999/xhtml","body").item(0);
	   browser.println("body: "+body);
      var currslideindex=currSlideIndex();
		var currslide=getSlide(body,currslideindex);
	   browser.println("slideind:"+currslideindex+" curr: "+currslide+" instanceroot: "+instanceroot+" livetable:"+livetable);
		var child = livetable.getFirstChild();
		while (child!=null)
		{
			livetable.removeChild(child);
			child=child.getNextSibling();
		}  		
		//var tableclone = table.cloneNode(true);
		var tableclone = document.importNode(currslide,true);
		tableclone.setAttribute("id","livetable");
		livetable.appendChild(tableclone);
   }
   preview();
          
      ]]></ev:script>	</head>
<body>

<h1>SlowerPoint - Slide Editor</h1>
   
   <div class="cutpaste" id="cutpaste">
    	<xf:trigger>
    		<xf:label>Cut</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:destroy ref="instance('clip')/copy/*"/>
	    		<xf:duplicate ref="instance('clip')/copy" origin="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
	    		<xf:destroy ref="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
    		</xf:action>
    	</xf:trigger>
    	<xf:trigger>
    		<xf:label>Copy</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:destroy ref="instance('clip')/copy/*"/>
	    		<xf:duplicate ref="instance('clip')/copy" origin="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
    		</xf:action>
    	</xf:trigger>
    	<xf:trigger ref="instance('clip')/ui/hasdata">
    		<xf:label>Paste</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:duplicate origin="instance('clip')/copy/*" ref="instance('folderdata')/h:body" before="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"  />
	    		<xf:destroy ref="instance('clip')/copy/*"/>
    		</xf:action>
    	</xf:trigger>
<span style="color:transparent;">------</span>
    	<xf:trigger>
    		<xf:label>Move Down</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:destroy ref="instance('clip')/copy/*"/>
	    		<xf:duplicate ref="instance('clip')/copy" origin="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
	    		<xf:destroy ref="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
	    		<xf:duplicate origin="instance('clip')/copy/*" ref="instance('folderdata')/h:body" before="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')+1]"  />
	    		<xf:destroy ref="instance('clip')/copy/*"/>
    		</xf:action>
    	</xf:trigger>

    	<xf:trigger>
    		<xf:label>Move Up</xf:label>
    		<xf:action ev:event="DOMActivate">
	    		<xf:destroy ref="instance('clip')/copy/*"/>
	    		<xf:duplicate ref="instance('clip')/copy" origin="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
	    		<xf:destroy ref="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')]"/>
	    		<xf:duplicate origin="instance('clip')/copy/*" ref="instance('folderdata')/h:body" before="instance('folderdata')/h:body/h:div[@class='slide'][index('rep')-1]"  />
	    		<xf:destroy ref="instance('clip')/copy/*"/>
    		</xf:action>
    	</xf:trigger>
	<ev:listener event="DOMActivate" observer="cutpaste" handler="#previewhandler"/>
<span style="color:transparent;">------</span>



<xf:submit submission="savelocal">
    <xf:label>Save to local file</xf:label>
    </xf:submit>

<xf:submit submission="httpsubmit">
    <xf:label>Submit</xf:label>
    </xf:submit>
    	<xf:submit submission="previewsubmit">
    		<xf:label>Preview</xf:label>
    	</xf:submit>
    </div>




       <xf:switch>
   	<xf:case id="hideimages" selected="true">
   	</xf:case>
   	<xf:case id="showimages" >
<div>
<h2>Image Collection: Select Image</h2>
<xf:repeat nodeset="instance('quick')//h:img" id="repimg">
	<xf:output class="image" ref="@src" mediatype="*/*">
	<xf:label>Image: <xf:output value="."/></xf:label>
	</xf:output>
   <xf:trigger>
   	<xf:label>Insert This Image</xf:label>
   	<xf:action ev:event="DOMActivate">
	    		<xf:duplicate origin="instance('quick')//h:img[index('repimg')]" ref="instance('folderdata')/h:body" before="instance('folderdata')/h:body/*[index('rep')]" />
	    		<xf:toggle ev:event="DOMActivate" case="hideimages" />
   	</xf:action>
   </xf:trigger>
</xf:repeat>

   <xf:trigger>
   	<xf:label>Cancel Image Insertion</xf:label>
	    		<xf:toggle ev:event="DOMActivate" case="hideimages" />
   </xf:trigger>
   		</div>
   	</xf:case>
   </xf:switch>

<table>
    <tr>
    <td>

<div>   	
   <div class="editor" id="editorscroll">
           		<xf:action ev:event="DOMFocusIn" id="previewhandler">
    			<xf:setvalue ref="instance('clip')/column" value="index('rep')"/>
    			<ev:script>preview(); </ev:script>
    		</xf:action>

    <xf:repeat nodeset="/h:html/h:body/h:div[@class='slide']" id="rep">
    <div class="row">
    	<xf:input ref="h:h1"><xf:label></xf:label></xf:input>
	</div>
	</xf:repeat>
	</div>
</div>
    </td>
    <td>

<!--
<xf:submit submission="submission1">
    <xf:label>Save</xf:label>
    </xf:submit>
    <a href="article.xhtml" target="new">Preview</a>
    	<xf:input ref="/h:html/h:body/h:div[@class='slide'][index('rep')]/h:h1"><xf:label></xf:label></xf:input>
    	<xf:output ref="/h:html/h:body/h:div[@class='slide'][index('rep')]/h:h1"><xf:label></xf:label></xf:output>
    <xf:repeat nodeset="/h:html/h:body/h:div[@class='slide'][index('rep')]//h:li" id="repc">
    	<xf:input ref="."><xf:label></xf:label></xf:input>
        </xf:repeat>

    -->
<xf:tree ref="/h:html/h:body/h:div[@class='slide'][index('rep')]" prune="true" id="folders">
    <xf:label>Slide</xf:label>
    <xf:item><xf:label ref="self::node()[local-name(.)='li']"/></xf:item>
</xf:tree>
        
    </td>
</tr>
    <td>
        Preview:
        <div id="previewarea">
        </div>
        
    </td>
    <td>
        
        <xf:input ref="nodeindex('folders')[local-name(.)='li']">
            <xf:label></xf:label>
            </xf:input>
        
    </td>
    </table>
    
    </body>
</html>

