EVR.Text = function(container, text, font, color, size, size_relative)
{
   EVR.Component.call(this, container, "p");
   !!container.container && (this.size_relative = container.container);
   this.set(text, font, color, size, size_relative);
   this.style();
   this.set_font_size();
   this.append();
}
EVR.Text.prototype = new EVR.Component;
EVR.Text.prototype.set = function(text, font, color, size, size_relative)
{
   this.element.innerHTML = text;
   !!font && (this.font = font);
   !!color && (this.color = color);
   !!size && (this.size = size);
   !!size_relative && (this.size_relative = size_relative);
}
EVR.Text.prototype.style = function()
{
   this.css.fontFamily = this.font;
   this.css.color = this.color;
   this.css.margin = "0px";
}
EVR.Text.prototype.set_font_size = function()
{
   var dimensions = this.size_relative.get_dimensions();
   var modifier = dimensions[1] / dimensions[0];
   var size = parseInt(dimensions[0] * modifier * this.size);
   this.css.fontSize = size + "px";
}
EVR.Text.prototype.get_text = function()
{
   return this.element.innerHTML;
}
EVR.Text.prototype.get_font_size = function()
{
   return this.css.fontSize.match(/^([0-9]+)px$/)[1];
}
EVR.Text.prototype.set_line_height = function(height)
{
   this.css.lineHeight = parseInt(height) + "px";
}
EVR.Text.prototype.toString = function()
{
   return "[object EVR.Text]";
}

EVR.Graphic = function(container, ratio_type, range, alignment, size_relative)
{
   EVR.Component.call(this, container, "div");
   this.ratio_type = ratio_type || RATIO_INDEPENDENT;
   this.range = range || container;
   this.size_relative = size_relative || container;
   this.aligner = new EVR.Graphic.Aligner(this, alignment);
   this.css.position = "absolute";
   this.css.fontSize = "0px";
   this.offset = [0, 0];
   this.proportions = [0, 0];
}
EVR.Graphic.prototype = new EVR.Component;
EVR.Graphic.prototype.set_container = function(container, range)
{
   this.container = container;
   this.range = range || container;
}
EVR.Graphic.prototype.set_proportions = function(width, height)
{
   if (width != null)
   {
      this.proportions[0] = width;
   }
   if (height != null)
   {
      this.proportions[1] = height;
   }
}
EVR.Graphic.prototype.get_dimensions = function(ratio)
{
   var dimensions = EVR.Component.prototype.get_dimensions.call(this);
   if (ratio == true)
   {
      var relative_dimensions = this.size_relative.get_dimensions();
      dimensions[0] /= relative_dimensions[0];
      dimensions[1] /= relative_dimensions[1];
   }
   return dimensions;
}
EVR.Graphic.prototype.get_opacity = function()
{
   return parseFloat(this.element.style.opacity);
}
EVR.Graphic.prototype.set_text = function(text, font, color, size, relative)
{
   relative = relative || this.size_relative;
   EVR.Component.prototype.set_text.call(
      this, text, font, color, size, relative);
}
EVR.Graphic.prototype.shape = function()
{
   var dimensions = this.size_relative.get_dimensions();
   var width = dimensions[0] * this.proportions[0];
   var height = dimensions[1] * this.proportions[1];
   if (this.ratio_type == RATIO_WIDTH)
   {
      height = width * this.proportions[1];
   }
   else if (this.ratio_type == RATIO_HEIGHT)
   {
      width = height * this.proportions[0];
   }
   this.set_dimensions(width, height);
}
EVR.Graphic.prototype.grow = function(modifier, additional_modifier)
{
   if (this.ratio_type == RATIO_WIDTH)
   {
      this.proportions[0] += modifier;
   }
   else if (this.ratio_type == RATIO_HEIGHT)
   {
      this.proportions[1] += modifier;
   }
   else
   {
      this.proportions[0] += modifier;
      this.proportions[1] += additional_modifier != null ?
	 additional_modifier : modifier;
   }
   this.draw();
}
EVR.Graphic.prototype.append = function()
{
   EVR.Component.prototype.append.call(this);
   this.draw();
}
EVR.Graphic.prototype.draw = function()
{
   this.shape();
   this.place();
   if (this.text instanceof EVR.Text)
   {
      this.text.set_font_size();
   }
}
EVR.Graphic.prototype.place = function()
{
   var coordinates = this.aligner.align();
   if (arguments.length > 0 && arguments[0] != null)
   {
      this.offset[0] = arguments[0];
   }
   if (arguments.length > 1)
   {
      this.offset[1] = arguments[1];
   }
   coordinates = this.convert_ratio_to_distance(coordinates);
   this.set_coordinates(coordinates);
}
EVR.Graphic.prototype.convert_ratio_to_distance = function(coordinates)
{
   var dimensions = this.size_relative.get_dimensions();
   coordinates[0] += this.offset[0] * dimensions[0];
   coordinates[1] += this.offset[1] * dimensions[1];
   return coordinates;
}
EVR.Graphic.prototype.move = function()
{
   this.offset[0] += arguments[0];
   if (arguments.length > 1)
   {
      this.offset[1] += arguments[1];
   }
   this.place();
}   
EVR.Graphic.prototype.toString = function() { return "[object Graphic]"; }

EVR.Graphic.Aligner = function(graphic, alignment)
{
   this.graphic = graphic;
   this.alignment = alignment || ALIGN_TOP_LEFT;
}
EVR.Graphic.Aligner.prototype.align = function()
{
   var coordinates = [0, 0];
//    if (this.alignment == ALIGN_TOP_LEFT)
//    {
//       return coordinates;
//    }
   var range = this.graphic.range;
   if (range != this.graphic.container)
   {
      coordinates = range.get_coordinates();
   }
   switch (this.alignment)
   {
      case ALIGN_TOP:
         coordinates[0] += this.center_x();
         break;
      case ALIGN_TOP_RIGHT:
         coordinates[0] += this.right();
         break;
      case ALIGN_LEFT:
         coordinates[1] += this.center_y();
         break;
      case ALIGN_CENTER:
         coordinates[0] += this.center_x();
         coordinates[1] += this.center_y();
         break;
      case ALIGN_RIGHT:
         coordinates[0] += this.right();
         coordinates[1] += this.center_y();
         break;
      case ALIGN_BOTTOM_LEFT:
         coordinates[1] += this.bottom();
         break;
      case ALIGN_BOTTOM:
         coordinates[0] += this.center_x();
         coordinates[1] += this.bottom();
         break;
      case ALIGN_BOTTOM_RIGHT:
         coordinates[0] += this.right();
         coordinates[1] += this.bottom();
         break;
   }
   return coordinates;
}
EVR.Graphic.Aligner.prototype.center_x = function()
{
   var range = this.graphic.range;
   return range.get_dimensions()[0]/2 - this.graphic.get_dimensions()[0]/2;
}
EVR.Graphic.Aligner.prototype.center_y = function()
{
   var range = this.graphic.range;
   return range.get_dimensions()[1]/2 - this.graphic.get_dimensions()[1]/2;
}
EVR.Graphic.Aligner.prototype.right = function()
{
   var range = this.graphic.range;
   return range.get_dimensions()[0] - this.graphic.get_dimensions()[0];
}
EVR.Graphic.Aligner.prototype.bottom = function()
{
   var range = this.graphic.range;
   return range.get_dimensions()[1] - this.graphic.get_dimensions()[1];
}
EVR.Graphic.Aligner.prototype.toString = function()
{
   return "[object EVR.Graphic.Aligner]";
}