// ***** Copyright ©2003 Frogtrade Limited. All rights reserved *****
//
// Purpose: 
//
// Notes: 
//

// *********************** CONSTRUCTOR *****************************
// All components should be a javascript object and should have a unique object_ref
// *****************************************************************
function picture_button(object_ref, body_html, out_css_class, over_css_class, down_css_class, disabled_css_class)
{
	// initialize needed in all
	this.object_ref=object_ref;
	this.object_type="picture_button";
	this.debug_messages=(typeof(ft_debug_messages)!="undefined");
	// register this so html can access the object
	if (typeof(get_broker)!="undefined")
	{
		var broker;
		if (!(broker=get_broker()))
		{
			show_ft_debug_message("menu_item js class",
								  "Could not add this object: " + this.object_type + " to the broker as the broker cannot be found\n" +
								  "This object will not be able to function properly");
		}
		else
		{
			get_broker().add_js_object(this);
		}
	}
	else if (this.debug_messages)
	{
		show_ft_debug_message("menu_item js class",
							  "Could not add this object: " + this.object_type + " to the broker as the get_broker function cannot be found\n" +
							  "This object will not be able to function properly");
	}

	// initialize
	this.ref_id=this.object_type + "_" + this.object_ref;

	this.body_html = body_html;
	this.external_label = '';
	this.general_css_class = 'picture_button';
	this.out_css_class = out_css_class;
	this.over_css_class = over_css_class;
	this.down_css_class = down_css_class;
	this.disabled_css_class = disabled_css_class
	this.showing_menu = false;
	this.enabled = true;
	this.visible = true;
	this.show_popup_arrow = true;
	this.parent_menubar = null;
	this.popup_menu = null;
	this.shiny = true;

	// general functions
	this.set_style=picture_button_set_style;
	this.set_icon=picture_button_set_icon;
	this.set_body_html=picture_button_set_body_html;
	this.set_external_label=picture_button_set_external_label;
	this.add_popup_menu=picture_button_add_popup_menu;
	this.get_dimensions=picture_button_get_dimensions;
	this.get_absolute_position=picture_button_get_absolute_position;
	this.show_popup=picture_button_show_popup;
	this.menu_showing=picture_button_menu_showing;
	this.hide_popup=picture_button_hide_popup;

	// event functions
	this.event_occured=picture_button_event_occured;
	this.set_state=picture_button_set_state;

	// add event callback functions
	this.add_onclick_cb=picture_button_add_onclick_cb;
	this.add_onmouseover_cb=picture_button_add_onmouseover_cb;

	//output functions
	this.write_html=picture_button_write_html;
	this.get_html=picture_button_get_html;
	this.set_html_window=picture_button_set_html_window;
}

function set_menubar_colour(colour){
	document.menubar_colour=colour;
}

function set_menubar_text_colour(colour){
	document.menubar_text_colour=colour;
}

function picture_button_event_occured(event, div_obj, evnt)
{
	if (this.enabled && this.visible && this.shiny)
	{
		switch (event)
		{
			case 'onmouseout' :
				this.set_state('mouseout', div_obj);
			break;
			case 'onmouseover' :
				if (this.parent_menubar)
				{
					this.parent_menubar.button_overed(this);
				}

				this.set_state('mouseover', div_obj);
				if (this.onmouseover_cb_function)
				{
					this.onmouseover_cb_function();
				}
			break;
			case 'onmousedown' :
				if (this.showing_menu)
				{
					this.show_popup(false);
				}
				else
				{
					this.show_popup(true);
				}

				this.set_state('mousedown', div_obj);
				evnt.cancelBubble = true;
			break;
			case 'onmouseup' :
				this.set_state('mouseup', div_obj);
			break;
			case 'onclick' :
			if (this.parent_menubar && !this.showing_menu)
			{
				this.parent_menubar.menu_showing(false, this);
			}

			if (this.onclick_cb_function)
			{
				this.onclick_cb_function();
			}
			break;
		}
	}
}

