                     class=''></select> &nbsp;
             <button id='wolfcage-generator-colorpicker-button' 
                     class=''>Color Picker</button>
+            <button id='wolfcage-generator-thumbmontage-button' 
+                    class=''>Thumbs</button>
         </div>
         </div>
 

exports.generatorBoard = "
<div id='wolfcage-board-container'>
    <div id='wolfcage-board'></div>
</div>
"
exports.colorPickers = "
<div class='wolfcage-colorpicker-wrapper'>
    <div class='wolfcage-colorpicker-container'>
        <div class='wolfcage-colorpicker-container-title'>Active Cell</div>
        <select id='wolfcage-colorpicker-active-hex' ></select>
    </div>
    <div class='wolfcage-colorpicker-container'>
        <div class='wolfcage-colorpicker-container-title'>Cell Border</div>
        <select id='wolfcage-colorpicker-border-hex'  ></select>
    </div>
    <div class='wolfcage-colorpicker-container'>
        <div class='wolfcage-colorpicker-container-title'>Inactive Cell</div>
        <select id='wolfcage-colorpicker-inactive-hex'  ></select>
    </div>
</div>
"

exports.colorPickerOption = (color)=>
    return "<option value='#{color.hex}' style='background-color:#{color.hex}'> 
                   #{color.name}
            </option>"

exports.generatorPreviewCell = ({leftBitActive, middleBitActive, rightBitActive, previewIndex}) => 

        <div id='#{ id }' style='left:#{ left }px;' class='wolfcage-board-cell #{ activeClass }'></div>
    "

exports.thumbMontage = "
<div id='wolfcage-thumbmontage-container'></div>
"

thumbnail = (rule)=>
    return "
        <div class='wolfcage-thumbmontage-rulethumb-box '
            data-rule='#{ rule }'>
            <div class='wolfcage-rulethumb-rulenum'>#{rule}</div>
        </div>
    "

exports.thumbnails = (ruleList) =>
    nails = ""
    for rule in ruleList
        nails += thumbnail(rule)
    return nails 


