// JavaScript Document

/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "75";


/* No need to change anything after this */


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;


//Customize class for select, option and checkboxes
function Customize(checkboxHeight, radioHeight, selectWidth) {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
	for(a = 0; a < inputs.length; a++) {
		if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
			span[a] = document.createElement("span");
			span[a].className = inputs[a].type;

			if(inputs[a].checked == true) {
				if(inputs[a].type == "checkbox") {
					position = "0 -" + (checkboxHeight*2) + "px";
					span[a].style.backgroundPosition = position;
				} else {
					position = "0 -" + (radioHeight*2) + "px";
					span[a].style.backgroundPosition = position;
				}
			}
			inputs[a].parentNode.insertBefore(span[a], inputs[a]);
			inputs[a].onchange = Custom.clear;
			if(!inputs[a].getAttribute("disabled")) {
				span[a].onmousedown = Custom.pushed;
				span[a].onmouseup = Custom.check;
			} else {
				span[a].className = span[a].className += " disabled";
			}
		}
	}
	inputs = document.getElementsByTagName("select");
	for(a = 0; a < inputs.length; a++) {
		if(inputs[a].className == "styled") {
			option = inputs[a].getElementsByTagName("option");
			active = option[0].childNodes[0].nodeValue;
			textnode = document.createTextNode(active);
			for(b = 0; b < option.length; b++) {
				if(option[b].selected == true) {
					textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
				}
			}
			span[a] = document.createElement("span");
			span[a].className = "select";
			span[a].id = "select" + inputs[a].name;
			span[a].appendChild(textnode);
			inputs[a].parentNode.insertBefore(span[a], inputs[a]);
			if(!inputs[a].getAttribute("disabled")) {
				inputs[a].onchange = Custom.choose;
			} else {
				inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
			}
		}
	}
	document.onmouseup = Custom.clear;
}

Customize.prototype.choose = function() {
	option = this.getElementsByTagName("option");
	for(d = 0; d < option.length; d++) {
		if(option[d].selected == true) {
			document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
		}
	}
};

Customize.prototype.clear = function() {
	inputs = document.getElementsByTagName("input");
	for(var b = 0; b < inputs.length; b++) {
		if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
			inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
		} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
			inputs[b].previousSibling.style.backgroundPosition = "0 0";
		} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
			inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
		} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
			inputs[b].previousSibling.style.backgroundPosition = "0 0";
		}
	}
};

Customize.prototype.pushed = function() {
	element = this.nextSibling;
	if(element.checked == true && element.type == "checkbox") {
		this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
	} else if(element.checked == true && element.type == "radio") {
		this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
	} else if(element.checked != true && element.type == "checkbox") {
		this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
	} else {
		this.style.backgroundPosition = "0 -" + radioHeight + "px";
	}
};
    
Customize.prototype.check = function() {
	element = this.nextSibling;
	if(element.checked == true && element.type == "checkbox") {
		this.style.backgroundPosition = "0 0";
		element.checked = false;
	} else {
		if(element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			group = this.nextSibling.name;
			inputs = document.getElementsByTagName("input");
			for(a = 0; a < inputs.length; a++) {
				if(inputs[a].name == group && inputs[a] != this.nextSibling) {
					inputs[a].previousSibling.style.backgroundPosition = "0 0";
				}
			}
		}
		element.checked = true;
	}
};

//Helper for customize classes
//Input <p>Label <input class='Class' type="button" /></p>
//Output <p><table><tr><td>Label </td><td><input class='Class' type="button" /></td></tr></table></p>
var TableWrapper = {
    wrap:function(element) {
        
        var parentNode = element.parentNode; 
        var childs = parentNode.childNodes; 
        
        var table = document.createElement('table');
        table.cellPadding = "0";
        table.cellSpacing = "0";
        var tbody =document.createElement('tbody'); 
        var tr = document.createElement('tr'); 
        tbody.appendChild(tr); 
        table.appendChild(tbody); 
        
        for(index = 0; index < childs.length; index++) {
            var child = childs[index];
            var td = document.createElement('td'); 
            td.appendChild(childs[index]); 
            tr.appendChild(td);
        }
        
        parentNode.appendChild(table);
    }
    
};

 