function picture_button_set_state(state, div_obj)
{
	var parent_html_elem=null;

	if (!div_obj)
	{
		var div_obj=get_html_element(this.object_type, this.object_ref, parent_html_elem, this.html_window);
	}

	// sets the state properties of the object
	switch (state)
	{
		case 'enabled' :
			this.enabled=true;
			break;

		case 'disabled' :
			this.enabled=false;
			break;

		case 'visible' :
			this.visible=true;
			break;

		case 'hidden' :
			this.visible=false;
			break;
		
		case 'shiney':
			this.shiny = true;
			break;

		case 'not_shiny':
			this.shiny = false;
			break;
	}

	// sets the visual state of the object.
	// the object has to have been written to the page and be found to set the state
	if (div_obj)
	{
		var doc=div_obj.ownerDocument;
		b_box=doc.getElementById(this.ref_id+'_border_box');

		if (this.shiny)
		{
			s_box=doc.getElementById(this.ref_id+'_shiny_div');
			s_box_left = doc.getElementById('button_back_left_'+ this.ref_id);
			s_box_mid = doc.getElementById('button_back_mid_'+ this.ref_id);
			s_box_right = doc.getElementById('button_back_right_'+ this.ref_id);
		}

		b_html=doc.getElementById(this.ref_id+'_measure');
		t_html=doc.getElementById(this.ref_id+'_table');
		e_label=doc.getElementById(this.ref_id+'_ext_label');

		switch (state)
		{
			case 'enabled' :
				b_box.className=this.out_css_class;
				t_html.className='picture_button_enabled';
				e_label.className='';
				div_obj.style.cursor='pointer';
			break;
			case 'disabled' :
				b_box.className=this.out_css_class;
				t_html.className=this.disabled_css_class;
				e_label.className=this.disabled_css_class;
				div_obj.style.cursor='default';
				if(s_box)
					s_box.style.visibility = "hidden";
			break;
			case 'visible' :
				div_obj.style.display="block";
				this.parent_menubar.resizebar();
			break;
			case 'hidden' :
				div_obj.style.display="none";
				this.parent_menubar.resizebar();
				if(s_box)
					s_box.style.visibility = "hidden";
			break;
			case 'mouseout' :
				if (!this.showing_menu)
				{
					if (s_box)
					{
						s_box.style.visibility = "hidden";
					} else {
						b_box.className=this.out_css_class;
					}
					
				}
			break;
			case 'mouseover' :
				if (this.showing_menu)
				{
					if (s_box)
					{
						s_box.style.visibility = "visible";
					} else {
						b_box.className=this.down_css_class;
					}
				}
				else
				{
					if (s_box)
					{
						s_box.style.visibility = "visible";
					} else {
						b_box.className=this.over_css_class;
					}
				}
			break;
			case 'mousedown' :
				if (!this.popup_menu)
				{
					if (s_box)
					{
						s_box.style.visibility = "visible";
					} else {
						b_box.className=this.down_css_class;
					}
				}
				else if (this.showing_menu)
				{
					if (s_box)
					{
						s_box.style.visibility = "visible";
						s_box.style.top = '-2px';
						s_box_left.className = "new_picture_button_back_left_down";
						s_box_mid.className = "new_picture_button_back_mid_down";
						s_box_right.className = "new_picture_button_back_right_down";
					} else {
						b_box.className=this.down_css_class;
					}
				}
				else // the button has a popup and the mousedown has just switched it off so set the style to over
				{
					if (s_box)
					{
						s_box.style.visibility = "visible";
						s_box.style.top = '-2px';
						s_box_left.className = "new_picture_button_back_left_over";
						s_box_mid.className = "new_picture_button_back_mid_over";
						s_box_right.className = "new_picture_button_back_right_over";
					} else {
						b_box.className=this.over_css_class;
					}
					
				}
			break;
			case 'mouseup' :
				if (!this.showing_menu)
				{
					if (s_box)
					{
						s_box.style.visibility = "visible";
						
					} else {
						b_box.className=this.over_css_class;
					}
					
				}
			break;
		}
	}
}


