var button;

function loaded(sender, args)
{
  button = new hongButton(sender);
}

function delegate(target, callback) {
	var func = function() {
		callback.apply(target, arguments);
	}
	return func;
}

function hongState(sender, name, owner, handler, action)
{
  this.url = name + ".jpg";
  this.owner = sender.findName(owner);
  this.imageName = name + "Image";
  this.image = sender.getHost().content.createFromXaml(this.genXaml(this.imageName));
  this.setCallback(this.owner, action, this.handleEvent);
  this.enabled = false;
  this.handler = handler;
}

hongState.prototype.genXaml = function(name)
{
  return "<Image xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='" + name + "' Opacity='0' />";
}

hongState.prototype.setImagePosition = function(point) {
  this.image.setValue("Canvas.Left",point.x);
  this.image.setValue(["Canvas.Top"],point.y);
}

hongState.prototype.setCallback = function(target, eventName, callback) {

	if (!window.methodIndex)
		window.methodIndex = 0;
	
	var callbackName = "uniqueCallback" + (window.methodIndex++);
	var controller = this;
	var func = function() {
		callback.apply(controller, arguments);
	}

	eval(callbackName + " = func;");
	target.addEventListener(eventName,callbackName);
}

hongState.prototype.handleEvent = function(sender, eventArgs) {

    if (this.enabled && this.handler) 
    {
      this.handler(this.image);
    }
      
}

function point(x, y)
{
    this.x = x;
    this.y = y;
}

point.prototype.ToString = function()
{
    return this.x + "," + this.y + " ";
}

Array.prototype.ToString = function()
{
    str = "";
    for (i = 0; i < this.length; i++)
        str += this[i].ToString();
    return str;
}

