function log(log_message)
{
    $('debugger').value=log_message+"\n"+$('debugger').value;
}


// palette_data_update - a custom call back (i.e. send something to the database or update a hidden field)
function palette_data_update(selected_option){
    a = selected_option.id.split(/_/);
    // a[0] == base (i.e. alignment)
    // a[1] == line number
    // a[2] == 'options'
    // a[3] == db id
    // update the hidden layer for this information
    
    // try and get the hidden field e.g. lines_[line_number]_[base]
    hid = 'lines_'+a[1]+'_'+a[0];
    f = $(hid);    
    if (f != null)
    {
        f.value = a[3];
    } else {
        // some sort of error capture here
        alert(hid + " not found...");
    }
}

// font_handler - acts like an array for fonts
var font_handler = new function() {
    this.font_selects = new Object;
    this.font_array = new Object;
    this.tag_title = false;

    this.update_font_data=function(select_object){
        this.font_array[select_object.id] = this.get_font_data(select_object[select_object.selectedIndex]);

        // call dps.update_palettes for the tag
        dps.update_palettes(this.tag_title, this.get_data());
    }

    this.register=function(tag_title, select_object)
    {
        this.tag_title = tag_title;
        if(select_object != null)
        {
            select_object.onchange = function(){ font_handler.update_font_data(this); };
            this.font_selects[select_object.id] = select_object;

            font_name = select_object[select_object.selectedIndex].innerHTML;
            font_id = select_object[select_object.selectedIndex].value;

            // set the default array for this
            this.font_array[select_object.id] = this.get_font_data(select_object[select_object.selectedIndex]);
        }
    }
    
    this.get_font_data=function(font_option){
        font_name = font_option.innerHTML;
        font_id = font_option.value;
        font_out = 'http://images.twio.com/img/f/' + font_id + "/18";
        font_over = 'http://images.twio.com/img/f/' + font_id + "/18";
        return [font_id, font_name, font_out, font_over, true];
    }

    // register this function as the call back for the PaletteData
    this.get_data=function() {
        t = [];
        t.push(['type','Type Style','/images/customizeIcons/F.gif','/images/customizeIcons/F.gif']);
        for (var p in this.font_array)
        {
            t.push(this.font_array[p]);
        }
        return t;
    }
}

function PaletteData(palette_data,change_callback)
{
    this.palette_data = palette_data;

    this.gp=function(){ return this.palette_data; }

    this.get_default = function(default_id){
        p = this.gp();
        for (i=0; i<p.length; i++)
        {
            if (default_id == p[i][0])
            {
                return p[i];
            }
        }
        return p[0];
    }
}

/*

    Size and Alignment can have as many as required
    Font and Ink can only have two different choices

    Font and Ink 
        - select one and it should automatically choose that font for all options
        - select a second and it changes only for that line
    

*/


// main dp handler
var dps = new function() {

    this.test_dps=function(){alert('dps active');}

    this.palettes = [];

    this.add_new=function(base_name, palette_data, default_option, tag, static_current)
    {
        // create a new PaletteData object
        pd = new PaletteData(palette_data);
        this.palettes[base_name] = new DynamicPalette(base_name, pd, default_option, tag);

        if (static_current == true)
        {
            this.palettes[base_name].static_current = true;
        }
    }

    this.update_dp=function(base_name, palette_data, default_option){
        //if(this.palettes[base_name]) { this.palettes[base_name] = false; }
    }
    
    this.update_palettes=function(tag, palette_data)
    {
        for (i in this.palettes)
        {
            if(this.palettes[i].tag == tag)
            { 
                pd = new PaletteData(palette_data);
                this.palettes[i].update_options(pd); 
            }
        }
    }

    this.show_options=function(base_name)
    {
       for (i in this.palettes)
       {
           if(this.palettes[i].showing == true){ this.palettes[i].hide_options(); }
       }
       this.palettes[base_name].show_options();
    }

    this.show_option_out=function(imageObject)
    {
        imageObject.src=imageObject.out_src;
    }

    this.show_option_over=function(imageObject)
    {
        imageObject.src=imageObject.over_src;
    }

    this.select_option=function(imageObject)
    {
        palette_data_update(imageObject);
        this.palettes[imageObject.base_name].update_current(imageObject);
        this.palettes[imageObject.base_name].hide_options();
    }
}

        //this.palettes[base_name] = new DynamicPalette(base_name, pd, default_option, tag);
function DynamicPalette(base_name, palette_data_object, default_option, tag) {
    this.base_name = base_name;
    this.base_element = $(base_name);

    this.ce = this.base_name + "_current";
    this.oe = this.base_name + "_options";

    this.palette_data_object = palette_data_object;
    this.default_option = default_option;

    this.tag = tag;

    this.showing = false;
    this.create_layers();
    this.set_current();
}

// create the layers
DynamicPalette.prototype.create_layers = function(){ 
    c = this.ce;
    o = this.oe;
     
    Element.update(this.base_name,'<div id="'+c+'" class="current_layer"></div><div id="'+o+'" class="option_layer"></div>');
    Element.hide(o);
}


DynamicPalette.prototype.set_current = function(){ 
    d = this.palette_data_object.get_default(this.default_option);
    this.cei = this.ce + "_current_image";

    cHTML = '<img id="'+this.cei+'" src="' + d[2] + '" alt="'+d[1]+'" />';
    Element.update(this.ce, cHTML);
    Element.setStyle(this.cei, {width: '20px', height: '20px'}); 
    $(this.cei).base_name = this.base_name;
    $(this.cei).onclick = function(){ dps.show_options(this.base_name) };
    
}

DynamicPalette.prototype.show_options = function(){
    this.showing = true;
    // create the options palette
    p = this.palette_data_object.gp();

    if (this.static_current == true)
    {
        temp = p.shift();
    } else {
        temp = false;
    }
    
    t = '';
    image = new Image;
    oe = $(this.oe);
    oe.innerHTML = '';
    var width = 0;
    for (i=0; i<p.length; i++)
    {
        d = p[i];
        i_id = this.oe + "_" + d[0];
        image.src = d[2];
        width+=image.width + 8;
        
        if (this.default_option == d[0])
        {
            t+= '<img id="'+i_id+'" src="' + d[3] + '" alt="'+d[1]+'" class="option_image"/>';
        } else {
            t+= '<img id="'+i_id+'" src="' + d[2] + '" alt="'+d[1]+'" class="option_image"/>';
        }
    }
    Element.update(this.oe, t);
    options = $A(document.getElementsByClassName('option_image', this.oe));
    for (i=0; i<p.length; i++)
    {
        oei = $(options[i]);
        oei.base_name = this.base_name;
        oei.out_src = p[i][2];
        oei.over_src = p[i][3];
        oei.onmouseover=function(){dps.show_option_over(this)}
        oei.onmouseout=function(){dps.show_option_out(this)}
        oei.onclick=function(){dps.select_option(this)}
    }
    
    
    if (width > 400)
    {
        width = 400 + "px";
    } else {
        width = width + "px";
    }
    
    Element.setStyle(this.oe, {width: width});
    
    Element.show(this.oe);
    if (temp)
    {
        p.unshift(temp);
    }
}

DynamicPalette.prototype.hide_options = function(){
    this.showing = false;
    Element.hide(this.oe);
}

DynamicPalette.prototype.update_current = function(new_image_object){
    if (this.static_current != true)
    {
        $(this.cei).src = new_image_object.out_src;
    }
}

DynamicPalette.prototype.update_options = function(new_palette_data_object){
    this.palette_data_object = new_palette_data_object;
}