<?xml version="1.0" encoding="UTF-8"?>
<!-- vim:sw=2:sts=2:et 
-->
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  >
<head>
  <script>
<![CDATA[



//from prototype.js
function $() {
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1) 
      return element;

    elements.push(element);
  }

  return elements;
}


var grp;

var animationIsRunning = false;
var NUM_STEPS = 9;
var state=0; //0 to 1
var selection = null;
var targetXOffset = 0;
var targetYOffset = 0;
var toWeek;
var toDay;
var toMonth;

var dayMode = false;
var currentXOffset = 0;
var currentYOffset = 0;
var startXOffset = 0;
var startYOffset = 0;

var currentXScale = 1.0;
var currentYScale = 1.0;

var DAY_WIDTH = 100;

function startAnimation(xoff, yoff, _toWeek, _toDay, _toMonth)
{
  animationIsRunning = true;
  grp = $('grp');
  startXOffset = currentXOffset;
  startYOffset = currentYOffset;
  targetXOffset = xoff;
  targetYOffset = yoff;
  toWeek = _toWeek;
  toDay = _toDay;
  toMonth = _toMonth
  state = 0;
  animate();
}

function zoomDay(daynum)
{
  startAnimation(-daynum * 7 * 100, 0, false, true);
}

function zoomWeek()
{
  startAnimation(0, 0, true, false);
}
function zoomMonth()
{
  startAnimation(0, -20, false, false, true);
    
}
function zoomYear()
{}

function end_animation()
{
  animationIsRunning = false;
  dayMode = ! dayMode;
}
function animate()
{
  //stop condition
  if(state > 1.0) {
    end_animation()
    return;
  }

  var id = grp.ownerSVGElement.suspendRedraw(1000);
  
  curvedState = toDay ? state : Math.pow(state, 1);
  currentXOffset = startXOffset + (targetXOffset - startXOffset) * curvedState;
  currentYOffset = startYOffset + (targetYOffset - startYOffset) * curvedState;
  newScale =   toDay  ?  1 + curvedState * 6
             : toWeek ?  7 - curvedState * 6
             : 1.0;
  newYScale =   toDay ? 1.0
              : toWeek ? 1.0
              : toMonth ? (1-curvedState) * .5 + 0.2
              : 1.0;

  grp.setAttribute('transform', 'translate('+currentXOffset+' '+currentYOffset+')  scale('+newScale+' '+newYScale+')  ');
  state += 1/(NUM_STEPS-1);
                                
  grp.ownerSVGElement.unsuspendRedraw(id);                
  anim_running = setTimeout("animate()", 10);
}


function set_transform(el, opt)
{

  if(opt.yscale != undefined)
    currentYScale = opt.yscale
  if(opt.xscale != undefined)
    currentXScale = opt.xscale
  if(opt.yoff != undefined)
    currentYOffset = opt.yoff;
  if(opt.xoff != undefined)
    currentXOffset = opt.xoff;

  el.setAttribute('transform', 'translate('+currentXOffset+ ' ' +currentYOffset+ ') scale(' +currentXScale+ ' ' +currentYScale+ ')');
}


function itemclick(el)
{
  if(selection) {
    SetClassNameSelectedness(selection, false);
  }
  selection = el;
  SetClassNameSelectedness(selection, true);
}

// function onkeypress(event)
// {
//   if(dayMode)
//     zoomWeek();
//   else
//     zoomDay(3);
// }
var selectedDayElement;
function clickhere(el)
{
  if(animationIsRunning) return;
  if(dayMode) {
    if(selectedDayElement)
      SetClassNameSelectedness(selectedDayElement, false);
    zoomWeek();
  } else {
    zoomDay(el.getAttribute('daynum'))
    selectedDayElement = el;
    SetClassNameSelectedness(el, true);
  }
}

function SetClassNameSelectedness(node, selectedBoolean)
{
    MixinClassNameSubclass(node, selectedBoolean ? 'selected' : 'unselected');
}

function MixinClassNameSubclass(node, subclassName)
/* if start with node.className == 'myCssClass myCssClass_oldmixin'
/*            or node.className == 'myCssClass'
 * end up with   node.className == 'myCssClass myCssClass_newmixin'
 */
{
    var arr = node.getAttribute('class').split(' ');
    superClassName = arr[0];
    newClassName =  superClassName  +' '+ superClassName + '_' + subclassName;
    node.setAttribute('class', newClassName);
}

var sliderDragging = false;
var enteredSliderDragAt = false;
function SliderDragAt(sliderPos)
{
  if(enteredSliderDragAt) return;

  enteredSliderDragAt = true;
  sliderPos -= 5;
  $('slidingthingy').style.left = sliderPos + 'px';
  perc = sliderPos / 300;

  yscale = 1-perc;
  yoffsetForScale = 500 * (1-yscale)/2;
  set_transform($('grp'), {
    'yscale' : yscale,
//     'yoff': currentYOffset,
    'yoff': yoffsetForScale
    });

  enteredSliderDragAt = false;
}

