/*EXAMPLE OUTPUT of dyn_loader.php for the workertable

{"meta":{"header":{"uid":"ID","barcode":"Strichcode","name":"Name"},"count":"1001","display":10},"data":[{"uid":"50","barcode":"PS25HYM6","name":"TLWJZYSr5OqeN1W"},{"uid":"51","barcode":"xcOflSSI","name":"7Wt9PZiWW6zTrS1"},{"uid":"52","barcode":"nLoQeUhN","name":"MkB3TZXmTnrWErE"},{"uid":"53","barcode":"vtFGge18","name":"WgX5Kps8q0ZnbUw"},{"uid":"54","barcode":"pJsvjhvW","name":"HznhEOWtLJv18xX"},{"uid":"55","barcode":"TmWBwwbj","name":"UeXpwyvKj7wFKZg"},{"uid":"56","barcode":"1OMp8Yzb","name":"ScXkzW334bq4Iob"},{"uid":"57","barcode":"BmyUmk6H","name":"zt1aX9NnIbnWBVe"},{"uid":"58","barcode":"XNdk03p9","name":"azlF43mkNKj6Vnw"},{"uid":"59","barcode":"uy7RqiJE","name":"oeqJmWUtMxpHECD"}]}

*/

/*The purpose of this is to build or various website elements given a set of data */

//we assume we already got jquery right?

function revertEdit()
{
    //GOAL: Transform ALL edit rows back to their normal state, in theory there should be always only one, but who knows..

    $('.edit_row').each(function() {
        var set = $(this).children('td');
        var length = set.length;
        //$row.empty();
        $(this).removeClass();
        set.each(function (index) {
            if( index != (length - 1) )
            {
                $(this).html($(this).children().attr('value'));
                //var $cell = $('<td id="'+$(this).attr('id')+'">').$(this).attr('value');
                //$inputfield.append($('<input type="text" name="'+$(this).attr('id')+'" value="'+$(this).text()+'">'));
                //$row.append($cell);
            }
            else{
                $(this).empty();
                $(this).append($('<input type="button" uid="'+$(this).parent().attr('id')+'" id="editbutton" value="edit">'));
            }
         });
    });
}

$(document).ready(function(){
    //Cancels ALL active Edit fields (those should usually be exactly one)
    $(document).on('click', "#tablecancelbutton", function(){
        revertEdit();
    });
    //=======================================================================
    //CLOSE FIELD END
    //=======================================================================

    //changes the DOM of the given ROW to an edit field set.
    $(document).on('click', "#editbutton", function(){

    revertEdit();
    //temp vars
    var ele_id = $(this).parent().parent().attr("id");
    var type = $(this).parent().parent().parent().attr("id");
    var $row = $(this).parent().parent(); //tr>td>button
    //turns out, form cannot be the child of a table, i did in fact not knew that, fun times
    //var $form = $('<form action="dyn_putter.php" method="post">');

    var set = $row.children('td');
    var length = set.length;
    $row.empty();
    $row.attr('class', 'edit_row');
    set.each(function (index) {
        if( index != (length - 1) )
        {
            var $inputfield = $('<td id="'+$(this).attr('id')+'">');
            $inputfield.append($('<input type="text" name="'+$(this).attr('id')+'" value="'+$(this).text()+'">'));
            $row.append($inputfield);
        }
        else
        {
            var $inputfield = $('<td class="control">');
            $inputfield.append($('<input type="button" value="OK" id="tablepostbutton">'));
            $inputfield.append($('<input type="button" value="Cancel" id="tablecancelbutton">'));
            $row.append($inputfield);
        }
     });
    });
    //=======================================================================
    //EDIT FIELD END
    //=======================================================================

    //requests change
    $(document).on('click', "#tablepostbutton", function(){
        //i have two choices here, either i do the lazy way and just take all input fields
        //on the page or i do the slightly more sane way...yes i know, js files are public
        var dataset = {status: "test", information = "zero"};
        $.post("dyn_writer.php", dataset)
         .done(function(data) {
            console.log(data);
         });
    });
    //=======================================================================
    //POST END
    //=======================================================================
});

//turns out i could have done this as an onload event of the document,
//refactoring could be useful.
function buildDTable(type, element,lbound, queries)
{
    $('#'+element).html('<div align="center"><img src="pics\\loader_red.apng" width="64px" height="64px"></div>');
    var query = "dyn_loader.php?dataid=" + type + "&lbound="+lbound+"&queries="+queries;
    $.getJSON(query, function( data ) {

        $('#'+element).empty();
        var $table = $("<table class=\"dataset\" id=\""+type+"\">");

        var $trhead = $('<tr class=\"header\">');

        var header = data['meta']['header'];
        //the mixture of basic javascript and jquery is a bit annoying and probably not the best performance wise..but it works.
        //it would probably work with foreach() or Object.keys() but this is the solution i found first and i pray to fortuna that his never becomes a problem
        //console.log(data);
        $.each(header, function(index, entry)
        {
            $trhead.append($('<td>').text(entry));
        });

        //header gets attached
        $($table).append($trhead);

        data['data'].forEach(function(entry)
        {
            //edit variable for later use
            if (typeof entry['uid'] !== 'undefined') {
                var $tr= $('<tr id="'+entry['uid']+'">');
            } else { var $tr= $('<tr>');}

            for( var key in header)
            {
                $tr.append($('<td id="'+key+'">').text(entry[key]));
            }

            //if an identifier exist offer edit/delete buttons
            if (typeof entry['uid'] !== 'undefined') {
                $tr.append($('<td class="control">').append($('<input type="button" uid="'+entry['uid']+'" id="editbutton" value="edit">')));
            }

            $table.append($tr);
        });
        //in case there is more data than what is supposed to be displayed per page:
        //convert to number
        $('#'+element).append($table);

        //turns out i cannot do pagination pretty, that sucks
        var count =  parseInt(data['meta']['count']);
        var display = parseInt(data['meta']['display']);
        if( count > display )
        {
            console.log("Pagination needed");
            if( count > display *10)
            {
                //in case there is more data than 10 Pages

            }
            else
            {

            }
            var $pages = $('<tr class=\"pagination\">');

            for(var i = 0; i < 10; i++)
            {
                if( Math.round(lbound / display) == i){
                    $pages.append($('<td class="current">').text(i+1));
                }
                else{
                    $pages.append($('<td onClick="buildDTable(\'workertable\',\'workers\', '+display*(i)+', '+display+');">').text(i+1));
                }
            }
            $('#'+element).append($('<table>').append($pages));
            //==================================================================
            //TODO: Build function for Datasets bigger than 100
            //==================================================================
        }
    });

}