Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - ARC Hive V1.0</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/unobtrusive")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("scripts", required: false)

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("ARC Hive V1.0", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" style="font-size:12px">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Ajax.ActionLink("Projects", "ProjectDetails", "Project", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "right_column", HttpMethod = "GET" })</li>
                    <li>@Ajax.ActionLink("Personnel Management", "PersonnelDetails", "Personnel", new { PersonnelID = 3 }, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "right_column", HttpMethod = "GET" })</li>
                    <li>@Ajax.ActionLink("Staff Absences", "StaffAbsences", "Personnel", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "middle_column", HttpMethod = "GET" })</li>
                    <li>@Ajax.ActionLink("Personnel Details", "PersonnelDetails", "Personnel", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "right_column", HttpMethod = "GET" })</li>
                    <li>@Ajax.ActionLink("Attendance", "Attendance", "Personnel", new {}, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "middle_column", HttpMethod = "GET" })</li>
                    <li>@Ajax.ActionLink("Request Holiday", "RequestHolidays", "User", new {  }, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "right_column", HttpMethod = "GET" })</li>
                    <li>@Ajax.ActionLink("Messages", "MessageCentre", "Message", new { userId = 3 }, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "middle_column", HttpMethod = "GET" })</li>


                </ul>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
            </div>
            <div class="container">
                <p><button type="button" class="btn btn-toolbar btn-sm" data-toggle="modal" data-target="#myModal"><a href="#"><span class="glyphicon glyphicon-envelope"></span><span class="badge"> 3</span></a></button></p>
                <button onclick="toggle_visibility('draggable')">Call my click method from anywhere</button>
                <button onclick="toggle_visibility('popup')" data-toggle="modal">Press Me</button>
        </div>
    </div>
    </div>


    <!--minimal popup-->
    <style>
        #draggable { width:150px; height: 150px; padding:0; border:10px; }
    </style>
        <div id="popup" class="ui-widget-content" style="display: none;">
            <div class="popup_minimal popup_draggable">
                <button type="button" onclick="toggle_visibility('popup')" class="popup_closebutton">&times;</button>

                <div class="popup_content">
                    <!--you can fill this div with data from a partial view or viewbag-->
                    you could replace this with data
                </div>

                <div class="popup_buttoncontainer">
                    <!--these can be ajax links/actions to the controller-->
                    <button onclick="buttonOne()" class="popup_button" style="float: left;">Javascript Function</button>
                    <button onclick="buttonTwo()" class="popup_button" style="float: right;">Javascript Function</button>
                </div>
            </div>
        </div>

    <div id="myModal" class="modal fade modal-draggable" role="dialog" style="overflow:hidden;margin-left:0;margin-right:0;">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                    <ul class="nav nav-tabs" id="tabContent">
                        <li class="active"><a href="#inbox" data-toggle="tab">Inbox</a></li>
                        <li><a href="#outbox" data-toggle="tab">Outbox</a></li>
                        <li><a href="#extra" data-toggle="tab">3rd Tab</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="inbox">
                            <div class="control-group">
                                <label class="control-label">No messages, sorry.</label>
                            </div>
                        </div>

                        <div class="tab-pane" id="outbox">
                            You've sent no messages.
                        </div>

                        <div class="tab-pane" id="extra">
                            Hello.
                        </div>
                    </div>

                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

    <div id="draggable" class="ui-widget-content">Drag me!</div>

    <script src="~/Scripts/ProjectScript.js"></script>
    @*<script src="~/Scripts/jquery-ui-1.11.4.js"></script>*@
    <script type="text/javascript">
    $(".modal-draggable .modal-dialog").draggable({
        handle: ".modal-header"
    });
    </script>

    <script type="text/javascript">
        $("#draggable").draggable({
    });
    </script>

        <script>
        $(function () {
            $("#draggable").draggable();
        });
    </script>


    <div class="container body-content" style="margin-top:50px; width:100%;">
        <div id="left_column" class="col-left">
            <h2>Navigation</h2>
            <p>Bacon ipsum dolor amet meatball biltong tongue dolor chuck brisket eiusmod consequat ground round ball tip. Officia qui doner enim commodo pastrami bacon ut alcatra mollit quis chuck ham hock cow magna. Ut incididunt corned beef eu duis. Eiusmod bresaola commodo reprehenderit kevin filet mignon eu mollit officia cupidatat shankle pig fatback labore. Ut flank pork, fatback shankle eu exercitation brisket pariatur do ex lorem andouille. Doner dolore do excepteur magna culpa.</p>
        </div>
        <div id="middle_column" class="col-middle">
            <h2>Content</h2>
            <p>Qui officia cow, tail quis ball tip pork belly irure turducken ut ad pastrami kielbasa excepteur nulla. Salami alcatra do, ribeye eu shank qui nostrud esse ham officia veniam. Nisi porchetta est dolore, turducken cupidatat rump tenderloin aute. Ut andouille tri-tip non turducken qui irure hamburger fatback sed meatball labore.</p>
        </div>
        <div id="right_column" class="col-right">
            <h2>Form</h2>
            <p>Elit culpa cow salami, beef ribs doner cillum sint. Beef flank sunt meatball lorem, jowl quis dolore exercitation dolor. Alcatra ham hock ham pork belly beef incididunt. Pariatur ut ut, ex exercitation landjaeger proident nulla doner short ribs ham hock elit enim.</p>
        </div>

            @RenderBody()

    </div>
</body>


</html>
<footer style="margin-left:2%">
    <p>&copy; @DateTime.Now.Year - ARCHive</p>
</footer>