if(!javaxt) var javaxt={};

if(!javaxt.dhtml) javaxt.dhtml={};

//******************************************************************************

//** Checkbox Class

//******************************************************************************

/**

* Form input that can be either checked or unchecked. The input consists of

* a square box with a checkmark when selected.

* <br/>

* Here's a simple example of how to instantiate a checkbox using an existing

* div (DOM element) and a minimal config. See config settings for a full

* range of options.

<pre>

var checkbox = new javaxt.dhtml.Checkbox(div, {

label: "I Agree",

checked: false

});

</pre>

* Once the checkbox is instantiated you can call any of the public methods.

* You can also add event listeners by overriding any of the public "on" or

* "before" methods like this:

<pre>

checkbox.onClick = function(checked){

console.log("I Agree", checked);

};

</pre>

*

******************************************************************************/

javaxt.dhtml.Checkbox = function(parent, config) {

this.className = "javaxt.dhtml.Checkbox";

var me = this;

var box, check, mask, label;

var defaultConfig = {

/** Label for the checkbox (optional). Accepts either a string or a DOM

* element.

*/

label: null,

/** Value associated with the checkbox (optional). Note that this is

* different than the checkbox state. Use the isChecked() method to

* determine whether the checkbox is checked.

*/

value: null,

/** If true, the checkbox will initially render with a check. Default is

* false.

*/

checked: false,

/** If true, the component will be disabled when rendered. Default is

* false.

*/

disabled: false,

/** Style for individual elements within the component. Note that you can

* provide CSS class names instead of individual style definitions.

*/

style:{

panel: {

display: "inline-block"

},

/** Style for the checkbox

*/

box: {

width: "13px",

height: "13px",

border: "1px solid #ccc",

borderRadius: "3px",

backgroundColor: "#F6F6F6",

cursor: "pointer",

margin: "0px",

color: "#2b2b2b"

},

/** Style for the label next to the checkbox

*/

label: {

fontFamily: "helvetica,arial,verdana,sans-serif",

fontSize: "14px",

whiteSpace: "nowrap",

cursor: "pointer",

padding: "1px 0 0 5px"

},

/** Style for the checkmark inside the checkbox

*/

check: {

content: "",

display: "block",

width: "3px",

height: "6px",

border: "solid #fff",

borderWidth: "0 2px 2px 0",

transform: "rotate(45deg)",

margin: "1px 0 0 4px"

},

/** Style for the checkbox when it is selected/checked

*/

select: {

backgroundColor: "#007FFF",

border: "1px solid #003EFF",

color: "#fff"

},

/** Style for the mask used to disable the checkbox

*/

disable: {

cursor: "default"

},

/** Style for the checkbox when mouse hovers over

*/

hover: {

backgroundColor: "#ededed"

}

}

};

//**************************************************************************

//** Constructor

//**************************************************************************

var init = function(){

if (typeof parent === "string"){

parent = document.getElementById(parent);

}

if (!parent) return;

//Clone the config so we don't modify the original config object

var clone = {};

merge(clone, config);

//Merge clone with default config

merge(clone, defaultConfig);

config = clone;

//Create container

me.el = createElement("span", parent, "javaxt-checkbox");

addShowHide(me);

var innerDiv = createElement('div', me.el, config.style.panel);

innerDiv.style.position = "relative";

if (config.display){

console.warn(

"The 'display' config in the javaxt.dhtml.Checkbox " +

"class has been deprecated. Use panel style instead");

innerDiv.style.display = config.display;

}

//Create checkbox

if (config.label){

//Create table with 2 columns - one for the checkbox

//and a column for the checkbox label.

var table = createTable(innerDiv);

table.style.fontFamily = "inherit";

table.style.textAlign = "inherit";

table.style.color = "inherit";

table.style.width = "";

table.style.height = "";

var tr = table.addRow();

box = createElement('div', tr.addColumn(), config.style.box);

label = createElement("div", tr.addColumn(), config.style.label);

if (isElement(config.label)){

label.appendChild(config.label);

}

else{

label.innerHTML = config.label;

}

addEventHandlers(table);

}

else{

//Create checkbox with no label

box = createElement('div', innerDiv, config.style.box);

addEventHandlers(box);

}

//Set button state

if (config.disabled===true) me.disable();

if (config.checked===true) me.select();

};

//**************************************************************************

//** addEventHandlers

//**************************************************************************

var addEventHandlers = function(div){

//Disable text selection

div.unselectable="on";

div.onselectstart=function(){return false;};

div.onmousedown=function(){

addStyle(box, "select");

return false;

};

//Create onclick function

var onclick = function(){

if (config.sound!=null) config.sound.play();

me.toggle();

me.onClick(box.checked);

};

//Create logic to process touch events

var touchStartTime;

var touchEndTime;

var x1, x2, y1, y2;

var isTouch = false;

div.ontouchstart = function(e) {

isTouch = true;

e.preventDefault();

x1 = e.changedTouches[0].pageX;

y1 = e.changedTouches[0].pageY;

touchStartTime = new Date().getTime();

touchEndTime = null;

if (box.checked!==true){

addStyle(box, "hover");

}

};

div.ontouchend = function(e) {

touchEndTime= new Date().getTime();

x2 = e.changedTouches[0].pageX;

y2 = e.changedTouches[0].pageY;

var distance = Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 );

if (distance<0) distance = -distance;

var duration = touchEndTime - touchStartTime;

if ((duration <= 500 && distance <= 10) || //Quick tap

(duration > 500 && distance <= 10)) { //Long press

onclick();

}

};

//Logic to process mouse events

div.onclick = function(){

if (!isTouch) onclick();

};

div.onmouseover = function(){

if (box.checked!==true){

addStyle(box, "hover");

}

};

div.onmouseout = function(){

if (box.checked!==true){

setStyle(box, "box");

}

};

};