//Plugin for textbox customization 
(function($){
    
    $.fn.customizeTextBox = function(){
        return this.each(function(){
            if ($(this).attr('type') == 'text' || $(this).attr('type') == 'password') {
                $(this).removeClass('styled');
                var code = '<table cellspacing="0" cellpadding="0"><tr><td><div class="textBox">';
                code += '<div class="textBoxLeft"></div>'; 
                code += '<div class="textBoxBg"></div>';
                code += '<div class="textBoxRight"></div>';
                code += '<div class="clr"></div>';  
                code += '</div></td></tr></table>';  
                var h = $(code); 
                $(h).insertBefore(this); 
                $(h).find('div.textBoxBg').append(this);
            }    
        }); 
    }
})(jQuery); 

//Customization for text boxes 
var TextBoxCustomizer = {
    
    init:function(textBoxName) {
      
        var textBox = document.getElementById(textBoxName); 
        if (textBox != undefined) {
            
            
            
            var parent  = textBox.parentNode;
            
            var holder = document.createElement('div'); 
            holder.className = 'textBox'; 
            
            var leftPart = document.createElement('div'); 
            leftPart.className = "textBoxLeft";
            
            var bgPart  = document.createElement('div'); 
            bgPart.className = "textBoxBg";
            bgPart.appendChild(textBox); 
            
            var rightPart = document.createElement('div'); 
            rightPart.className = "textBoxRight";
            
            var clearDiv = document.createElement('div'); 
            clearDiv.className = "clr"; 
            
            holder.appendChild(leftPart);
            holder.appendChild(bgPart); 
            holder.appendChild(rightPart);
            holder.appendChild(clearDiv);
            
            parent.appendChild(holder); 
            
            
        }
    },
    
    apply:function(styleName) {
        
        var textBoxes = document.getElementsByTagName('input'); 
        if (textBoxes != undefined) {
            
            for(i=0;i<textBoxes.length;i++) {
                
                if (textBoxes[i].type == 'text' || textBoxes[i].type == 'password') {
                    
                    if (textBoxes[i].className == styleName) {
                        TextBoxCustomizer.applyStyle(textBoxes[i]);
                        //Remove style
                        textBoxes[i].className = '';
                        textBoxes[i].onfocus = TextBoxCustomizer.clearOnFocus;
                    }
                }
            }
        }    
    }, 
    applyStyle:function(textBox) {
        
        
        var parent  = textBox.parentNode;
            
        var holder = document.createElement('div'); 
        holder.className = 'textBox'; 
        
        var leftPart = document.createElement('div'); 
        leftPart.className = "textBoxLeft";
        
        var bgPart  = document.createElement('div'); 
        bgPart.className = "textBoxBg";
         
        
        var rightPart = document.createElement('div'); 
        rightPart.className = "textBoxRight";
        
        
        holder.appendChild(leftPart);
        holder.appendChild(bgPart); 
        holder.appendChild(rightPart);
        
        parent.insertBefore(holder, textBox);
        bgPart.appendChild(textBox);
        
        TableWrapper.wrap(holder);
    }, 
    
    clearOnFocus:function() {
        //this.value = '';    
    }
};

