Clip = function(idx, parent, font, left, top) {
  this.$parent = parent;
  this.create(idx, font, left, top);
}

Clip.prototype.$f = function(name) {
  return this.$root.findName(name);
}

Clip.prototype.$cfx = function(xaml) {
  return this.$parent.getHost().content.createFromXaml(xaml, true);
}

Clip.prototype.remove = function() {
  this.$parent.children.remove(this.$root);
}

Clip.prototype.create = function(idx, font, left, top) {
  this.$root = this.$cfx(this.$xaml);
  this.$parent.children.add(this.$root);
  this.$root["Canvas.Left"] = left;
  this.$root["Canvas.Top"] = top;

  this.$main = this.$f("main");
  this.$desc = this.$f("desc");
  this.$img = this.$f("img");
  this.$title = this.$f("title");
  this.$fn = this.$f("fn");
  this.$posted = this.$f("posted");
  this.$rect = this.$f("rect");

  // Save index
  this.$f("idx").text = idx.toString();

  if (font) {
    this.$desc.setFontSource(font);
    this.$title.setFontSource(font);
    this.$fn.setFontSource(font);
    this.$posted.setFontSource(font);
  }
  
  // Set event handlers
  this.$rect.addEventListener("MouseEnter", this.onMouseEnter);
  this.$rect.addEventListener("MouseLeave", this.onMouseLeave);
  this.$rect.addEventListener("MouseLeftButtonDown", this.onPlayClip);
  this.$title.addEventListener("MouseLeftButtonDown", this.onPlayClip);
}

Clip.prototype.onPlayClip = function(sender) {
  var idx = sender.getParent().findName("idx").text;
  if (Clip.videoHandler) {
    Clip.videoHandler(parseInt(idx));
  }
}

Clip.prototype.onMouseEnter = function(sender) {
  sender.opacity = 1;
  sender.getParent().findName("desc").opacity = 1;
  sender.getParent().findName("main").visibility = "Visible";
}

Clip.prototype.onMouseLeave = function(sender) {
  sender.getParent().findName("main").visibility = "Collapsed";
  sender.getParent().findName("desc").opacity = 0;
  sender.opacity = 0;
}

Clip.prototype.setVideo = function(video) {
  this.$video = video;
}

Clip.prototype.getVideo = function() {
  return this.$video;
}

Clip.prototype.getTitle = function() {
  return this.$title.text;
}

Clip.prototype.setImage = function(img) {
  this.$img.source = img;
}

Clip.prototype.setDesc = function(desc) {
  var txt = desc;
  if (txt.length > 60) {
    txt = txt.substr(0, 57);
    txt = txt + "...";
  }
  this.$desc.text = txt;
}

Clip.prototype.setTitle = function(title) {
  this.$title.text = title.substr(0, 40);
}
          
Clip.prototype.setName = function(name) {
  this.$fn.text = name;
}

Clip.prototype.setDate = function(dt) {
  if (dt) {
    var parts = dt.split("T")[0].split("-");
    this.$posted.text = "Posted: "+parseInt(parts[1])+"/"+parseInt(parts[2])+"/"+parts[0];
  }
}

Clip.prototype.$xaml = '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">\
  <Rectangle x:Name="main" Fill="#EDEDED" Stroke="#CCCCCC" StrokeThickness="1" Width="126" Height="152" Visibility="Collapsed"/>\
  <Image x:Name="img" Canvas.Top="6" Canvas.Left="6" Cursor="Hand" Width="114" Height="86" Stretch="Fill"/>\
  <Rectangle x:Name="rect" Canvas.Top="6" Canvas.Left="6" Cursor="Hand" Opacity="0" Fill="#FFFFFF" Stroke="#CCCCCC" StrokeThickness="1" Width="114" Height="86"/>\
  <TextBlock x:Name="desc" Canvas.Top="8" Canvas.Left="10" IsHitTestVisible="false" Opacity="0" Width="98" FontSize="10.75" Foreground="#666666" FontFamily="Tahoma" TextWrapping="WrapWithOverflow"></TextBlock>\
  <Image Canvas.Top="78" Canvas.Left="105" Width="14" Height="13" Source="assets/addToPlaylist.png"/>\
  <TextBlock x:Name="title" Canvas.Top="94" Canvas.Left="6" FontSize="10.75" Width="114" Foreground="#07519A" FontFamily="Tahoma" TextWrapping="WrapWithOverflow" Height="22" TextDecorations="Underline" Cursor="Hand"></TextBlock>\
  <TextBlock x:Name="fn" Canvas.Top="122" Canvas.Left="6" FontSize="10.75" Foreground="#666666" FontFamily="Tahoma" Height="22"></TextBlock>\
  <TextBlock x:Name="posted" Canvas.Top="136" Canvas.Left="6" FontSize="10.75" Foreground="#666666" FontFamily="Tahoma" Height="22"></TextBlock>\
  <TextBlock x:Name="idx" Visibility="Collapsed"/>\
</Canvas>';