Page History

<table id="magics">
	
</table>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	var show = function(val, def)
{   
    console.log("show" + val) 
    console.log(def.name) 
    if ( def[val] == undefined)  return;
    last = "#"+def.name;
    $.each(def[val], function(i, param) {
        console.log("add" + param.name) 
        id = "#"+param.name
        if ( $(id).length ) {
            $(id).show();
        }
        else {
            var $param = $('<tr>').attr('id', param.name);
             $param.insertAfter(last);
             last = id;
                $param.append($('<td>').text(param.name),
                $('<td>').text(param.documentation));
       
        $param.append(factory[param.type](param));
        $param.append($('<td>').text(param.default));
        }
        
   });
  
}
var hide = function(val, def)
{   
   
   if ( def[val] == undefined)  return; 
   $.each(def[val], function(i, param) {
    
    var id = "#"+param.name;
    $(id).hide();
   });
}
var click = function(event)
{
   var value = event.handleObj.data.value
   var def = event.handleObj.data.def
   
   
   $.each(def["values"], function(i, val) {
     if ( val == value ) 
        show(val, def);
    else 
        hide(val, def);
   });
   
 
   
  
}
var toggle = function(def) 
{
    $option = $('<td>').attr({'id': def.name});
    
    $.each(def.values, function(i, value) { 
        
        var id = def.name + "_" + value;
        
        var $toggle = $('<input>').attr({'id': id,
               'type': "radio", 
                'name': def.name,
                'checked' : (value == def.default),
                'value': def.value}).click({ value: value, def : def}, click); 
        var $label = $('<label>').attr({'for': value,
               }).text(value);
        
        $option.append($toggle);
        $option.append($label);    
                       
    });
   
    return $option;
}
var colour = function(def) 
{
    
    var id = def.name;
    $option = $('<td>').attr({'id': def.name}).text("colour");   
    return $option;
}
var style = function(def) 
{
    
    var id = def.name;
    $option = $('<td>').attr({'id': def.name}).text("solid/dash");   
    return $option;
}
var any = function(def) 
{
    var id = def.name;
    $option = $('<td>').attr({'id': def.name}).text("any");   
    return $option;
}
 var factory = {
        "toggle" : toggle,
        "Colour" : colour,
        "LineStyle" : style,
        "bool" : toggle,
        "float" : any,
        "int" : any,
        "string" : any,
        "stringarray" : any
    };
var $action;    

var json = 

$.getJSON("file:///tmp/cgs/perforce/dev/magics/tools/coast.json",
  function(data) {
   
    
     $.each(data.magics, function(i, action) {
        
        $action = $('<table>').attr('id', "contour_action");
        $("#magics").append($action);
        var $param = $('<tr>').attr('id', "contour_title");
        $param.append($('<th>').attr({'width':150}).text(action.action));
        $param.append($('<th>').attr({'width':350}).text(""));
        $param.append($('<th>').attr({'width':200}).text(""));
        $param.append($('<th>').attr({'width':100}).text("default"));
        
        $action.append($param);
        $param = $('<tr>').attr('id', "contour_title");
        $param.append($('<td>').attr({'colspan':4}).text(action.documentation));
        $action.append($param);
       
         $.each(action.parameters, function(i, param) {
            
            console.info(param.name)
            var $param = $('<tr>').attr('id', param.name);
            $action.append($param);
            $param.append($('<td>').text(param.name),
                $('<td>').text(param.documentation));
            
            var creator = factory[param.type]
          
            $param.append(creator(param));
           
            $param.append($('<td>').text(param.default));
            
             show(param.default, param);            
       
         });
     return false; });
  return false;});


</script>