//Шаблон комментария    

    ///<description></description>
    ///<params
    ///  <param name=""></param>
    ///  <param name=""></param>
    ///</params>
    ///<return></return>

///<description>Конструктор контрола</description>
///<params>
///  <param name="conteiner">ИД контейнера куда будут добавляться контролы.</param>
///  <param name="data">Данные которые необходимо отобразить в формате "ИД:значение;ИД:значение"</param>
///  <param name="contentType">Тип контента - строка учавствует в формировании имени контрола.</param>
///  <param name="selected">Значение которое выбрано по умолчанию.</param>
///  <param name="clickHandler">Делегат на функцию которая обрабатывает клик на элементе. Прототип function(указатель на DIAgeExpirience, ид, текст)</param>
///  <param name="selectedCss">CSS стиль для выбранного элемента.</param>
///  <param name="unselectedCss">CSS стиль для невыбранного элемента.</param>
///</params>
DIAgeExpirience = function(conteiner, data, contentType, selected, clickHandler, selectedCss, unselectedCss, separator) {

    this._conteiner = document.getElementById(conteiner);
    this._value = null;
    this._currentSelected = null;
    this._clickHandler = null;
    if (clickHandler) {
        this._clickHandler = [clickHandler];
    }
    this._selectedCss = selectedCss;
    this._unselectedCss = unselectedCss;
    this._accordion = null;
    this._name = contentType;

    this._separator = ";";
    if (separator) this._separator = separator;
    this._div = this.create(contentType, selected, data);
    this._tableId = null;
    this._isRequired = false;

    this._multiDrvAge = 18;
    this._multiDrvExp = 0;

    this._clava = null;
}