/*Customizer for combobox*/
var ComboBoxCustomizer = {
    
    init:function(comboBoxName) {
      
        var comboBox = document.getElementById(comboBoxName); 
        if (comboBox != undefined) {
            ComboBoxCustomizer.applyStyle(comboBox);
        }
    },
    
    apply:function(holderId) {
        
        var holder = document.getElementById(holderId);
        if (holder == null) return false;
        var comboBoxes = holder.getElementsByTagName('select'); 
        if (comboBoxes != undefined) {
            
            for(i=0;i<comboBoxes.length;i++) {
                
                if (comboBoxes[i].className != 'styled') {
                    ComboBoxCustomizer.applyStyle(comboBoxes[i]);
                    //Remove style
                    //comboBoxes[i].className = '';
                    
                }
                
            }
        }    
    }, 
    applyStyle:function(object) {
        
        //Get parent 
        var parentNode = object.parentNode; 
        
        //Create holder for fake combo 
        var holder = document.createElement('div'); 
        holder.style.position = 'absolute';
        holder.style.marginTop = '-3px';
        holder.className = 'styledSelect';
        
        
        var left = document.createElement('div'); 
        left.className = 'comboLeft'; 
        left.style.float = 'left'; 
        
        var background = document.createElement('div'); 
        background.className = 'comboBg'; 
        background.style.float = 'left';
        
        var right = document.createElement('div'); 
        right.className ='comboRight'; 
        right.style.flo  = 'left'; 
        
        
        
        var span = document.createElement('div');
        //holder.style.width = (object.offsetWidth) + 'px';
        span.style.width = (object.offsetWidth) + 'px';
        //holder.style.width = object.offsetWidth + 'px';
        
        //span.id = 'select_' + id;
        span.style.paddingLeft = '2px';
        span.style.paddingTop = '4px';  
        background.appendChild(span); 
        
        holder.appendChild(left);
        holder.appendChild(background); 
        holder.appendChild(right); 
    
        parentNode.insertBefore(holder, object); 
        object.style.opacity = '0';
        object.style.filter= 'alpha(opacity=0)';
        object.style.position = 'relative';  
        object.style.width = holder.offsetWidth + 'px';
        object.style.top = "5px";
        
        var options = object.childNodes; 
        for(var i = 0; i < options.length; i++) {
            if(options[i].selected) {
                var textnode = document.createTextNode(options[i].childNodes[0].nodeValue);
                span.appendChild(textnode);
                break; 
            }
        } 
         
        
        object.onchange = ComboBoxCustomizer.clickHandler; 
    }, 
    clickHandler:function() {
        
        var prevNode = this.previousSibling; 
        
        var options = this.childNodes;
        var index = 0;  
        for(index=0;index < options.length;index++ ) {
            if (options[index].selected) {
                prevNode.childNodes[1].firstChild.firstChild.nodeValue = 
                        options[index].firstChild.nodeValue;
                break;
            }
        }
        
    },
    //Fixing for invisible
    fixWidth:function(divHolderId) {
        
        var divHolder = document.getElementById(divHolderId); 
        //get background 
        var holders = divHolder.getElementsByTagName('select'); 
        for(var i=0; i < holders.length; i++) {
            var holder = holders[i].previousSibling;
            if (holders[i].style.width == '0px') {
                holders[i].style.width = holder.offsetWidth + 'px';
                //fix background
                
                holder.childNodes[1].firstChild.style.width = holder.offsetWidth + 'px';
                holder.style.width = (holder.childNodes[0].offsetWidth + holder.childNodes[1].offsetWidth + holder.childNodes[2].offsetWidth) + 'px'; 
                holders[i].style.width = holder.offsetWidth + 'px';   
            }
             
        }
        
    } 
    
};

/*
*Customizer for result tables 
*/
var ResultTableCustomizer = {
    
    applyAll:function(className) {
        
        this.className = className; 
        
        var tables = document.getElementsByTagName('table'); 
        if (tables != undefined) {
            for(i=0;i < tables.length; i++) {
                
                var table = tables[i];
                if (table.className == className) {
                    this.apply(table); 
                }
            }
        }
    },
    
    apply:function(table) {
        
        if (table.className == this.className) {
            var rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
            
            if (rows != undefined) {
                var makeGray = true;
                for(rowIndex=0; rowIndex < rows.length; rowIndex++) {
                    var row = rows[rowIndex];
                    //alert(row.parentNode);
                    
                    if (row.className != 'dontChangeIt') {
                        //Get columns 
                        //columns = row.getChildren();
                        
                        
                        columns = row.getElementsByTagName('td');
                        if (columns.length == 0 ) {
                            columns = row.getElementsByTagName('th');
                        } 
                        
                        if (columns.length == 0) {
                            columns = row.getChildren('td');
                        }
                        for(var columnIndex = 0; columnIndex < columns.length; columnIndex++) {
                            column = columns[columnIndex]; 
                            
                            if (row.className == 'tableHeader') {
                                //Header
                                if (columnIndex != 0) {
                                    column.className = 'columnHeader'; 
                                }        
                            } else {
                                //Row
                                
                                if (columnIndex == 0) {
                                    column.className = 'columnFirst';
                                } else {
                                    column.className = 'column';
                                }
                            } 
                        }   
                        //Style for rows
                        if (row.className != 'tableHeader') {    
                            if (makeGray) { 
                                row.className = "rowGray";
                            }
                            makeGray = !makeGray;
                        }
                    }
                    
                }
            } 
        }
        
    }
} 

