function ClientSideConvertor(domainId, destinationId, convertorTitle, scrollElementId) {

    /* constructor start */
    var currencyTable = null;
    var convertorTitle = convertorTitle;
    var scrollElement = document.getElementById(scrollElementId);;
    var convertorDiv = null;
        
    CurrencyConvertor.GetCurrencyTable(domainId, destinationId, function(response) {
        currencyTable = response.value;
    });

    /* constructor end */

    /* methods start */

    this.show = show;
    this.hide = hide;
    
    /* methods end */

    function show(e, amount, currencyId) {

        var event = e || window.event;
        var icon = event.target || event.srcElement;

        if (currencyTable == null)
            return;

        if (convertorDiv == null) {
            convertorDiv = document.createElement("div");
            convertorDiv.style.zIndex = 999;
            convertorDiv.style.position = "absolute";
            convertorDiv.className = "convertor";
            document.getElementsByTagName("body")[0].appendChild(convertorDiv);
        }
        else {
            convertorDiv.removeChild(convertorDiv.firstChild);
        }

        var table = createConvertorTable(convertorDiv, amount, currencyId);
        convertorDiv.appendChild(table);

        convertorDiv.style.display = "block";

        var pos = getPos(icon);

        if (scrollElement != null) {
            convertorDiv.style.left = (pos.x - scrollElement.scrollLeft - convertorDiv.offsetWidth - 1) + "px"
            convertorDiv.style.top = (pos.y - scrollElement.scrollTop + 1) + "px"
        }
        else {
            convertorDiv.style.left = (pos.x - convertorDiv.offsetWidth - 1) + "px"
            convertorDiv.style.top = (pos.y + 1) + "px"
        }
    }

    function hide() {

        if (convertorDiv != null)
            convertorDiv.style.display = "none";
    }

    function createConvertorTable(convertorDiv1, amount, currencyId) {

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");

        // creates <thead> element
        var tblHead = document.createElement("thead");

        // creates a table row
        var rowTh = document.createElement("tr");

        var cellTh = document.createElement("th");
        var cellThText = document.createTextNode(convertorTitle);
        cellTh.appendChild(cellThText);

        rowTh.appendChild(cellTh);

        tblHead.appendChild(rowTh);

        // put the <thead> in the <table>
        tbl.appendChild(tblHead);

        // creates <tbody> element
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (i = 0; i < currencyTable.Rows.length; i++) {
            // creates a table row
            var row = document.createElement("tr");

            var cell = document.createElement("td");
            var cellText = document.createTextNode(Math.round(amount / currencyTable.Rows[i].CurrencyValue) + ' ' + currencyTable.Rows[i].Name);
            cell.appendChild(cellText);
            row.appendChild(cell);

            if (currencyTable.Rows[i].CurrencyId == currencyId) {
                row.className = "currentcurrency";
            }

            if (currencyTable.Rows[i].CurrencyId == currencyId && i > 0) {
                // add the row to the top of the table body
                tblBody.insertBefore(row, tblBody.firstChild);
            }
            else {
                // add the row to the end of the table body
                tblBody.appendChild(row);
            }
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <div>

        convertorDiv.appendChild(tbl);

        return tbl;
    }

    function getPos(el) {

        // yay readability
        for (var lx = 0, ly = 0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);

        return { x: lx, y: ly };
    }
}