DIAgeExpirience.prototype = {
    ///<description>Создание котрола</description>
    ///<params
    ///  <param name="contentType">Тип контента</param>
    ///  <param name="selected">Выбранный по умолчанию элемент</param>
    ///  <param name="data">Данные, которые надо отобразить</param>
    ///</params>
    ///<return>Div контрола</return>
    _controlFocus: 0,
    create: function(contentType, selected, data) {
        //Создаем контейнер в котором будет список значений
        var number = DIRadioGroupControllerInstance._count.toString();
        DIRadioGroupControllerInstance._count++;

        var idname = 'inp_' + contentType + '_number_' + number;

        var cont = document.createElement('div');
        cont._controller = this;

        ////
        var tbl = document.createElement('table');
        tbl.className = "TableControl";
        //tbl.setAttribute('border', 1);
        //tbl.setAttribute('width', 200);
        tbl.onmouseout = this.onLostClavaFocus;
        tbl.onmousemove = this.onGetClavaFocus;
        tbl._controller = this;

        var row = tbl.insertRow(0);
        var cell0 = row.insertCell(0);
        cell0.width = "40px";

        ////
        var div = document.createElement('input');
        div.id = idname;
        div.className = "ageInput";
        div.name = div.id;
        div.onkeypress = this.checkinput;
        div.onchange = this.onValueChange;
        div.onfocus = this.onInputFocus;
        div.onclick = this.onInputFocus;
        div.onblur = this.onLostFocus;
        div._controller = this;

        cell0.appendChild(div);

        var cell1 = row.insertCell(1);
        cell1.width = "100px";

        ///
        var divv = document.createElement('div');
        divv.id = "clava_" + idname;
        divv.style.display = "none";
        divv.style.width = 0;

        var icont = '<div id=\'clava_' + idname + '\' class="keyboardBlock">'
            + '<table class="keyboardTab">'
            + '<tr>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',1)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',2)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',3)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',4)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',5)">&nbsp;</a></td>'
            + '</tr>'
            + '<tr>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',6)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',7)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',8)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',9)">&nbsp;</a></td>'
            + '<td><a href="javascript:addSign(\'' + idname + '\',0)">&nbsp;</a></td>'
            + '</tr>'
            + '</table>'
            + '</div>';
        divv.innerHTML = icont;
        cell1.appendChild(divv);

        ///
        cont.appendChild(tbl);
        this._conteiner.appendChild(cont);
        this._value = div;

        return cont.firstChild;
    },

    onInputFocus: function() {
        this._controller.GetInputFocus(this);
    },

    GetInputFocus: function(val) {
        var idname = "clava_" + val.name;

        if (controlLostFoocus != idname && controlLostFoocus != "") {
            var old = document.getElementById(controlLostFoocus);
            if (old != null) {
                old.style.display = "none";
                old.style.width = "100px";
                controlLostFoocus = "";
            }
            //this.SetUnvisibleClava(controlLostFoocus);
        }

        controlSetFoocus = idname;
        this.SetVisibleClava(idname);
    },

    onLostFocus: function() {
        this._controller.GetLostFocus(this);
    },


    GetLostFocus: function(val) {
        var idname = "clava_" + val.name;

        this.SetUnvisibleClava(idname);
    },

    onGetClavaFocus: function() {
        if (controlSetFoocus == "")
            return;

        this._controller.GetClavaFocus(this);
    },

    GetClavaFocus: function(val) {
        // Отключаем уже открытые контролы
        var idname = "clava_" + val.childNodes[0].childNodes[0].childNodes[0].childNodes[0].id;

        // Запрещаем открытие до фокуса на контроле
        if (controlSetFoocus == idname) {
            controlLostFoocus = "";

            this.SetVisibleClava(idname);
        }
    },

    onLostClavaFocus: function() {
        if (controlSetFoocus == "")
            return;

        this._controller.LostClavaFocus(this);
    },

    LostClavaFocus: function(val) {
        var idname = "clava_" + val.childNodes[0].childNodes[0].childNodes[0].childNodes[0].id;
        this.SetUnvisibleClava(idname);
        this.changeValue(val);
    },


    SetVisibleClava: function(name) {
        if (clavaShowing != "")
            return;
            
        var divv = document.getElementById(name);

        if (divv != null && divv.offsetWidth < 100) {
            divv.style.display = "block";
            divv.style.overflow = 'hidden';
            divv.style.width = "0px";
            showdiv(name, 0);
        }
    },

    SetUnvisibleClava: function(name) {
        controlLostFoocus = name;

        var divv = document.getElementById(name);
        if (divv != null
        // && contname != controlSetFoocus
                && controlSetFoocus != "") {
            setTimeout(function() { hidediv(name); }, 4000);
        }
    },

    onValueChange: function() {
        this._controller.changeValue(this);
    },

    changeValue: function(val) {
        //val._controller._value.value = val.value;
		if (this._accordion != null)
            this._accordion.stateChangedNotify(this);
    },

    setCssClass: function(cssClass) {
        this._div.className = cssClass;
    },

    checkinput: function(evt) {
        if (!evt) evt = event;
        
        var charCode;
        if (typeof(evt.which) != 'undefined'){
			charCode = evt.which;
		}
		else{
			charCode = evt.keyCode;
		}        
	
		if (charCode > 31 && (charCode < 48 || charCode > 57) || charCode == 46) {            
            alert("В это поле можно вводить только цифры");
            return false;
        }

        if (charCode != 0 && charCode != 8 && evt.srcElement.value.length >= 2)
            return false;

        return true;
    },

    ///<description>Создать наполнение контрола</description>
    ///<params
    ///  <param name="data">Данные</param>
    ///  <param name="div">Контрол в который будет добавено наполнение</param>
    ///  <param name="selected">Выбранное по умолчанию значение</param>
    ///</params>
    ///<return>Span, который надо выделить.</return>
    build: function(data, div, selected) {
        var selectedSpan = null;
        if (data == '') {
            return selectedSpan;
        }
        var mas = data.split(this._separator);
        var i = 0;
        //наполняем список значений
        for (i = 0; i < mas.length; i++) {
            var radio = document.createElement('li');
            var values = null;
            if (mas[i].indexOf(':') != -1) {
                values = mas[i].split(':');
            }
            else {
                values = new Array();
                values[0] = mas[i];
                values[1] = mas[i];
            }
            var a = document.createElement('a');
            a.innerHTML = values[1];
            //a.href = '#';
            a.style.cursor = 'pointer';
            a.setAttribute('value', values[0]);
            a.onclick = this.onSpanClick;
            a._controller = this;
            a.className = this._unselectedCss;
            radio.appendChild(a);
            div.appendChild(radio);
            if (selected != null && selected != 'undefined' && selected == values[0]) {
                selectedSpan = a;
            }
        }
        return selectedSpan;
    },

    ///<description>Перестраивает наполнение контрола</description>
    ///<params
    ///  <param name="newData">Новые значения</param>
    ///  <param name="selected">Выбраное по умолчанию значение</param>
    ///</params>
    rebuild: function(newData, selected) {
        this._value.value = null;
        this._currentSelected = null;
        var arr = new Array();
        var i = 0;
        for (i = 0; i < this._div.childNodes.length; i++) arr[i] = this._div.childNodes[i];
        for (i = 0; i < arr.length; i++) {
            if (arr[i].tagName != 'INPUT') this._div.removeChild(arr[i]);
        }
        var selectedSpan = this.build(newData, this._div, selected);
        if (selectedSpan != null) this.selectSpan(selectedSpan);
    },

    ///<description>Обработка клика на span</description>
    onSpanClick: function() {
        this._controller.selectSpan(this);
    },

    ///<description>Выделение span-a и запоминание его значения</description>
    ///<params
    ///  <param name="span">Span который надо выделить</param>
    ///</params>
    selectSpan: function(span) {
        if (span._controller._currentSelected != null) {
            span._controller._currentSelected.className = this._unselectedCss;
        }
        span._controller._currentSelected = span;
        span._controller._currentSelected.className = this._selectedCss;
        span._controller._value.value = span._controller._currentSelected.getAttribute('value');
        if (span._controller._clickHandler != null && span._controller._clickHandler != undefined && span._controller._clickHandler.length > 0) {
            var value = span._controller._value.value;
            var text = span._controller._currentSelected.innerHTML;
            for (var j = 0; j < span._controller._clickHandler.length; j++) {
                span._controller._clickHandler[j](span._controller, value, text, this._tableId);
            }
            //span._controller._clickHandler(span._controller, value, text, this._tableId);
        }
        if (this._accordion != null) this._accordion.stateChangedNotify();
    },

    ///<description>Выделяет элемент по ИД</description>
    ///<params
    ///  <param name="value">Ид элемента</param>
    ///</params>
    select: function(value) {
        for (var i = 0; i < this._div.childNodes.length; i++) {
            if (this._div.childNodes[i].tagName != 'INPUT') {
                var span = this._div.childNodes[i].childNodes[0];
                if (value == span.innerHTML) {
                    this.selectSpan(span);
                    break;
                }
            }
        }
    },

    selectByID: function(id) {
        for (var i = 0; i < this._div.childNodes.length; i++) {
            if (this._div.childNodes[i].tagName != 'INPUT') {
                var span = this._div.childNodes[i].childNodes[0];
                if (id == span.getAttribute('value')) {
                    this.selectSpan(span);
                    break;
                }
            }
        }
    },

    selectByIndex: function(index) {
        if (index != 0)
            return;

        if (this._name == "driver_0_age") {
            this._div.childNodes[0].value = this._multiDrvAge;
            this._value.value = this._multiDrvAge;
        }
        if (this._name == "driver_0_exp") {
            this._div.childNodes[0].value = this._multiDrvExp;
            this._value.value = this._multiDrvExp;
        }
    },

    selectValueInRange: function(id, isMinValue) {
        //this._div.childNodes[0].value = id;
        this._value.value = id;
    },

    ///<description>Указать класс для выбранного элемента</description>
    ///<params
    ///  <param name="cssClass">Имя класса</param>
    ///</params>
    setSelectedCss: function(cssClass) {
        this._selectedCss = cssClass;
    },

    ///<description>Указать класс для невыбранного элемента</description>
    ///<params
    ///  <param name="cssClass">Имя класса</param>
    ///</params>
    setUnselectedCss: function(cssClass) {
        this._unselectedCss = cssClass;
    },

    setAccordion: function(value) {
        this._accordion = value;
    },

    setClickHandler: function(handler) {
        if (this._clickHandler == null) {
            this._clickHandler = [handler];
        }
        else {
            this._clickHandler.push(handler);
        }
    },

    setChildTableId: function(tableId) {
        this._tableId = tableId;
    },

    getValue: function() {
        return this._value.value;
    },

    getNameValue: function() {
        return this._name + '=' + this._value.value + paramsSeparator;
    },
    
    getName: function() {
		return this._name;
	},

    setIsRequired: function(value) {
        this._isRequired = value;
    },

    isRequired: function() {
        return this._isRequired;
    },

    isFilled: function() {
        return this._value.value != "";
    },

    restoreState: function(state) {
        return null;
    }
}