var RoundButton = {
    applyAll:function(className) {
        $('input.styled').each(function(){
            RoundButton.apply(this);    
        }); 
    },
    apply:function(button){
        $(button).wrap('<div class="ovalButton" />');
        $(button).removeClass('styled');
        $(button).before('<div class="ovalButtonLeft"></div>');
        $(button).after('<div class="clr"></div>');
        $(button).after('<div class="ovalButtonRight"></div>');
        $(button).wrap('<div class="ovalButtonBg" />');
        var wraped =  $(button).parents('div.ovalButton'); 
        $(wraped).wrap('<table align="center">').wrap('<tr>').wrap('<td>');
        //$(button).insertBefore('<div class="ovalButtonLeft" />');
        //$(button).insertAfter('<div class="ovalButtonRight" />');
    }
};



/*
Style button as Round button
*/
var RoundButton1 = {
    //Apply style for all button with class 'className'
    applyAll:function(className) {
        var buttons = document.getElementsByTagName('input'); 
        
        if (buttons.length != 0) {
            for(elementIndex = 0; elementIndex < buttons.length; elementIndex++) {
                if (buttons[elementIndex].type == 'button' || buttons[elementIndex].type == 'submit' || buttons[elementIndex].type == 'reset') {
                    if (buttons[elementIndex].className == className) {
                        this.apply(buttons[elementIndex]); 
                    }
                }
            }
        }
        
    },
    //Apply style to button
    apply:function(buttonObject) {
        
        TableWrapper.wrap(buttonObject);
        
        var holder = document.createElement('div'); 
        holder.className = 'ovalButton'; 
        
        var leftPart = document.createElement('div');
        leftPart.className = 'ovalButtonLeft';
        var bgPart = document.createElement('div'); 
        bgPart.className = 'ovalButtonBg'; 
        var rightPart = document.createElement('div'); 
        rightPart.className = 'ovalButtonRight'; 
        var clearDiv = document.createElement('div'); 
        clearDiv.className = 'clr'; 
        var parent = buttonObject.parentNode; 
        
        //Assemble all together
        holder.appendChild(leftPart);
        holder.appendChild(bgPart)
        holder.appendChild(rightPart);
        holder.appendChild(clearDiv);
        
        var table = document.createElement('table');
        //table.align = "center";
        table.cellspacing = "0";
        table.cellpadding = "0"; 
        var row = document.createElement('tr'); 
        var column = document.createElement('td');
        var tbody = document.createElement('tbody'); 
        column.appendChild(holder);
        row.appendChild(column);
        tbody.appendChild(row)
        table.appendChild(tbody); 
        
        parent.insertBefore(table, buttonObject);
        buttonObject.className = ''; //clear class 
        buttonObject.style.border = 'none';
        buttonObject.style.background = 'none'; 
        bgPart.appendChild(buttonObject);
    }
}

/*Timer class uses for showing date in real-time*/

var DateTimeHandler = {
	
	init:function(holderId) {
		DateTimeHandler.holder = document.getElementById(holderId); 
		DateTimeHandler.showDateTime(); 
		setInterval(DateTimeHandler.showDateTime, 1000); 	
	}, 
	
	showDateTime:function() {
		
		var date = new Date(); 
 	
		if (weekDays != undefined) {
			var weekDay = weekDays[date.getDay()]; 
		}
		
		if (monthsName != undefined) {
			var month = monthsName[date.getMonth()];
		}  else {
			var month = date.getMonth();
			if (month < 10) {
				month = '0' + month; 
			}  
		}     
	 
	 	var dateText = ''; 
	 	if (weekDay != undefined) {
	 		dateText = dateText + weekDay; 
	 	}
	 	
	 	if (dateText == '') {
	 		dateText = date.getDate(); 
	 	} else {
	 		dateText = dateText + ', ' + date.getDate(); 
	 	}
	 	
	 	dateText = dateText + ' ' + month + ' ' + date.getFullYear(); 
	 	var hours = date.getHours();
	 	if (hours < 10) hours = '0' + hours; 
		var minutes = date.getMinutes(); 
		if (minutes < 10) minutes = '0' + minutes; 
		var seconds = date.getSeconds();
		if (seconds < 10) seconds = '0' + seconds; 
	 	//sseconds.substr(0,2); 
	 	
	 	dateText = dateText + '  ' + hours + ':' + minutes + ':' + seconds; 
	 	
	 	//week day, month day year, hh:mm:ss
	 	//alert(this.holderId);
		  
	 	DateTimeHandler.holder.innerHTML = dateText;
	}	
}


