<?php
#
# This file is (C) CFEngine AS. All rights reserved
#
?>

<div class="outerdiv grid_12">
    <div class="innerdiv">

        <h2>TEMPLATES LINKS</h2>

        <ul>
            <li><a href="templates/">Normal</a></li>
            <li><a href="templates/tabs">Tabs</a></li>
        </ul>

        <hr />

        <h2>STYLED BOOTSTRAP ELEMENTS</h2>

        <h3>Tokens in fluid container</h3>

        <div class="show_code"><div class="row-fluid">
            <div class="token token-gray"><span>text with remove button</span><a data-dismiss="alert"><span class="icon-remove"></span></a></div>
            <div class="token token-gray"><span>text with generic button</span><a href="#"><span class="icon-star"></span></a></div>
            <div class="token token-gray"><span>only text</span></div>
            <div class="token token-gray"><span class="icon-ok"></span><span>icon on the left</span></div>
            <div class="token token-gray token-disabled"><span>for disable a token just add "token-disabled"</span></div>

            <ul class="nav pills token token-cyan">
                <li class="dropdown" id="menu1">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
                    <span class="icon-plus"></span>
                    Dropdown<span></span>
                    <span class="icon-caret-down gray"></span>
                    </a>
                    <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div></div>

        <h3>Token List</h3>

        <div class="show_code"><ul class="tokenlist clearfix">
            <li class="token token-gray"><span>item1</span><a href="javascript:void(0)" class="remove" data-dismiss="alert"><span class="icon-remove"></span></a></li>
            <li class="token token-gray"><span>item2</span><a href="javascript:void(0)" class="remove" data-dismiss="alert"><span class="icon-remove"></span></a></li>
        </ul></div>

        <hr />

        <!-- INPUTS -->

        <h3>INPUTS</h3>

        <div class="show_code"><input type="text" class="span12" value="normal input, use 'span1-12' to decide the size" /></div>

        <div class="show_code"><div class="input-append">
            <input class="span6" size="16" type="text" value="combined input" />
            <button class="btn btn-primary" add-on" type="button">MIAO</button>
        </div></div>

        <div class="show_code"><div class="input-append white-bg">
            <input class="span4" size="16" type="text" value="combined white-bg input append" />
            <a href="#"><span class="icon-eye-open add-on"></span></a>
            <a href="#"><span class="icon-remove add-on"></span></a>
        </div></div>

        <div class="show_code"><div class="input-prepend white-bg">
            <a href="#"><span class="icon-play add-on"></span></a>
            <a href="#"><span class="icon-pause add-on"></span></a>
            <input class="span4" size="16" type="text" value="combined white-bg input prepend" />
        </div></div>

        <div class="show_code"><div class="input-append">
            <input class="span5" size="16" type="text" value="combined input append" />
        </div></div>

        <div class="show_code"><div class="input-prepend">
            <a href="#"><span class="icon-list add-on"></span></a>
            <input class="span5" size="16" type="text" value="combined input prepend" />
        </div></div>

        <hr />

        <!-- BUTTONS -->

        <h3>Buttons</h3>

        <div class="show_code"><p>
        <button class="btn btn-large btn-primary" type="button">Large button</button>
        <button class="btn btn-large btn-primary disabled" type="button">Large button</button>
        <button class="btn btn-large" type="button">Large button</button>
        <button class="btn btn-large disabled" type="button">Large button</button>
        </p></div>
        <div class="show_code"><p>
        <button class="btn btn-primary" type="button">Default button</button>
        <button class="btn btn-primary disabled" type="button">Default button</button>
        <button class="btn" type="button">Default button</button>
        <button class="btn disabled" type="button">Default button</button>
        </p></div>
        <div class="show_code"><p>
        <button class="btn btn-small btn-primary" type="button">Small button</button>
        <button class="btn btn-small btn-primary disabled" type="button">Small button</button>
        <button class="btn btn-small" type="button">Small button</button>
        <button class="btn btn-small disabled" type="button">Small button</button>
        </p></div>
        <div class="show_code"><p>
        <button class="btn btn-mini btn-primary" type="button">Mini button</button>
        <button class="btn btn-mini btn-primary disabled" type="button">Mini button</button>
        <button class="btn btn-mini" type="button">Mini button</button>
        <button class="btn btn-mini disabled" type="button">Mini button</button>
        </p></div>

        <hr />

        <!-- LABELS -->

        <h3>Labels</h3>

        <div class="show_code" style="margin-bottom: 10px"><span class="label label-important">5</span> <a href="#">important</a>
        <span class="label label-warning">5</span> <a href="#">warning</a>
        <span class="label label-success">5</span> <a href="#">success</a>
        <span class="label label-info">5</span> <a href="#">info</a>
        <span class="label label-inverse">5</span> <a href="#">inverse</a></div>

        <hr />

        <!-- TABS -->

        <h3>Tabs</h3>

        <div class="show_code"><div class="tabbable"> <!-- Only required for left/right tabs -->
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
            <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
            <p>Howdy, I'm in Section 2.</p>
            </div>
        </div>
        </div></div>

        <hr />

        <!-- ACCORDION -->

        <h3>Accordion</h3>

        <div class="show_code">
        <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="icon-chevron-down"></i> Collapsible Group Item #1
            </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <i class="icon-chevron-right"></i> Collapsible Group Item #2
            </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
            </div>
        </div>
        </div>
        </div>

        <hr />

        <!-- TABLES -->

        <h3>Tables</h3>

        <div class="show_code"><table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td><a href="#">@mdo</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td><a href="#">@fat</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td><a href="#">@twitter</a></td>
            </tr>
            </tbody>
        </table>
        </div>

        <hr />

        <!-- PAGINATION -->

        <h3>Pagination</h3>

        <div class="show_code"><div class="pagination">
        <ul>
            <li><a href="#">Prev</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">Next</a></li>
        </ul>
        </div></div>

        <hr />

        <!-- ALERTS -->

        <h3>Alerts</h3>

        <div class="show_code"><div class="alert alert-error">ERROR</div></div>
        <div class="show_code"><div class="alert alert-succes">SUCCESS</div></div>
        <div class="show_code"><div class="alert alert-info">INFORMATION</div></div>
        <div class="show_code"><div class="warning-box">WARNING</div></div>
    </div>
</div>


<script type="text/javascript">
$(document).ready(function(){

   $(".show_code").each(function(){

        var html = $(this).html();

        $(this).after($('<pre>').text($.trim(html)));//.after($("<br />"));

   });

   $("pre").css({
       "font-size":"8pt",
       "line-height" : "9pt",
       "color" : "#AAA"
   });
});
</script>