//Класс хранящий настройки
DIRadioGroupController = function() {
    //Количество контролов на форме
    this._count = 0;
}

//Объект с настройками.
DIRadioGroupControllerInstance = new DIRadioGroupController();

//Для динамического назрачения обработчиков событий
if (navigator.userAgent.toLowerCase().indexOf('gecko') != -1) {
    window.attachEvent = function(eventName, delegate) {
        this.addEventListener(eventName.substring(2), delegate, false);
    },

    window.detachEvent = function(eventName, delegate) {
        this.removeEventListener(eventName.substring(2), delegate, false);
    },

    window.document.attachEvent = function(eventName, delegate) {
        this.addEventListener(eventName.substring(2), delegate, false);
    },

    window.document.detachEvent = function(eventName, delegate) {
        this.removeEventListener(eventName.substring(2), delegate, false);
    },

    HTMLElement.prototype.attachEvent = function(eventName, delegate) {
        this.addEventListener(eventName.substring(2), delegate, false);
    },

    HTMLElement.prototype.detachEvent = function(eventName, delegate) {
        this.removeEventListener(eventName.substring(2), delegate, false);
    },

    HTMLElement.prototype.fireEvent = function(eventName, eventInstance) {
        var events = this.ownerDocument.createEvent("events");
        events.initEvent(eventName.substring(2), false, true);
        this.dispatchEvent(ev);
    },

    Event.prototype.__defineGetter__("srcElement", function () {
        var node = this.target;
        while (node.nodeType != 1) node = node.parentNode;
        return node;
    })
}

