function TimeChooser( targetElement, callback, hour, minute, minuteGranularity )
{
	this.render = function()
	{
    var now = new Date();
    var nowHour = now.getHours();
    var nowMinute = now.getMinutes();
    var now5MinuteRange = Math.floor(now.getMinutes()/5) * 5;
    var now15MinuteRange = Math.floor(now.getMinutes()/15) * 15;
    var minuteCounter = 0;

		var html = "<div class=\"timechooser\"><div class=\"timechoosertop\"><div class=\"timechoosertopcorner\"></div><div class=\"timechoosermain\"><table cellpadding=\"0\" cellspacing=\"1\">";
		html += "<tbody><tr>";

		for( var h=0; h<12; h++ )
    {
      var elementClass = "hour";
      if( this.selectedHour == h ) {
          elementClass = "selectedhour";
      } else if( nowHour == h ) {
          elementClass = "now";
      }
			html += "<td width=\"25\" class=\"" + elementClass + "\"><a href=\"#\" onclick=\"TimeChooser.getById(" + id + ").chooseHour( " + h + " ); return false;\">" + ( h ) + "</a></td>";
		}

    html += "</tr><tr>";

		for( h=12; h<24; h++ )
    {
      elementClass = "hour";
      if( this.selectedHour == h ) {
          elementClass = "selectedhour";
      } else if( nowHour == h ) {
          elementClass = "now";
      }
			html += "<td width=\"25\" class=\"" + elementClass + "\"><a href=\"#\" onclick=\"TimeChooser.getById(" + id + ").chooseHour( " + h + " ); return false;\">" + ( h ) + "</a></td>";
		}

    html += "</tr></tbody></table>";

    html += "<div class=\"timechooserDivider\"> </div>";

    if ( minuteGranularity == "15" )
    {
      html += "<table cellpadding=\"0\" cellspacing=\"1\" class=\"timechooserMinutes\" style=\"width: 313px; margin-bottom: -1px; \"><tbody><tr>";
      minuteCounter = 0;
      for( x=0; x<4; x++ )
      {
        elementClass = "minute";
        if( this.selectedMinute == minuteCounter ) {
            elementClass = "selectedminute";
        } else if( now15MinuteRange == minuteCounter ) {
            elementClass = "now";
        }
        html += "<td class=\"" + elementClass + "\"><a class=\"wide\" href=\"#\" onclick=\"TimeChooser.getById(" + id + ").chooseMinute( " + minuteCounter + " ); return false;\">" + ( minuteCounter ) + "</a></td>";
        minuteCounter += 15;
      }
      html += "</tr></tbody></table>";
    }
    else if ( minuteGranularity == "5" )
    {
      html += "<table cellpadding=\"0\" cellspacing=\"1\" class=\"timechooserMinutes\" style=\"width: 313px; margin-bottom: -1px; \"><tbody>";
      minuteCounter = 0;
      for( y=0; y<3; y++ )
      {
        html += "<tr>";
        for( x=0; x<4; x++ )
        {
          elementClass = "minute";
          if( this.selectedMinute == minuteCounter ) {
              elementClass = "selectedminute";
          } else if( now5MinuteRange == minuteCounter ) {
              elementClass = "now";
          }
          html += "<td class=\"" + elementClass + "\"><a class=\"wide\" href=\"#\" onclick=\"TimeChooser.getById(" + id + ").chooseMinute( " + minuteCounter + " ); return false;\">" + ( minuteCounter ) + "</a></td>";
          minuteCounter += 5;
        }
      html += "</tr>";
      }
      html += "</tbody></table>";
    }
    else
    {
      html += "<table cellpadding=\"0\" cellspacing=\"1\" class=\"timechooserMinutes\" style=\"width: 313px; margin-bottom: -1px; \"><tbody>";
      minuteCounter = 0;
      for( y=0; y<6; y++ )
      {
        html += "<tr>";
        for( x=0; x<10; x++ )
        {
          elementClass = "minute";
          if( this.selectedMinute == minuteCounter ) {
              elementClass = "selectedminute";
          } else if( nowMinute == minuteCounter ) {
              elementClass = "now";
          }
          html += "<td class=\"" + elementClass + "\"><a href=\"#\" onclick=\"TimeChooser.getById(" + id + ").chooseMinute( " + minuteCounter + " ); return false;\">" + ( minuteCounter ) + "</a></td>";
          minuteCounter += 1;
        }
      html += "</tr>";
      }
      html += "</tbody></table>";
    }

    html += "<table cellpadding=\"0\" cellspacing=\"1\"><tfoot><tr><td><div style=\"text-align: center; width: 311px;\"><a href=\"#\" onclick=\"TimeChooser.getById(" + id + ").close(); return false;\">Close</a></div></td></tr></tfoot></table>";
    html += "</div></div></div>";

		targetElement.innerHTML = html;
	};

    this.getId = function()
    {
        return id;
    };

    this.setTime = function( hour, minute )
    {
        this.selectedHour = hour;
        this.selectedMinute = minute;
    };

	this.open = function()
	{
		this.render( this.selectedHour, this.selectedMinute );
        this.isOpen = true;
	};

	this.close = function()
	{
		targetElement.innerHTML = "";
        this.isOpen = false;
	};

	this.toggle = function()
	{
		if( this.isOpen )
        {
            this.close();
        }
        else
        {
            this.open();
        }
	};

	this.chooseHour = function( hour )
	{
    this.selectedHour = hour;
		this.callback( hour, this.selectedMinute );

    this.close(); // update highlighting
    this.open();  
	};

	this.chooseMinute = function( minute )
	{
    this.selectedMinute = minute;
		this.callback( this.selectedHour, minute );

    this.close();
	};


	{
        if( hour == null || hour == "undefined" || minute == null || minute == "undefined" )
        {
            var today = new Date();
            hour = today.getHours();
            minute = today.getMinutes();
        }

        this.selectedHour = hour;
        this.selectedMinute = minute;

        this.isOpen = false;

		if( TimeChooser.elements == undefined || TimeChooser.elements == null )
		{
			TimeChooser.elements = [];
		}
		if( TimeChooser.elementsById == undefined || TimeChooser.elementsById == null )
		{
			TimeChooser.elementsById = {};
		}

		id = TimeChooser.elements.length;

		if( typeof( targetElement ) == "string" )
		{
			targetElement = document.getElementById( targetElement );
		}

		this.targetElement = targetElement;

		this.callback = callback;

		TimeChooser.elements.push( this );
        TimeChooser.elementsById[targetElement.id] = this;
	}
}

TimeChooser.getById = function( id )
{
	return TimeChooser.elements[id];
};

TimeChooser.getByElementId = function( id )
{
	return TimeChooser.elementsById[id];
};