//**************************************************************************

//** onClick

//**************************************************************************

/** Called whenever the checkbox is clicked.

*/

this.onClick = function(checked){};

//**************************************************************************

//** onChange

//**************************************************************************

/** Called whenever the checkbox value is changed.

*/

this.onChange = function(checked){};

//**************************************************************************

//** enable

//**************************************************************************

/** Used to enable the checkbox.

*/

this.enable = function(){

mask.style.visibility = "hidden";

box.style.opacity = "";

label.style.opacity = "";

};

//**************************************************************************

//** disable

//**************************************************************************

/** Used to disable the checkbox.

*/

this.disable = function(){

if (mask){

mask.style.visibility = "visible";

}

else{

mask = createElement('div', config.style.disable);

mask.style.position = "absolute";

mask.style.zIndex = "1";

mask.style.width = "100%";

mask.style.height = "100%";

var innerDiv = me.el.firstChild;

innerDiv.insertBefore(mask, innerDiv.firstChild);

}

box.style.opacity = "0.5";

label.style.opacity = "0.5";

};

//**************************************************************************

//** select

//**************************************************************************

/** Used to add a check to the checkbox.

*/

this.select = function(silent){

if (box.checked===true) return;

box.checked = true;

addStyle(box,"select");

if (check){

check.style.visibility = "visible";

}

else{

check = createElement('div', box, config.style.check);

}

if (silent===true) return;

me.onChange(true);

};

//**************************************************************************

//** deselect

//**************************************************************************

/** Used to remove the check from the checkbox.

*/

this.deselect = function(silent){

if (box.checked===true){

box.checked = false;

setStyle(box,"box");

check.style.visibility = "hidden";

if (silent===true) return;

me.onChange(false);

}

};

//**************************************************************************

//** toggle

//**************************************************************************

/** Used to toggle the checkbox state.

*/

this.toggle = function(){

if (box.checked===true){

me.deselect();

}

else{

me.select();

}

};

//**************************************************************************

//** getValue

//**************************************************************************

/** Returns the value associated with the checkbox. Note that this is

* different than the checkbox state. Use the isChecked() method to

* determine whether the checkbox is checked. The value is defined in

* the config used to instantiate this class.

*/

this.getValue = function(){

if (config.value==null) return me.isChecked();

return config.value;

};

//**************************************************************************

//** isChecked

//**************************************************************************

/** Returns true if the checkbox is checked.

*/

this.isChecked = function(){

return box.checked===true;

};

//**************************************************************************

//** Utils

//**************************************************************************

var createElement = javaxt.dhtml.utils.createElement;

var createTable = javaxt.dhtml.utils.createTable;

var addShowHide = javaxt.dhtml.utils.addShowHide;

var isElement = javaxt.dhtml.utils.isElement;

var merge = javaxt.dhtml.utils.merge;

var setStyle = function(el, style){

javaxt.dhtml.utils.setStyle(el, config.style[style]);

};

var addStyle = function(el, style){

javaxt.dhtml.utils.addStyle(el, config.style[style]);

};

init();

};