var controlSetFoocus = "";
var controlLostFoocus = "";
var clavaShowing = "";

function showdiv(val, len) {
    if (controlSetFoocus != val && clavaShowing != "")
        return;

    clavaShowing = val;
    var a = document.getElementById(val);
    if (len < 100) {
        len = len + 10;
        a.style.width = (len) + 'px';
        setTimeout(function() { showdiv(val, len) }, 50);
    }
    else {
        a.style.display = "block";
        a.style.width = "100px";
        clavaShowing = "";
    }
}

function hidediv(val) {
    if (controlLostFoocus != val)
        return;
    
    var a = document.getElementById(val);
    if (a.offsetWidth > 1) {
        a.style.width = (a.offsetWidth - 2) + 'px';
        //a.style.margin-left = '-2px';
        setTimeout(function() { hidediv(val) }, 5);
    }
    else {
        a.style.display = "none";
        a.style.width = "100px";
        controlSetFoocus = "";
        controlLostFoocus = "";
    }
}

function addSign(cont, val) {
    var v = $get(cont);
    //var cp = getCursorPos(v);

    if (v.value.length >= 2) {
        //var two_char = v.value.charAt(1);
        //v.value = two_char + val;
        v.value = val;   
        return;
    }

    v.value += val;
}

function getCursorPos(textElement) {
    //save off the current value to restore it later,
    var sOldText = textElement.value;

    //create a range object and save off it's text
    var objRange = document.selection.createRange();
    var sOldRange = objRange.text;

    //set this string to a small string that will not normally be encountered
    var sWeirdString = '#%~';

    //insert the weirdstring where the cursor is at
    objRange.text = sOldRange + sWeirdString; objRange.moveStart('character', (0 - sOldRange.length - sWeirdString.length));

    //save off the new string with the weirdstring in it
    var sNewText = textElement.value;

    //set the actual text value back to how it was
    objRange.text = sOldRange;

    //look through the new string we saved off and find the location of
    //the weirdstring that was inserted and return that value
    for (i = 0; i <= sNewText.length; i++) {
        var sTemp = sNewText.substring(i, i + sWeirdString.length);
        if (sTemp == sWeirdString) {
            var cursorPos = (i - sOldRange.length);
            return cursorPos;
        }
    }
}