/*
  Krom/Gray: Javascript to assist with creating swatches for either colors or motifs
  Sample usage:
  
<table>
<tr id="motifs">
    <td id="motif_image" style="display: none;">
        <a href="#"><img border="0" alt="Thumbnail" src="#" /></a>
    </td>
</tr>
<tr id="motifs2">
    <td id="motif_image2" style="display: none;">
        <a href="#"><img border="0" alt="Thumbnail" src="#" /></a>
    </td>
</tr>
</table>

<table>
<tr id="colors">
    <td id="color_image" style="display: none;">
        <a href="#"><img border="0" alt="Thumbnail" src="#" /></a>
    </td>
</tr>
</table>


<script type="text/javascript">
document.observe('dom:loaded', function() {
    show_embroideries_or_colors('motifs', 'motif_image', 'embroidery', 'cisco-short', ['skull', 'snail', 'martini', 'blue_diamond']);
    show_embroideries_or_colors('motifs2', 'motif_image2', 'embroidery', 'cisco-short', ['bowling', 'olive', 'surfboard', 'pink_skull']);
    show_embroideries_or_colors('colors', 'color_image', 'color', 'cisco-short', ['pink', 'sky_blue', 'red', 'black']);
});

</script>

 */
 
MK_DG_IMAGE_BASE = '/skin/frontend/castaway_design/default/images/browse/'

function show_embroideries_or_colors(dom_id, proto_dom_id, mode, style, id_list) {
    var to_clone = $(proto_dom_id);
    new_children = id_list.map(function(id) {
        new_el = to_clone.cloneNode(true); //document.createElement('img');
        var hyphenated_id = id.replace('_', '-');
        var new_href = '';
        var new_src = ''
        if (mode == 'embroidery') {
            new_href = "../" + style + '-' + hyphenated_id + '.html';
            new_src  = MK_DG_IMAGE_BASE + "embroidery_thumbs/" + id + '.png';
        } else if (mode == 'color') {
            new_href = "../" + hyphenated_id + '-' + style + '.html';
            new_src  = MK_DG_IMAGE_BASE + "color_thumbs/" + id + '.jpg';
        }
        
        new_el.select('img')[0].src = new_src
        new_el.select('a')[0].href = new_href;
        new_el.id = '';
        new_el.show(); // template has display-none
        return new_el;
    })
    new_children.each(function(child) {
        $(dom_id).appendChild(child);
    });
}