/**

 * Stylesheets for the context bar

 */

i.icon-arrow-right { background-image: url('../images/icons/arrow_right.png');}

i.icon-bar-chart { background-image: url("../images/icons/chart_bar.png"); }

i.icon-code-merge { background-image: url("../images/icons/arrow_merge.png"); } /* unused! */

i.icon-ellipsis-horizontal:after { content: ' ...';}

i.icon-file-txt { background-image: url("../images/icons/note_error.png"); }

i.icon-git { background-image: url('../images/icons/giticon.png');}

i.icon-hg { background-image: url('../images/icons/hgicon.png');}

i.icon-disabled { background-image: url('../images/icons/shading.png');} /* todo: use instead of minus sign */

i[class^='icon-'] {

    background-repeat: no-repeat;

    background-position: center;

    display: inline-block;

    min-width: 16px;

    min-height: 16px;

    margin: -2px 0 -4px 0;

    /* background-color: red; /* for debugging */

}

/* css classes for diff file status ... it'd be nice if css had a way to

   inherit from another class but alas, we must make sure this content is the

   same from the icon font file */

.icon-diff-M:before {

    font-family: 'kallithea';

    content: '\e805';

    color: #d0b44c;

}

.icon-diff-D:before {

    font-family: 'kallithea';

    content: '\e807';

    color: #bd2c00;

}

.icon-diff-A:before {

    font-family: 'kallithea';

    content: '\e806';

    color: #6cc644;

}

.icon-diff-R:before {

    font-family: 'kallithea';

    content: '\e81f';

    color: #677a85;

}

#content #context-bar {

    position: relative;

    overflow: visible;

    background-color: #577632;

        · ${c.site_name}

    %endif

</%def>

<%def name="breadcrumbs()">

    <h5>

    <form id="filter_form">

    <input class="q_filter_box ${'' if c.search_term else 'initial'}" id="j_filter" size="15" type="text" name="filter" value="${c.search_term or _('quick filter...')}"/>

    <span class="tooltip" title="${h.tooltip(h.journal_filter_help())}">?</span>

    <input type='submit' value="${_('Filter')}" class="btn btn-small" style="padding:0px 2px 0px 2px;margin:0px"/>

    ${_('Journal')} - ${ungettext('%s Entry', '%s Entries', c.journal_pager.item_count) % (c.journal_pager.item_count)}

    </form>

    ${h.end_form()}

    </h5>

</%def>

<%def name="page_nav()">

    ${self.menu('journal')}

</%def>

<%def name="head_extra()">

<link href="${h.url('journal_atom', api_key=c.authuser.api_key)}" rel="alternate" title="${_('ATOM journal feed')}" type="application/atom+xml" />

<link href="${h.url('journal_rss', api_key=c.authuser.api_key)}" rel="alternate" title="${_('RSS journal feed')}" type="application/rss+xml" />

</%def>

<%def name="main()">

    <div class="box box-left">

        <!-- box / title -->

        <div class="title">

         ${self.breadcrumbs()}

         <ul class="links icon-only-links">

           <li>

             <span><a id="refresh" href="${h.url('journal')}"><i class="icon-arrows-cw"></i></a></span>

           </li>

           <li>

             <span><a href="${h.url('journal_atom', api_key=c.authuser.api_key)}"><i class="icon-rss-squared"></i></a></span>

           </li>

         </ul>

        </div>

        <div id="journal">${c.journal_data}</div>

    </div>

    <div class="box box-right">

        <!-- box / title -->

        <div class="title">

            <h5>

            <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value="" style="display: none"/>

            <input class="q_filter_box" id="q_filter_watched" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value="" style="display: none"/>

            </h5>

            <ul class="links nav nav-tabs">

                <li class="active" id="show_watched_li">

                </li>

                <li id="show_my_li">

                    <a id="show_my" href="#my"><i class="icon-database"></i> ${_('My Repos')}</a>

               </li>

            </ul>

        </div>

        <!-- end box / title -->

        <div id="my_container" style="display:none">

            <div class="table-grid table yui-skin-sam" id="repos_list_wrap"></div>

            <div id="user-paginator" style="padding: 0px 0px 0px 20px"></div>

        </div>

        <div id="watched_container">

            <div class="table-grid table yui-skin-sam" id="watched_repos_list_wrap"></div>

            <div id="watched-user-paginator" style="padding: 0px 0px 0px 20px"></div>

        </div>

    </div>

    <script type="text/javascript">

    $('#j_filter').click(function(){

        var $jfilter = $('#j_filter');

        if($jfilter.hasClass('initial')){

            $jfilter.val('');

        }

    });

    var fix_j_filter_width = function(len){

        $('#j_filter').css('width', Math.max(80, len*6.50)+'px');

    };

    $('#j_filter').keyup(function(){

        fix_j_filter_width($('#j_filter').val().length);

    });

    $('#filter_form').submit(function(e){

        e.preventDefault();

        var val = $('#j_filter').val();

        window.location = "${url.current(filter='__FILTER__')}".replace('__FILTER__',val);

    });

    fix_j_filter_width($('#j_filter').val().length);

    $('#refresh').click(function(e){

        asynchtml("${h.url.current(filter=c.search_term)}", $("#journal"), function(){

            show_more_event();

            tooltip_activate();

            show_changeset_tooltip();

            });

        e.preventDefault();

    });