{assign var=boxLeft value=54}
{assign var=boxWidth value=2*$dimensions.progress_bar_width+55}

{foreach from=$milestones item=milestone name=milestonesLoop}
{if $smarty.foreach.milestonesLoop.first}
<div class="milestoneOuterStart" style="width:{$boxWidth-$dimensions.progress_bar_width}px;">
    <div class="milestoneCircle">
        <div id="milestoneCircleFill_{$milestone->data.milestone_id}" class="milestoneCircleFill" style="width:100%">
            <div class="milestone_circle_submitted"></div>
        </div>
    </div>
    <div class="clear"></div>
    <span>{$milestone->data.milestone_name}</span>
</div>
{else if $smarty.foreach.milestonesLoop.last}
    <div class="milestoneOuterLast {if !$milestone->isReachedShallow() && !$milestone->isCurrentShallow()}milestoneIncomplete{/if}" style="left:{$boxLeft}px;width:{$boxWidth-$dimensions.progress_bar_width}px;">
        <div class="progressBarOuter" style="width:{$dimensions.progress_bar_width}px;">
            <span id="progressBarLabel{$milestone->data.milestone_id}" class="progressBarLabel {if $milestone->getConditionType() eq 'review'}progressBarLabelReview{/if}" {if !$milestone->isCurrentShallow()}style="visibility:hidden;"{/if}>{$milestone->getLabelInbetween()}</span>
            {if $milestone->getConditionType() eq 'review' && $milestone->isCurrentShallow()}
            <div class="milestoneApprovalDivider"></div>
            {/if}
            <div id="progressBarInner-{$milestone->id}" class="progressBarInner" {if $milestone->isCurrentShallow()}style="background:#d0041b"{/if}>
                <div id="milestoneProgressCompleted_{$milestone->data.milestone_id}" class="milestoneProgressCompleted" style="width:{$milestone->getCompletedWidth($milestones)}%">
                    {if $milestone->isCurrentShallow()}
                    <div class="milestone-progress-arrow" {if $milestone->getCompletedWidth($milestones) <= 3}style="right:auto";{/if}>
                        {if $milestone->getConditionType() eq 'score'}
                        <div class="milestone-vote-counter" id="milestone-vote-counter" style="right:-10px;">
                            <div class="vote-counter-arrow"></div>
                            <b>{$currentScore}</b>/{$milestone->getTarget()}
                        </div>

                        <script>
                            /*
                            jQuery(function() {
                                jQuery('#progressBarInner_' + {$milestone->id}).hover(function() {
                                    jQuery('#milestone-vote-counter').stop().fadeIn();
                                }, function() {
                                    jQuery('#milestone-vote-counter').stop().fadeOut();
                                });
                                
                                var voteCounterMargin = (jQuery('#milestone-vote-counter').width() + 8) / 2;
                                jQuery('#milestone-vote-counter').css('margin-left', -voteCounterMargin + 'px');
                            });
                            */
                        </script>
                        {/if}
                    </div>
                    {/if}
                </div>
                {*
                {if $milestone->isCurrentShallow()}
                <div class="milestone-vote-counter">
                    <div class="vote-counter-arrow"></div>
                    <b>{$currentScore}</b>/{$milestone->getTarget()}
                </div>
                {/if}
                *}
            </div>
        </div>
        <div class="milestoneCircle" {if $milestone->data.milestone_description}data-tip="{$milestone->data.milestone_description}"{/if}>
            <div id="milestoneCircleFill_{$milestone->data.milestone_id}" class="milestoneCircleFill" style="width:{if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}100{else}0{/if}%;{if $milestone->isCurrentShallow()}background:#d0041b;{/if}">
                <div class="{if $milestone->getConditionType() eq 'review'}milestone_circle_approval{else if $milestone->getConditionType() eq 'score'}milestone_circle_votes{else if $milestone->getConditionType() eq 'elaborate'}milestone_circle_elaborate{/if}"></div>
            </div>
        </div>
        <div class="clear"></div>
        <span>{$milestone->data.milestone_name}</span>
    </div>
{else}
    <div class="milestoneOuter {if !$milestone->isReachedShallow() && !$milestone->isCurrentShallow()}milestoneIncomplete{/if}" style="left:{$boxLeft}px;width:{$boxWidth}px;">
        <div class="progressBarOuter" style="width:{$dimensions.progress_bar_width}px;">
            <span id="progressBarLabel{$milestone->data.milestone_id}" class="progressBarLabel {if $milestone->getConditionType() eq 'review'}progressBarLabelReview{/if}" {if !$milestone->isCurrentShallow()}style="visibility:hidden;"{/if}>
                {$milestone->getLabelInbetween($cPost->data.post_id)}
                {if $milestone->getConditionType() eq 'score'}
                <span class="milestone_label_arrow"></span>
                {/if}
            </span>
            {if $milestone->getConditionType() eq 'review' && $milestone->isCurrentShallow()}
            <div class="milestoneApprovalDivider"></div>
            {/if}
            <div id="progressBarInner_{$milestone->id}" class="progressBarInner" {if $milestone->isCurrentShallow()}style="background:#d0041b"{/if}>
                <div id="milestoneProgressCompleted_{$milestone->data.milestone_id}" class="milestoneProgressCompleted" style="width:{$milestone->getCompletedWidth($milestones)}%">
                    {if $milestone->isCurrentShallow()}
                    <div class="milestone-progress-arrow" {if $milestone->getCompletedWidth($milestones) <= 3}style="right:auto";{/if}>
                        {if $milestone->getConditionType() eq 'score'}
                        <div class="milestone-vote-counter" id="milestone-vote-counter" style="right:-10px;">
                            <div class="vote-counter-arrow"></div>
                            <b>{$currentScore}</b>/{$milestone->getTarget()}
                        </div>

                        <script>
                            /*
                            jQuery(function() {
                                jQuery('#progressBarInner_' + {$milestone->id}).hover(function() {
                                    jQuery('#milestone-vote-counter').stop().fadeIn();
                                }, function() {
                                    jQuery('#milestone-vote-counter').stop().fadeOut();
                                });
                                
                                var voteCounterMargin = (jQuery('#milestone-vote-counter').width() + 8) / 2;
                                jQuery('#milestone-vote-counter').css('margin-left', -voteCounterMargin + 'px');
                            });
                            */
                        </script>
                        {/if}
                    </div>
                    {/if}
                </div>
                {*
                {if $milestone->isCurrentShallow()}
                <div class="milestone-vote-counter">
                    <div class="vote-counter-arrow"></div>
                    <b>{$currentScore}</b>/{$milestone->getTarget()}
                </div>
                {/if}
                *}
            </div>
        </div>
        <div class="milestoneCircle" {if $milestone->data.milestone_description}data-tip="{$milestone->data.milestone_description}"{/if}>
            <div id="milestoneCircleFill_{$milestone->data.milestone_id}" class="milestoneCircleFill" style="width:{if $milestone->isReachedShallow() || $milestone->isCurrentShallow()}100{else}0{/if}%;{if $milestone->isCurrentShallow()}background:#d0041b;{/if}">
                <div class="{if $milestone->getConditionType() eq 'review'}milestone_circle_approval{else if $milestone->getConditionType() eq 'score'}milestone_circle_votes{else if $milestone->getConditionType() eq 'elaborate'}milestone_circle_elaborate{/if}"></div>
            </div>
        </div>
        <div class="clear"></div>
        <span>{$milestone->data.milestone_name}</span>
    </div>
{assign var=boxLeft value=$boxLeft+$dimensions.progress_bar_width+54}
{/if}
{/foreach}