/* SETUP DATA */

var cgi_src = 'cgi-bin/_inventory.pl';
var pstyle = 'border: 1px solid #DFDFDF; border-radius: 3px';
var config = {
    layout: {
        name: 'layout',
        padding: 10,
        panels: [
            // NAV PANEL (UPPER LEFT)
            { type: 'main', size: "25%",resizable: true, style: pstyle,
                content: '<div id="navpanel"></div>'},
            // ASSY SELECTOR (LOWER LEFT)
            { type: 'preview', size: "75%",resizable: true, style: pstyle},
            // MAIN PANEL (RIGHT)
            { type: 'right', size: "75%", resizable: true, style: pstyle,
                content: '<div id="viewer"></div>',
                toolbar: {
                    name: 'toolbar',
                    style   : pstyle,
                    //right : 'text on the right',
                    items: [
                        { type: 'button',  id: 'tool-download', caption: 'Download', img: 'icon-page'},
                        { type: 'break' },
                        { type: 'radio',  id: 'tool-list',  group: '1', caption: 'List View', hint: 'Sorted by Reference Designator', checked: true },
                        { type: 'radio',  id: 'tool-kit',  group: '1', caption: 'Kit View', hint: 'Sorted by Part Number' },
                        { type: 'break' },
                        { type: 'button',  id: 'tool-recursive',  caption: 'Recursive Search', html: 'hello' },
                        { type: 'spacer' },
                        { type: 'button',  id: 'tool-print', caption: 'Print', img: 'icon-page'},
                    ],
                    onClick: function (event) {
                        //this.owner.content('toolbar', event);
                    }
                },
            },
        ]
    },

    assygrid: {
        name: 'assygrid',
        //style: 'margin:0px; width:75% ',
        columns: [
            { field: 'proj', caption: 'PROJ', size: '30%' },
            { field: 'assy', caption: 'ASSY', size: '30%' },
            { field: 'var', caption: 'VAR', size: '20%' },
            { field: 'rev', caption: 'REV', size: '20%' },
        ]
    },
    plform: {
        name: 'plform',
        fields: [
            { name: 'PROJ', type: 'text' },
            { name: 'ASSY', type: 'text' },
            { name: 'VAR', type: 'text' },
        ]
    },
    pltable: {
        name: "pltable",
        classField: "REF",
        cols:[
            { field: "REF DES", caption: "REF DES", width: "15%" },
            { field: "II P/N", caption: "PART NUM", width: "15%" },
            { field: "DESCRIPTION", caption: "DESCRIPTION", width: "40%" },
            { field: "MFR", caption: "MFR", width: "10%" },
            { field: "MFR P/N", caption: "MFR P/N", width: "20%" }]
    },
    assyinputs: {
        name: 'assyInputs',
        inputs: [
            { name:'assyProj', caption:'PROJ' },
            { name:'assyAssy', caption:'ASSY' },
            { name:'assyVar', caption:'VAR' } ]
    }
}




/* INITIAL SETUP */

$(function() {
    // SETUP PANELS - TOOLBAR INCLUDED (grid is not)
    $('#main').w2layout(config.layout);
    // ADD INPUTS TO NAV PANEL
    $('#navpanel').renderInputs(config.assyinputs)
    // ADD GRID TO ASSY PANEL
    w2ui.layout.content('preview', $().w2grid(config.assygrid));
});




/* EVENTS */

$(function() {

    /* ASSY SEARCH - update ASSYS grid (currently PAGE LOAD - fake search) */
        // add listener here
        $('body').addClass('wait');
        w2ui['assygrid'].reset();
        // fix next line to use inputs...
        $.getJSON(cgi_src,{action:'get_assys', proj:'', assy:'353', var:'01'}, function(result) {
            if(result.assys) {
                result.assys.forEach(function(element, index){ element.recid = index + 1; });
                w2ui['assygrid'].records = result.assys;
                w2ui['assygrid'].total = result.assys.length;
                w2ui['assygrid'].refresh();
            }
            $('body').removeClass('wait');
        });

    /* ASSY SELECT - pull parts list */
    w2ui['assygrid'].on('select', function(event) {
        event.onComplete = function () {
            this.scrollIntoView();
            if(this.getSelection().length == 1) {
                $('body').addClass('wait');
                var plid = this.get(this.getSelection()).partslist_id;
                $.getJSON(cgi_src,{action:'get_parts_list', plid:plid}, function(result) {
                    $('#viewer')
                        .empty()
                        .renderTable(config.pltable, result.partslist);
                    $('body').removeClass('wait');
                });
            }
        };
    });

});


/* FUNCTIONS */

// RENDER TABLE
$.fn.renderTable = function (config, data) {
    this.append($('<table>')
        .attr("id", config.name || config.caption)
        .append($('<tbody>')
            // append header row
            .append($('<tr>')
                .append($.map( config.cols, function(col) { return (
                    $("<th>")
                        .html(col.caption)
                        .css("width", col.width)
                )}))
            )
            // append data rows
            .append($.map( data, function(row) { return (
                $('<tr>')
                    .addClass("TBLfield-" + row[config.classField])
                    .append($.map(config.cols, function(col) { return (
                        $("<td>")
                            .html(row[col.field])
                    )}))
            )}))
        )
    );
    return this;
};

// RENDER INPUTS
$.fn.renderInputs = function (config) {
    this.append($('<div>')
        .attr ("id", config.name)
        .append($.map( config.inputs, function(input) { return (
            $("<span>")
                .append(
                    $("<label>")
                        .attr( 'for', input.name)
                        .html(input.caption)
                )
                .append(
                    $('<input>')
                        .attr( 'type', 'text')
                        .attr( 'name', input.name)
                        .attr( 'id', input.name)
                )
            )}))
    );
    return this;
};