// *********************** GENERAL FUNCTIONS ***********************
// General functions should be named "OBJECTNAME"_"FUNCTIONNAME"
// *****************************************************************

function picture_button_set_style(style)
{
	if (style=='default')
	{
		this.general_css_class='picture_button';
	}
	else if (style=='shortcut')
	{
		this.general_css_class='picture_button_1';
	}
	else if (style=='right')
	{
		this.general_css_class='picture_button right';
	}

	var parent_html_elem=null;
	var div_obj=get_html_element(this.object_type, this.object_ref, parent_html_elem, this.html_window);
	if (div_obj)
	{
		div_obj.className=this.general_css_class;
	}
}

function picture_button_hide_popup()
{
	this.show_popup(false);
}

function picture_button_show_popup(visible)
{
	if (this.popup_menu)
	{
		if (visible)
		{
			var coords=this.get_absolute_position();
			var dims=this.get_dimensions();

			this.popup_menu.show(this, (coords.x - 4), (coords.y + 5), (coords.x + dims.width - 4), (coords.y + dims.height + 5), "B_R");

		}
		else
		{
			this.popup_menu.hide();
		}
	}
}

function picture_button_menu_showing(is_showing)
{
	// this function is called by the popup_menu when it is displayed or hidden.
	// This function should in turn call the parent menubars menu_showing(is_showing) function

	this.showing_menu=is_showing;
	if (this.parent_menubar)
	{
		this.parent_menubar.menu_showing(is_showing, this);
	}
	this.set_state('mouseout');
}

function picture_button_set_icon(icon_src, parent_html_elem, retry)
{
	this.icon_src=icon_src;
	var div_obj=get_html_element(this.object_type, this.object_ref, parent_html_elem, this.html_window);
	if (div_obj)
	{
		var doc=div_obj.ownerDocument;
		var icon_obj=doc.getElementById(this.ref_id+'_icon');

		if (icon_obj)
		{
			if (icon_src)
			{
				icon_obj.src=icon_src;
				icon_obj.style.display='inline';
			}
			else
			{
				icon_obj.style.display='none';
			}
		}
	}
}

function picture_button_set_body_html(body_html, parent_html_elem, retry)
{
	this.body_html=body_html;
	var div_obj=get_html_element(this.object_type, this.object_ref, parent_html_elem, this.html_window);
	if (div_obj)
	{
		var doc=div_obj.ownerDocument;
		var body_obj=doc.getElementById(this.ref_id+'_body');
		if (body_obj)
		{
			body_obj.innerHTML=body_html;
		}
	}
}

function picture_button_set_external_label(label, parent_html_elem, retry)
{
	this.external_label=label;
	var div_obj=get_html_element(this.object_type, this.object_ref, parent_html_elem, this.html_window);
	if (div_obj)
	{
		var doc=div_obj.ownerDocument;
		var ext_label_obj=doc.getElementById(this.ref_id+'_ext_label');
		if (ext_label_obj)
		{
			ext_label_obj.style.display='inline';
			ext_label_obj.innerHTML=label;
		}
	}
}

function picture_button_add_popup_menu(popup_menu)
{
	this.popup_menu=popup_menu;
	popup_menu.parent_button=this;
}

function picture_button_get_dimensions()
{
// this should use the children collection not the all collection

	var div_obj=get_html_element(this.object_type, this.object_ref, false, this.html_window);

	var doc=div_obj.ownerDocument;
	var measure_obj=doc.getElementById(this.ref_id+'_measure');

	var dims=new Object();

	dims.width=measure_obj.offsetWidth;
	dims.height=measure_obj.offsetHeight;
	return dims;
}

function picture_button_get_absolute_position()
{
	var div_obj=get_html_element(this.object_type, this.object_ref, false, this.html_window);

	var doc=div_obj.ownerDocument;
	return get_absolute_position(doc.getElementById(this.ref_id+'_measure'));
}


// *********************** EVENT CALLBACK FUNCTIONS ***********************
// Event callback functions should be named "OBJECTNAME"_add_"EVENTNAME"_cb
// ************************************************************************
function picture_button_add_onclick_cb(cb_function, cb_args)
{
	this.onclick_cb_function=cb_function;
	this.onclick_cb_args=cb_args;
}

