//BASE = 'http://192.168.0.74:8000/';
BASE = 'http://85.233.166.94/';
//BASE = 'http://127.0.0.1:8000/'

$(document).ready(function(){
    populateManufacturersList();
    
    $('select[name="select"]').change(function() {
        var value = $('select[name="select"]').val();
        populateModelsList(value);
    });
    
    $('select[name="select2"]').change(function() {
        var value = $('select[name="select2"]').val();
        populateDataTable(value);
    });
    
    $('#data input[type="text"]').each(function(){
        var $textField = $(this);
        $(this).next('img').click(function(){search($textField);}).css({cursor: 'pointer'});
    });
});

function populateManufacturersList() {
    $.ajax({
        url: BASE + 'spares/manufacturers/?lang=' + lang,
        dataType: 'jsonp',
        success: function(data) {
            var html = '<option value="0">' + chooseTxt + '</option>';
            $.each(data, function(name, value) {
               html += '<option value="' + value + '">' + name  + '</option>';
            });
            $('select[name="select"]').html(html);
        }
    });
}

function populateModelsList(manNo) {
    if (manNo > 0) {
        $.ajax({
            url: BASE + 'spares/models/' + manNo + '/?lang=' + lang,
            dataType: 'jsonp',
            success: function(data) {
                var html = '<option value="0">' + chooseTxt + '</option>';
                $.each(data, function(name, value) {
                   html += '<option value="' + value + '">' + name  + '</option>';
                });
                $('select[name="select2"]').html(html);
            }
        });
    }
}

function populateDataTable(modNo) {
    if (modNo > 0) {
        $.ajax({
            url: BASE + 'spares/data/' + modNo + '/?lang=' + lang,
            dataType: 'jsonp',
            success: function(data) {
                var html = '<table id="data-table" style="width: 100%;">';
                html += dataHead;
                $.each(data, function(idx, value) {
                    html += '<tr><td><a href="#" onclick="detail(' + value['type_no'] + '); return false;">' + value['title'] +'</a></td>';
                    html += '<td>' + value['start'] + ' - ' + value['end'] + '</td>';
                    html += '<td>' + value['kw']  + '</td>';
                    html += '<td>' + value['hp']  + '</td>';
                    html += '<td>' + value['cc']  + '</td></tr>';
                });
                html += '</table>'
                $('#data').html(html);
            }
        });
    }
}

function detail(typeNo) {
    if (typeNo > 0) {
        $.ajax({
            url: BASE + 'spares/detail/' + typeNo + '/?lang=' + lang,
            dataType: 'jsonp',
            success: function(data) {
                // Sort the rows according to fitting position
                var frontAxle = processAxle(data.fa);
                var rearAxle = processAxle(data.ra);
                
                // Create the table
                var html = '<table id="data-table" style="width: 100%;">';
                html += frontAxleHead;
                html += detailHead;
                $.each(frontAxle, function(idx, row) {
                    html += row;
                });
                html += '<tr><td colspan="2"></td></tr>';
                html += rearAxleHead;
                html += detailHead;
                $.each(rearAxle, function(idx, row) {
                    html += row;
                });
                html += '</table><br/><br/><br/>';
                $('#data').html(html);
                
                var positionTooltip = function(event) {
                    var tPosX = event.pageX - 5;
                    var tPosY = event.pageY + 10;
                    $('div.tooltip').css({top: tPosY, left: tPosX});
                };
                var showTooltip = function(event) {
                    $('div.tooltip').remove();
                    var $thisInfo = $(this).find('div').html();
                    $('<div class="tooltip">' + $thisInfo + '</div>').appendTo('body');
                    $('div.tooltip').css({
                        position: 'absolute',
                        'z-index': '2',
                        background: '#ebebeb',
                        border: '1px solid #ccc',
                        padding: '3px'
                    });
                    positionTooltip(event);
                };
                var hideTooltip = function() {
                    $('div.tooltip').remove();
                };
                $('#data-table td.info').hover(showTooltip, hideTooltip).mousemove(positionTooltip);
            }
        });
    }
}

function search(textField) {
    var name = textField.attr('name');
    var value = textField.val();
    if (name == 'textfield') {
        detail(value);
    }
}

function processAxle(axleData) {
    var axle = [];
    
    $.each(axleData, function(idx, value) {
        var row = '<tr><td>' + value['art_no'] +'</td>';
        row += '<td class="info" style="cursor: default">' + value['title'];
        row += '<div style="display: none"><table>';
        var info = value['art_info'];
        $.each(info, function(nm, val) {
            row += '<tr><td>' + nm + ' : </td><td>' + val + '</td></tr>';
        });
        row += '</table></div></td>';
        axle.push(row);
    });
    return axle;
}