function hongButton(sender)
{
  this.hong = sender.findName("hong");
  this.face = sender.findName("normal");
  this.reflection = sender.findName("hongReflection");
  this.loading = sender.findName("loadingTextCanvas");
  this.stateIndex = 0;
  this.host = sender.getHost();
  this.canvas = sender.findName("root");
  this.activeImage = this.hong;

  this.hongStates = new Array();
  this.hongStates[0] = new hongState(sender, "upleft", "upleft", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[1] = new hongState(sender, "up", "up", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[2] = new hongState(sender, "upright", "upright", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[3] = new hongState(sender, "left", "left", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[4] = new hongState(sender, "right", "right", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[5] = new hongState(sender, "downright", "downright", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[6] = new hongState(sender, "down", "down", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[7] = new hongState(sender, "downleft", "downleft", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[8] = new hongState(sender, "normal", "normal", delegate(this, this.setActive), "MouseEnter");
  this.hongStates[9] = new hongState(sender, "pressed", "normal", delegate(this, this.setActive), "mouseleftbuttondown");
  
  this.hongStates[8].setCallback(this.hongStates[8].owner, "mouseleftbuttonup", this.hongStates[8].handleEvent);

  this.lastWidth = 0;
  this.lastHeight = 0;

  this.center = new point(0,0);
  this.imgPoint = new point(0,0);
  this.points = new Array();
  this.points[0] = new point(0,0);
  this.points[1] = new point(0, 0);
  this.points[2] = new point(0, 0);
  this.points[3] = new point(0, 0);
  this.points[4] = new point(0, 0);
  this.points[5] = new point(0, 0);
  this.points[6] = new point(0, 0);
  this.points[7] = new point(0, 0);
  this.points[8] = new point(0, 0);
  this.points[9] = new point(0, 0);
  this.points[10] = new point(0, 0);
  this.points[11] = new point(0, 0);

  // WPF/E Downloader with progress downloader
  this.loader = this.host.createObject("downloader"); 

  // Set the downloader's completed event to a local method and start the downloading
  this.setCallback(this.loader, "completed", this.downloadCompleted);
  this.setCallback(this.loader, "downloadProgressChanged", this.downloadProgressChanged);

  window.onresize = delegate(this, this.resize);
  this.resize();

  // Start the first download
  this.loader.open("Get", this.hongStates[this.stateIndex].url);
  this.loader.send();	
}

hongButton.prototype.resize = function() {
  
  var height;

  if (navigator.userAgent.indexOf("MSIE")==-1)
  {
    // need to set the control's height
    height =  document.body.clientHeight;
    document.wpfeControl1.height = height;
  }
  else
  {
    height = this.host.content.actualHeight;
  }

  var width = this.host.content.actualWidth;

  if (width != this.lastWidth)
  {
    this.center.x = width / 2;
    this.imgPoint.x = this.center.x - 275;
    this.points[1].x = this.imgPoint.x + 165;
    this.points[2].x = this.points[1].x + 200;
    this.points[3].x = width;
    this.points[4].x = width;
    this.points[5].x = width;
    this.points[6].x = width;
    this.points[7].x = this.points[2].x;
    this.points[8].x = this.points[1].x;
  }
  if (height != this.lastHeight)
  {
    this.center.y = height / 2;
    this.imgPoint.y = this.center.y - 278;
    this.points[4].y = this.imgPoint.y + 175;
    this.points[5].y = this.points[4].y + 250;
    this.points[6].y = height;
    this.points[7].y = height;
    this.points[8].y = height;
    this.points[9].y = height;
    this.points[10].y = this.points[5].y;
    this.points[11].y = this.points[4].y;
  }

  for (i = 0; i < this.hongStates.length; i++)
     this.hongStates[i].setImagePosition(this.imgPoint);


  this.setPosition(this.hong, this.imgPoint);
  this.setPosition(this.face, new point(this.points[1].x - 15, this.points[11].y - 50));
  this.setPosition(this.loading, new point(this.center.x - 200, this.center.y - 25));
  this.setPosition(this.reflection, new point(this.imgPoint.x, this.imgPoint.y + 835));
  this.setPoints(this.hongStates[0].owner, new Array(this.points[0], this.points[1], this.center, this.points[11]));
  this.setPoints(this.hongStates[1].owner, new Array(this.points[1], this.center, this.points[2]));
  this.setPoints(this.hongStates[2].owner, new Array(this.points[2], this.center, this.points[4], this.points[3]));
  this.setPoints(this.hongStates[3].owner, new Array(this.points[11], this.center, this.points[10]));
  this.setPoints(this.hongStates[4].owner, new Array(this.points[4], this.center, this.points[5]));
  this.setPoints(this.hongStates[5].owner, new Array(this.points[5], this.center, this.points[6]));
  this.setPoints(this.hongStates[6].owner, new Array(this.points[7], this.center, this.points[8]));
  this.setPoints(this.hongStates[7].owner, new Array(this.points[8], this.center, this.points[10], this.points[9]));
}

hongButton.prototype.setActive = function(img) {
  this.activeImage.Opacity = 0;
  img.Opacity = 1;
  //alert(img.Source);
  this.activeImage = img;
  this.reflection.Source = this.activeImage.Source;
}

hongButton.prototype.setCallback = function(target, eventName, callback) {

	if (!window.methodIndex)
		window.methodIndex = 0;
	
	var callbackName = "uniqueCallback" + (window.methodIndex++);
	var controller = this;
	var func = function() {
		callback.apply(controller, arguments);
	}

	eval(callbackName + " = func;");
	target.addEventListener(eventName,callbackName);
}

hongButton.prototype.downloadProgressChanged = function(sender, args) {
    // Set the width of the progress bar
    var loadingRect = sender.findName("loadingRect");
    loadingRect.width = sender.downloadProgress * 390;
}

hongButton.prototype.downloadCompleted = function(sender, args) {
    
    for (i = 0; i <  this.hongStates.length; i++)
    {
       if (sender.uri == this.hongStates[i].url)
       {
	  this.canvas.children.insert(1,this.hongStates[i].image);
	  var img = sender.findName(this.hongStates[i].imageName);
 	  img.setSource(sender, "");
          break;
       }
    }   

    this.stateIndex++;

    if (this.stateIndex >= this.hongStates.length) {
	    // Hide the downlaod status text
	    var loadingTextCanvas = sender.findName("loadingTextCanvas");
	    loadingTextCanvas.opacity = 0;
            this.enable();
    }
    else {
        var loadingText = sender.findName("loadingText");
        loadingText.text = "Loading: " + this.hongStates[this.stateIndex].url;
        
        // Kick off the next download
        this.loader.open("Get", this.hongStates[this.stateIndex].url);
  	this.loader.send();
    }
}

hongButton.prototype.enable = function() {
  for (i = 0; i <  this.hongStates.length; i++)
   this.hongStates[i].enabled = true;
}

hongButton.prototype.setPosition = function(target, point) {
	target["Canvas.Left"] = point.x;
    	target["Canvas.Top"] = point.y;
}

hongButton.prototype.setPoints = function(target, points) {
	target.Points = points.ToString();
}