function afterLoadDevice(data) {
    $.unblockUI();
    if (typeof data == 'object') {
        devices = data[ajaxReturnResultKey];
    } else if (typeof data != 'undefined' && data.indexOf(ajaxReturnResultKey) >= 0) {
        try {
             devices = eval("(" + data + ")")[ajaxReturnResultKey];
        } catch (e) {}
    } else {
        showErrorMessage(data);
    }
    if (devices && devices.length > 0) {
        for (var i = 0; i < devices.length; i++) {
            var h = "<tr id='" + i + "'>";
            h += "<td class='uncheck' style='padding-left:40px;width:120px'>" + devices[i].product + "</td>";
            h += "<td>" + devices[i].sn + "</td>";
            h += "<td>" + devices[i].rdate + "&nbsp;</td>";
            h += "<td>" + devices[i].desc + "&nbsp;</td>";
            h += "</tr>";
            $('#deviceList').find('tbody').append(h);
        }
        $('#deviceList').find('tbody').find('tr').each(function() {          //each(function(){...})  each: takes a function as argument
            $(this).hover(function() {
                $(this).addClass('rowHover');
                $(this).find('td:first').addClass('checked');
            }, function() {
                $(this).removeClass('rowHover');
                $(this).find('td:first').removeClass('checked');
            });
            $(this).click(function() {  // $(this) 即為該列<tr>..</tr>
                currentDevice = devices[$(this).attr('id')];
                currentMap = null;
                //
                $('#sdContent').html('');
                var i = (currentDevice.img ? currentDevice.img : defaultGPSIconURL);
                var h = "<td class='aln-c' style='width:100px;'><img src='" + i + "' width='50'/></td>";
                h += "<td style='vertical-align:middle;'>" + currentDevice.product + "</td>";
                h += "<td style='vertical-align:middle;'>" + currentDevice.sn + "</td>";
                h += "<td style='vertical-align:middle;'>" + currentDevice.rdate + "&nbsp;</td>";
                h += "<td style='vertical-align:middle;'>" + currentDevice.desc + "&nbsp;</td>";
                h += "<td class='aln-r' style='vertical-align:middle;'><input class='button' type='button' value='" + strCDevice + "' onclick='toStep(1);'/></td>";
                $('#sdContent').html(h);
                //
                $('#mapList').find('tbody').html('');
                for (var i = 0; i < currentDevice.maps.length; i++) {
                    var h = "<tr id='" + currentDevice.maps[i].gpn + "'>";
                    for (var m = 0; m < maps.length; m++) {
                        if (maps[m].gpn == currentDevice.maps[i].gpn) {
                            h += "<td style='vertical-align: middle;padding-left:40px;' class='uncheck'>" + maps[m].name + "</td>";
                            break;
                        }
                    }
                    h += "</tr>";
                    $('#mapList').find('tbody').append(h);
                }
                $('#mapList').find('tbody').find('tr').each(function() {
                    $(this).hover(function() {
                        $(this).addClass('rowHover');
                        $(this).find('td:first').addClass('checked');
                    }, function() {
                        $(this).removeClass('rowHover');
                        $(this).find('td:first').removeClass('checked');
                    });
                    $(this).click(function() {
                        for (var m = 0; m < maps.length; m++) {
                            if (maps[m].gpn == $(this).attr('id')) {
                                currentMap = maps[m];
                                $.blockUI(spinning);
                                $.post(mapSubscribeUrl, {product:currentMap.gpn, device:currentDevice.sn, user:userId}, afterChooseMap);
                                break;
                            }
                        }
                    });
                });
                toStep(2);
            });
        });
    } else {
        $('#deviceList').hide();
        $('#noApplicable').fadeIn('slow');
    }
}

function afterChooseMap(data) {
    $.unblockUI();
    var result;
    if (typeof data == 'object') {
        result = data[ajaxReturnResultKey];
    } else if (typeof data != 'undefined' && data.indexOf(ajaxReturnResultKey) >= 0) {
        result = eval("(" + data + ")")[ajaxReturnResultKey];
    } else {
        showErrorMessage(data);
    }
    if (result) {
        $('#smContent').html('');
        var h = "<td class='aln-c' style='width:100px;'><img src='" + currentMap.img + "' width='50'/></td>";
        h += "<td style='vertical-align:middle;'>" + currentMap.name + "</td>";
        h += "<td class='aln-r' style='vertical-align:middle;'><input class='button' type='button' value='" + strCMap + "' onclick='toStep(2);'/></td>";
        $('#smContent').html(h);
        //
        $('#fileSize').html(result['fileSize'] + " MB  (" + result['actualFileSize'] + " Bytes)");
        $('#ucode').html(result['code']);
        //
        currentLink = result['link'];
        $('#mapHelpContent').html(result['help']);
        //
        toStep(3);
    }
}

function toStep(index) {
    switch (index) {
        case 1:
            $('#step1').fadeIn('slow');
            $('#step2').hide();
            $('#step3').hide();
            $('#sd').hide();
            $('#sm').hide();
            break;
        case 2:
            $('#step2').fadeIn('slow');
            $('#step1').hide();
            $('#step3').hide();
            $('#sd').fadeIn('slow');
            $('#sm').hide();
            break;
        case 3:
            $('#step3').fadeIn('slow');
            $('#step1').hide();
            $('#step2').hide();
            $('#sd').fadeIn();
            $('#sm').fadeIn();
            $('#mapHelp').fadeIn('slow');
            break;
    }
}

function openURL() {
    window.location.href = currentLink;
}