@model Tuple<IEnumerable<F4.Lib.Models.TrophyAwarded>, Dictionary<string,F4.Lib.Utilities.Trophies.Trophy>>

@{
    ViewBag.IsTrophyRoom = true;
    string signed_request = ViewBag.FacebookInfo.SignedRequest;

    int currentElement = 0;
    int lastPage = -1;
    bool extraElements = (Model.Item1.Count() % 9 > 0);
}

<div class="trophy-container">
    <div class="clock"></div>
    <div id="trophy-case" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            @foreach (var trophy in Model.Item1)
            {
                int currentPage = (int)Math.Floor(currentElement / 9.0);
                int pageElement = currentElement % 9;
                int pageRow = (int)Math.Floor(pageElement / 3.0);
                int column = pageElement % 3;

                if (currentPage > lastPage)
                {
                    @:<div class="@if(currentPage == 0){<text>active</text>} item">
                    @:<ul class="shelf">
                }

                    <li class="row-@(pageRow + 1) column-@(column + 1)"><a class="trophy-button" href="#trophy-modal" data-trophy="@trophy.TrophyID" data-deed="@trophy.Deed" data-displayname="@Model.Item2[trophy.TrophyID].DisplayName"><img src="@Url.Content(String.Format("~/assets/img/trophies/small/{0}.png", trophy.TrophyID))" /></a></li>

                if (pageElement == 8)
                {
                    @:</ul>
                    @:</div>
                }

                lastPage = currentPage;
                currentElement++;
            }

            @if (extraElements)
            {
                @:</ul>
                @:</div>
            }
        </div>
        <!-- Carousel nav -->
        <div class="controls">
            <a class="carousel-control left" href="#trophy-case" data-slide="prev"></a>
            <a class="carousel-control right" href="#trophy-case" data-slide="next"></a>
        </div>
    </div>
	<div id="video-link-buttons">
	    <a id="video-share" href="#" class="share-button prize">share</a>
	    <a id="video-trophy-link" href="@Url.Action(MVC.Machine.TrophyRoom(signed_request))">Trophy Room</a>
	    <a id="video-tryagain" href="@Url.Action(MVC.Machine.Index(signed_request, true))">Try Again</a>
	</div>
    <div class="modal fade" id="trophy-modal" data-backdrop="static">
        <img id="trophy-image" src="" alt="" width="331" class="trophy-image">
        <div class="trophy-information">
            <a id="trophy-close" href="#" data-dismiss="modal"><img src="@Url.Content("~/assets/img/trophy-close.png")" alt="Back to trophy room" /></a>
            <span>here's your</span>
            <h1 id="trophy-title"> TROPHY</h1>
            <p>Remember when you did this awesome thing? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <div class="social">
                <ul>
                    <li><a href="#" class="share">share</a></li>
                    <li><a href="#" class="facebook">facebook</a></li>
                    <li><a href="#" class="twitter">twitter</a></li>
                    <li><a href="#" class="pinterest">pinterest</a></li>
                </ul>
            </div>
            <a href="#" data-dismiss="modal" class="back"><img src="@Url.Content("~/assets/img/back-to-trophy.png")" alt="Back to trophy room" /></a>
        </div>
    </div>
</div>

@section Scripts
{
    <script src="@Url.Script_Exact("libs/bootstrap.js")"></script>
    <script type="text/javascript">
        $('.trophy-button').click(function ()
        {
            $('#trophy-image').attr('src', '@Url.Content("~/assets/img/trophies/large/")' + $(this).data('trophy') + '.png');
            $('#trophy-title').text($(this).data('displayname') + ' TROPHY');

            $('#trophy-modal').modal('show');
        });

		$('#trophy-case').on('slid', '', function()
		{
			var $this = $(this);
			if($('.carousel-inner .item:first').hasClass('active')) {
				$this.children('.carousel-control.left').hide();
			} else if($('.carousel-inner .item:last').hasClass('active')) {
				$this.children('.carousel-control.right').hide();
			} else {
				$this.children('.carousel-control').show();
			}
		});

    </script>
}