<div class="wrap">

    <div id="icon-fontbird" class="icon32"><br /></div>
    <h2>Collection Manager &gt; <?php echo $collection->name ?><?php if ($collection->actived):?>(Actived)<?php endif?></h2>

    <form method="POST" action="<?php echo AxcotoFontBird::singleton()->uri('collection', 'collection/open/' . $collection->id) ?>" name="new-collection">
        <fieldset>
            <?php wp_nonce_field('add_collection', 'name'); ?>
            <input type="text" name="collection_name"  value="<?php echo $collection->name ?>" />
            <input type="hidden" name="collection_id"  value="<?php echo $collection->id ?>" />
            <input type="submit" name="add" value="Save Collection Name" />
            <input type="submit" name="actived" value="Set As Default" />
        </fieldset>
    </form>

    <?php if ($rules) : ?>
                <table id="selector-container" cellspacing="0" class="widefat post fixed">
                    <thead>
                        <tr>
                            <th style="" class="manage-column column-selector" scope="col">Selector</th>
                            <th style="" class="manage-column column-font" scope="col">Font</th>
                            <th style="" class="manage-column column-size" scope="col">Size</th>
                            <th style="" class="manage-column column-action" scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>

            <?php foreach ($rules as $item) : ?>
                    <tr>
                        <td class="column-selector">
                            <span><?php echo $item->selector ?></span>
                        </td>
                        <td class="column-font">
                            <span style="font-family: <?php echo $item->slug?>" href="#"><?php echo $item->name ?></span>
                        </td>
                        <td>
                            <?php echo $item->font_size?>
                        </td>
                        <td>
                            <a href="<?php echo AxcotoFontBird::singleton()->uri('collection', 'collection/removeRule/' . $item->id) ?>">Remove</a>
                        </td>
                    </tr>
            <?php endforeach ?>
                </tbody>
            </table>
    <?php endif ?>

                    <div id="icon-add-rule" class="icon32"><br /></div>
                    <h2>Add Rule</h2>
                    <form method="POST" action="" name="new-rule" id="new-rule">
                        <fieldset>
                            <input type="hidden" name="collection_id"  value="<?php echo $collection->id ?>" />
                            <input type="hidden" name="font_id" id="font_id"  value="1" />
                                    
                            <ul class="form">
                                <li>
                                    <label>Elements</label>
                                    <input type="text" name="selector" id="selector" value="h1, h2, h3" />
                                </li>
                                <li class="predefined-selector">
                                    <label>Or use predefined element</label>
                                    <a title="body" href="#">Body</a><a href="#" title="h1, h2, h3">Header</a><a title="ul, ol, li" href="#">List Item</a>
                                    <a title="p, span" href="#">Paragraph</a><a title="a" href="#">Link</a><a title=".posttitle" href="#">Post Title</a>
                                    <a title=".navigation a" href="#">Navigation Text</a><a title=".widget" href="#">Widget Text</a>
                                    <a title=".widget .widgettitle" href="#">Widget Title</a>
                                </li>
                                <li>
                                    <label>Font</label>
                                    
                                        <span id="sample-text" style="font-family: 'Delicious-Heavy'; font-size: 25px; font-weight: normal">Sample</span>
                                        <a href="#" id="change-font">Change Font</a>
                                    
                                </li>
                                <li>
                                    <label>Font Size</label>
                                    <input type="text" name="font_size" value="" />
                                </li>
                            </ul>

                            <input type="submit" name="add" value="Add Rule" />
                        </fieldset>
                    </form>
</div>

<div id="font-list">
    <div id="font-list-overlay">&nbsp;</div>
    <div id="font-item-wrap">
        <ul class="item-list " id="font-container">
        <?php foreach ($fonts as $font) : ?>
                        <li id="font_element_<?php echo $font->id ?>" onclick="fontbird.selectFont(<?php echo $font->id ?>, '<?php echo $font->slug ?>')" style="font-family: '<?php echo substr($font->name, 0, strlen($font->name) - 4) ?>'; font-size: 2em; font-weight: normal">
                            <?php echo $font->name ?>
                        </li>
        <?php endforeach; ?>
        </ul>
        <a href="#" id="finished">Closed Form</a>
        
    </div>

                    <script>
                        jQuery(document).ready(function ($) {
<?php foreach ($fonts as $font) : ?>
                                    $('#font_element_<?php echo $font->id ?>').data('font', '<?php echo $font->slug ?>');
<?php endforeach; ?>
                        $('#finished').click(function () {
                            $('#font-list').css({'left': '-99999px'});
                        })
            })
    </script>
</div>