function picture_button_add_onmouseover_cb(cb_function, cb_args)
{
	this.onmouseover_cb_function=cb_function;
	this.onmouseover_cb_args=cb_args;
}


// *********************** OUTPUT FUNCTIONS ************************
// Output functions should be named "OBJECTNAME"_"FUNCTIONNAME"
// *****************************************************************
function picture_button_write_html()
{
	document.write(this.get_html());
}

function swap_button_ON(button_id){
	document.getElementById('button_back_left_' + button_id).className='new_picture_button_back_left_over';
	document.getElementById('button_back_mid_' + button_id).className='new_picture_button_back_mid_over';
	document.getElementById('button_back_right_' + button_id).className='new_picture_button_back_right_over';
}
function swap_button_OFF(button_id){
	document.getElementById('button_back_left_' + button_id).className='new_picture_button_back_left';
	document.getElementById('button_back_mid_' + button_id).className='new_picture_button_back_mid';
	document.getElementById('button_back_right_' + button_id).className='new_picture_button_back_right';
}

function picture_button_get_html()
{
	var shiny = {};

	if(navigator.userAgent.toLowerCase().indexOf('msie') >= 0)
	{
		shiny.top = '-2px';
	}
	else
	{
		shiny.top = 0;
	}

	return "<div id='" + this.ref_id  + "' class='" + this.general_css_class + "' " +
	"style='position: relative; height: 30px;" + (!this.visible?"display:none;":"") + "' " +
	"onselectstart=\"return false;\" " +
	"onclick=\"get_broker().get_js_object('" + this.object_type + "', '" + this.object_ref + "').event_occured('onclick', this)\" " +
	"onmouseover=\"get_broker().get_js_object('" + this.object_type + "', '" + this.object_ref + "').event_occured('onmouseover', this)\" " +
	"onmousedown=\"get_broker().get_js_object('" + this.object_type + "', '" + this.object_ref + "').event_occured('onmousedown', this, event)\" " +
	"onmouseout=\"get_broker().get_js_object('" + this.object_type + "', '" + this.object_ref + "').event_occured('onmouseout', this)\" " +
	"onmouseup=\"get_broker().get_js_object('" + this.object_type + "', '" + this.object_ref + "').event_occured('onmouseup', this)\" " + ">" +
		'<div style="position: relative; z-index: 2;">' + 
			'<div id="' + this.ref_id + '_border_box" class="" style="padding:1px 0px 0px 4px">' + 
				'<div id="' + this.ref_id + '_measure" style="" >' + 
					'<table class="' + (!this.enabled? this.disabled_css_class : 'picture_button_enabled') + '" id="' + this.ref_id + '_table" height="22" width="0%" border="0" cellspacing="0" cellpadding="0">' +
						'<tr>' +
							'<td width="' + (this.icon_src? '20px' : '') + '">' +
								'<img id="' + this.ref_id + '_icon" src="' + this.icon_src + '" hspace="2" style="display:' + (this.icon_src? 'inline' : 'none') + '">' + 
							'</td>' +
							'<td id="' + this.ref_id + '_body" style="white-space:nowrap" class="'+ this.general_css_class +'"><span style="display: inline-block; width: auto; text-transform: capitalize;">' + this.body_html + '</span></td>' +
							'<td width="0%">' +
								'<img id="' + this.ref_id + '_popup_icon" src="/sysimages/combo-down.gif" width="5" height="5" hspace="2" style="margin: 2px 0px 0px 4px; display:' + (this.popup_menu? 'inline' : 'none') + '">' +
							'</td>' +
						'</tr>' +
					'</table>' +
				'</div>' + 
			'</div>' +
		'</div>' + 
		'<div id="' + this.ref_id + '_shiny_div" style= "visibility: hidden; position: absolute; top: ' + shiny.top + '; left: 5px; z-index: 1; ">'+
			'<table cellpadding="0" cellspacing="0">'+
			'<tr>'+
				'<td class="new_picture_button_back_left_over" id="button_back_left_'+ this.ref_id +'" valign="top"></td>'+
				'<td class="new_picture_button_back_mid_over" id="button_back_mid_'+ this.ref_id +'"  style="white-space:nowrap; padding:0px; margin:0px;">'+
					'<table class="' + (!this.enabled? this.disabled_css_class : 'picture_button_enabled') + '" height="22" width="0%" border="0" cellspacing="0" cellpadding="0" style="visibility:hidden; border: 1px solid transparent;">' +
						'<tr>' +
							'<td width="0%">' +
								'<img src="' + this.icon_src + '" hspace="2" style="display:' + (this.icon_src? 'inline' : 'none') + '">' + 
							'</td>' +
							'<td id="' + this.ref_id + '_shiny_body" style="white-space:nowrap" class="'+ this.general_css_class +'"><span style="display: inline-block; width: auto;">' + this.body_html + '</span></td>' +
							'<td width="0%">' +
								'<img src="/sysimages/combo-down.gif" width="5" height="5" hspace="2" style="margin: 2px 0px 0px 4px; display:' + (this.popup_menu? 'inline' : 'none') + '">' +
							'</td>' +
						'</tr>' +
					'</table>' +
				'</td>'+
				'<td class="new_picture_button_back_right_over" id="button_back_right_'+ this.ref_id +'" valign="top"></td>'+
			'</tr>'+
		'</table>'+		
		'</div>' + 
		'<div id="' + this.ref_id + '_ext_label" align="center" ' + (!this.enabled?' class="' + this.disabled_css_class + '"' : '') + ' style="width:100%;padding:2px;' + (!this.external_label?'display:none;':'') + '">' + this.external_label + '</div>' +
	"</div>\n";

	/*
		//return this.general_css_class + " " +  this.out_css_class + "::";
		return '' +
		'<div class="button_container" style="float:left;'+ (!this.visible?"display:none;":"") + '">' +
			'<div '+
			"onselectstart=\"return false;\" " +
			"onclick=\"get_broker().get_js_object('" + this.object_type + "', '" + this.object_ref + "').event_occured('onclick', this)\" " +
			'class="new_picture_button_front" onmouseover="swap_button_ON(\''+ this.ref_id +'\')" onmouseout="swap_button_OFF(\''+ this.ref_id +'\')">'+
			'<table cellpadding="0" cellspacing="0" class="' + (!this.enabled? this.disabled_css_class : 'picture_button_enabled') + '>'+
			'<tr>'+
				'<td style="width:5px;"></td>'+
				'<td style="padding:0px;">'+
			'<table cellpadding="0" cellspacing="0"><tr><td>'+
					'<img src="'+this.icon_src+'" style="border: 0px; " />' + 
			'</td><td style="font-family: tahoma,arial,verdana; font-size:8pt; padding:0px 2px 0px 2px;white-space:nowrap;">'+
			this.body_html + ' '+
			'</td></tr></table>'+
				'</td>'+
				'<td style="width:5px;"></td>'+
			'</tr>'+
			'</table>'+
			'</div>'+
			'<div id="button_back_1">'+
			'<table cellpadding="0" cellspacing="0">'+
			'<tr>'+
				'<td class="new_picture_button_back_left" id="button_back_left_'+ this.ref_id +'"></td>'+
				'<td class="new_picture_button_back_mid" id="button_back_mid_'+ this.ref_id +'"  style="font-family: tahoma,arial,verdana; font-size:8pt; padding:0px 2px 0px 2px;white-space:nowrap">'+
					'<span style="visibility:hidden;" ><img src="'+this.icon_src+'" align="top" style="border: 0px;"/> ' + this.body_html + ' </span>'+
				'</td>'+
				'<td class="new_picture_button_back_right" id="button_back_right_'+ this.ref_id +'"></td>'+
			'</tr>'+
			'</table>'+
			'</div>'+
		'</div>';
		*/

	
}

function picture_button_set_html_window(html_window)
{
	this.html_window=html_window;
}