var verticalSliderDragging = false;
function VerticalSliderDragAt(sliderPos)
{
  sliderPos -= 25;
  $('verticalslidingthingy').style.top = sliderPos + 'px';
  offset = sliderPos - 300;
  if(offset > 10 || offset < -10) {
    sign = (offset<0) ? -1 : 1;
    velocity = offset / 3; //sign * Math.pow(offset / 5,   1.5);
    wasGoing = scrollingSpeed;
    scrollingSpeed = - velocity;
    if( ! wasGoing) scrollAnimate();
  } else {
    scrollingSpeed = 0;
  }
}

function VerticalSliderSnapBack()
{
  scrollingSpeed = 0;
  $('verticalslidingthingy').style.top = "300px";
}

scrollingSpeed = 0;
function scrollAnimate()
{
  if(scrollingSpeed == 0) {
    return;
  }
  set_transform($('grp'), {'yoff': currentYOffset + scrollingSpeed});
  setTimeout("scrollAnimate()", 1);
}

function generateItems()
{
  // Can pass in   ?20,10
  var arr = location.search.split(',');
  var n = (arr[0] && arr[0].substring(1))  || 8;
  var eventsPerRow = arr[1] || 8;

  for(var row=0; row < n; row++) {
    var yoff = (row - Math.floor(n/2)) * 510;
    for(var i=0; i < eventsPerRow; i++) {
      var g;
      if(row == 0) {
        g = $('week0');
      }
      else g  = $('grp');

      g.appendChild( newItem(yoff) );
    }
    var topline = $('horizline').cloneNode(false);
    topline.setAttribute('x1', 0);
    topline.setAttribute('x2', 700);
    topline.setAttribute('y1', yoff);
    topline.setAttribute('y2', yoff);

    $('grp').appendChild(topline);
  }
}

function randrange(start, end)
{
  var r = Math.random() * (end-start) + start;
  return Math.floor (r);
}
function newItem(yoff)
{
  var x = randrange(0,7) * 100;
  var y = randrange(100, 300) + yoff;
  var height = randrange(20, 200);
  var it = $('itemtemplate').cloneNode(true);
  it.setAttribute('x', x);
  it.setAttribute('y', y);
  it.setAttribute('height', height);
  it.setAttribute('width', randrange(0,3) ? 90 : 100);
  return it;
}
function appendDayBoxRow(parent, yoff)
{
  for(var daynum=0; daynum < 7; daynum++) {
    var daybox = $('daytemplate').cloneNode(true);
    daybox.setAttribute('x', daynum * 100);
    daybox.setAttribute('y', yoff);
    parent.appendChild( daybox );
  }
}

]]> 
  </script>
  <style>
.selected {
  fill-opacity:0.7;
}
.unselected {
  fill-opacity:0.3;
}
.day {
  stroke-width: 1;
  stroke: darkgray;
  fill: white;
}
.weekdivider {
  stroke-width: 20;
  stroke: #666;
}

.item {
  stroke: #aac;
  stroke-width: 1px;
  stroke-linecap: round;

/*   fill: url(#ItemGradient);  */
  fill: #224; fill-opacity:0.2;
}

.item_selected {
  fill-opacity: 0.4;
}
.item_unselected {}

.daybutton {
  width: 100px;
  height: 15px;
  text-align: center;
  padding-top: 10px;
}
.daybutton_selected {
  background-color: #ddf;
}