//Send bar 
var SendBar = {
    
    apply:function(holderId) {
        
        
        var holder = document.getElementById(holderId);
        var parent = holder.parentNode; 
        //Get max width 
        var barWidth = parent.offsetWidth - 20; 
        //var barWidth = parent.width;
        
        holder.style.width = barWidth + 'px'; 
        
        //checking for buttons 
        var buttons = holder.getElementsByTagName('input');
        var leftButton = null; 
        var rightButton = null;  
        if (buttons.length > 0) {
            for(i=0; i<buttons.length; i++) {
                if (buttons[i].className == 'sendBarLeftButton') {
                    leftButton = buttons[i];     
                }
                if (buttons[i].className == 'sendBarRightButton') {
                    rightButton = buttons[i]; 
                }
            }
        }
        
        var middlePartWidth = barWidth; 
        //Calculate width of the middle part
        //Processing left button  
        if (leftButton != null) {
            if (leftButton.onclick != '') {
                middlePartWidth = middlePartWidth - 400 - 50;
            } else {
                leftButton = null; 
                middlePartWidth = middlePartWidth - 5;        
            }
        } else {
            middlePartWidth = middlePartWidth - 5;
        }
        
        //Processing right button 
        if (rightButton != null) {
            if (rightButton.onclick != '') {
                middlePartWidth = middlePartWidth - 400 - 50;
            } else {
                rightButton = null; 
                middlePartWidth = middlePartWidth - 5;
            }
        } else {
            middlePartWidth = middlePartWidth - 5;
        } 
        
        //Prepare middle part 
        var tdMiddle = document.createElement('td'); 
        tdMiddle.className = 'sendBarBg';
        if (middlePartWidth < 0) middlePartWidth = 0;  
        tdMiddle.style.width = middlePartWidth + 'px'; 
        
        
        //Prepare main table 
        var table = document.createElement('table'); 
        table.width = "100%";
        table.cellPadding = "0"; 
        table.cellSpacing = "0";
        var tbody = document.createElement('tbody');
        var tr = document.createElement('tr');
        
        //Create left part
        var tdLeft = document.createElement('td');
        if (leftButton != null) {
            tdLeft.appendChild(SendBar.createButtonPart(leftButton, 'left')); 
        } else { 
            tdLeft.className = "sendBarLeft"; 
        }
         
        
        //Create right part 
        var tdRight = document.createElement('td'); 
        if (rightButton != null) {
            tdRight.appendChild(SendBar.createButtonPart(rightButton, 'right'));
        } else {
            tdRight.className = 'sendBarRight';  
        }
        
        //Asseble all together 
        tr.appendChild(tdLeft); 
        tr.appendChild(tdMiddle);
        tr.appendChild(tdRight);
        tbody.appendChild(tr); 
        table.appendChild(tbody); 
        holder.appendChild(table);
    },
    createButtonPart:function(button, direction) {
        var table = document.createElement('table'); 
        table.width = "100%";
        table.cellPadding = "0";
        table.cellSpacing = "0"; 
        table.onclick = button.onclick; 
        table.className = "sendBarButtonPart"; 
        
        var tbody = document.createElement('tbody'); 
        
        var tr = document.createElement('tr'); 
        
        //Create text holder 
        var tdTextHolder = document.createElement('td');
        tdTextHolder.className = 'sendBarTextGrayBg'; 
        tdTextHolder.style.width = "400px";
        tdTextHolder.innerHTML = button.value;
        button.value = ""; 
        
        //Create 
        var tdButtonHolder = document.createElement('td'); 
        tdButtonHolder.appendChild(button); 
        
        if (direction == 'left') {
            button.className = 'roundButtonLeft';
            tr.appendChild(tdButtonHolder);
            tdTextHolder.id = "leftText"; 
            tr.appendChild(tdTextHolder);      
        } else {
            button.className = 'roundButtonRight';
            tr.appendChild(tdTextHolder);
            tdTextHolder.id = "rightText";
            tr.appendChild(tdButtonHolder); 
        }
        tbody.appendChild(tr); 
        table.appendChild(tbody);
        
        return table; 
    }
}