</style>
</head>
<body onload="generateItems()" onmousemove="if(sliderDragging) SliderDragAt(event.clientX);
                            if(verticalSliderDragging) {
                              VerticalSliderDragAt(event.clientY);
                            } else {
                              VerticalSliderSnapBack();
                            }
                              ">
  hello world.
  <input type="button" onclick="zoomWeek()" value="Week"/>
  <input type="button" onclick="zoomMonth()" value="Month"/>
  <input type="button" onclick="set_transform($('grp'), {xoff:0,yoff:0,xscale:1,yscale:1})" value="Today's week"/>

  <br/>
  This requires Deer Park Alpha (alpha firefox 1.5).<br/>
  If you're on windows, mozilla's svg renderer is much better, so
  append <code>?50</code> to the URL to generate
  more weeks for the view.
  <br/>
  <div id="zoomslider" style="width: 300px; height:30px;background:lightblue;"
    onmousedown="sliderDragging=true; SliderDragAt(event.clientX);"
    onmousemove="if(sliderDragging) SliderDragAt(event.clientX);"
    onmouseup="sliderDragging=false;"
  >
    <div id="slidingthingy" style="background: black; position: absolute; width:10px; height:30px; left:0px;"/>
  </div>
  <div style="position:absolute; left:0">Less time</div>
  <div style="position:absolute; left:250px;">More time</div>
  <br/>
  <xul:hbox style="width: 700px; height:50px;" id="daybuttonhbox">
    
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="0"> Sun </div>
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="1"> Mon </div>
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="2"> Tue </div>
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="3"> Wed </div>
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="4"> Thu </div>
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="5"> Fri </div>
    <div class="daybutton"  style="left: 0px" onclick="clickhere(this);" daynum="6"> Sat </div>
  </xul:hbox>

  <xul:hbox style="width:800px; height:510px;" height="500">

    <svg:svg id='svgtop' style="border: 2px darkgray solid; width: 700px; height:510px;">
      <svg:defs>
        <svg:linearGradient id="ItemGradient">
          <svg:stop offset="5%" stop-color="#ddf"/>
          <svg:stop offset="95%" stop-color="#eef"/>
        </svg:linearGradient>
      </svg:defs>


      <svg:g id="grp" fill-opacity="0.2">

        <svg:g id="week0">
          <svg:rect id="itemtemplate" x="0" y="40" width="100" height="30" rx="10" ry="10" class="item" onclick="itemclick(this)"/>
        </svg:g>
        <!--
        <svg:foreignObject x="5" y="5" width="20" height="20">
          <body>hello <b>world</b></body>
        </svg:foreignObject> -->

        <svg:line x1="100" y1="-20000" x2="100" y2="20000" class="day"/>
        <svg:line x1="200" y1="-20000" x2="200" y2="20000" class="day"/>
        <svg:line x1="300" y1="-20000" x2="300" y2="20000" class="day"/>
        <svg:line x1="400" y1="-20000" x2="400" y2="20000" class="day"/>
        <svg:line x1="500" y1="-20000" x2="500" y2="20000" class="day"/>
        <svg:line x1="600" y1="-20000" x2="600" y2="20000" class="day"/>

        <svg:line x1="0" y1="0" x2="700" y2="0" id="horizline" class="weekdivider"/>

        <!--
        <svg:rect x="0" y="100" width="100" height="30" rx="10" ry="10" class="item" onclick="itemclick(this)"/>
        <svg:rect id="mon" x="100" y="0" width="100" height="500" class="day" onmousedown="clickhere(this)" daynum="1"/>
        <svg:rect x="100" y="150" width="90" height="150" rx="10" ry="10" class="item" onclick="itemclick(this)"/>
        <svg:rect x="110" y="250" width="90" height="100" rx="10" ry="10" class="item" onclick="itemclick(this)"/>

        <svg:rect id="tue" x="200" y="0" width="100" height="500" class="day" onmousedown="clickhere(this)" daynum="2"/>
        <svg:rect id="wed" x="300" y="0" width="100" height="500" class="day" onmousedown="clickhere(this)" daynum="3"/>
        <svg:rect x="300" y="50" width="100" height="200" rx="10" ry="10" class="item" onclick="itemclick(this)"/>
        <svg:rect x="300" y="300" width="100" height="120" rx="10" ry="10" class="item" onclick="itemclick(this)"/>
        <svg:rect id="thu" x="400" y="0" width="100" height="500" class="day" onmousedown="clickhere(this)" daynum="4"/>
        <svg:rect id="fri" x="500" y="0" width="100" height="500" class="day" onmousedown="clickhere(this)" daynum="5"/>
        <svg:rect id="sat" x="600" y="0" width="100" height="500" class="day" onmousedown="clickhere(this)" daynum="6"/>
-->
            <!--
            <svg:circle cx="6cm" cy="2cm" r="100" fill="blue"
                            transform="translate(70,150)"/>
            <svg:circle cx="6cm" cy="2cm" r="100" fill="green"
                            transform="translate(-70,150)"/> -->
  <!--       <svg:image x="300" y="22" width="200px" height="36px" xlink:href="http://osafoundation.org/images/OSAFLogo.gif"/> -->
          </svg:g>
      </svg:svg>

    <div id="verticalslider" style="background: lightblue; height:500px; width:30px; margin-left:20px;"
      onmousedown="verticalSliderDragging=true; VerticalSliderDragAt(event.clientY);"
      onmousemove="if(verticalSliderDragging) VerticalSliderDragAt(event.clientY);"
      onmouseup="verticalSliderDragging=false; VerticalSliderSnapBack()"
    
    >
      <div id="centerspot" style="background: darkblue; height:50px; width:30px; position:absolute; top:300px;"/>
      <div id="verticalslidingthingy" style="background: black; height: 50px; width: 30px; position:absolute; top:300px;">
    </div>
    </div>
  </xul:hbox>
</body>              
</html>
