///
/// 註：此程式碼混合了 ASP.NET MVC 5 + Angular 1.5 + Bootstrap 3 + HTML5 + CSS3 ，所以不要太計較語法。
///
@{
    //** 僅用於初始化 web page.
    Layout = "~/Views/Shared/_NgLayout.cshtml";
    ViewBag.Title = "CSS3 @media Lab";
    const Boolean DEBUG_MODE = true;
}

@section css_style {

    <style type="text/css">
        /* screen-xs:  480px */
        /* screen-sm:  768px */
        /* screen-md:  992px */
        /* screen-lg: 1200px */

        /* 寬螢幕模式：寬螢寬度 1200px 以上。 */
        @@media screen and (min-width:1200px) {
            .myclass
            {
               background-color: yellow;
            }
            .myclass::after
            {
                content: "寬螢幕"
            }
        }

        /* 膝上型模式：寬螢寬度 992px 以上，小於 1200px。 */
        @@media screen and (min-width: 992px) and (max-width: 1199px) {
            .myclass
            {
                background-color: green;
            }
            .myclass::after
            {
                content: "膝上型"
            }
        }

        /* 平板模式：寬螢寬度 768px 以上，小於 992px。 */
        @@media screen and (min-width: 768px) and (max-width: 991px) {
            .myclass
            {
                color: white;
                background-color: blue;
            }
            .myclass::after
            {
                content: "平板"
            }
        }

        /* 手機模式：寬螢寬度小於 768px。 */
        @@media screen and (max-width: 767px) {
            .myclass
            {
               background-color: red;
            }
            .myclass::after
            {
                content: "手機"
            }
        }

    </style>

}

<div ng-controller="appController" ng-cloak>
    <h2>@ViewBag.Title</h2>
    <p>說明：CSS @@media 指令練習。<br/>請將畫面縮放於 Bootstrap 四個寬度級數之間。</p>
    <hr />

    <h1 class="myclass" >寬度級數：</h1>

    <div ng-controller="mainCtrl" ng-init="init()">

        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:red;"><h1>THIS</h1></div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:blue;"><h1>IS</h1></div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:green;"><h1>A</h1></div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:yellow;"><h1>BOOK</h1></div>
            </div>
        </div>

        <div class="affix" style="background-color: InfoBackground; right: 20px; ">
            <dl>
                <dt>width</dt>
                <dd>{{wndWidth}}</dd>
                <dt>height</dt>
                <dd>{{wndHeight}}</dd>
                <dt>scrollX</dt>
                <dd>{{scrollX}}</dd>
                <dt>scrollY</dt>
                <dd>{{scrollY}}</dd>
            </dl>
        </div>

    </div>


    @* Script *@
    <script src="~/Scripts/NgApp/appMain.js"></script>
    <script type="text/javascript">

        /// ng-controller
        app.controller('mainCtrl', function ($scope, $log, appValue, $filter) {

            // ctor
            $scope.appValue = appValue;
            $scope.wndWidth = 0; // window width
            $scope.wndHeight = 0; // window height
            $scope.scrollX = 0; // window scroll X
            $scope.scrollY = 0; // window scroll Y

            //# methods
            $scope.getData = function () {

            };

            //# evnet of window
            $(window).resize(function () {
                $scope.$apply(function () {
                    $scope.wndWidth = $(window).innerWidth(); //  window.innerWidth;
                    $scope.wndHeight = $(window).innerHeight(); // window.innerHeight;
                });
            });

            //# evnet of window
            $(window).scroll(function () {
                $scope.$apply(function (e) {
                    $scope.scrollX = window.scrollX;
                    $scope.scrollY = window.scrollY;
                });
            });

            //# init.
            $scope.init = function () {
                $log.log('on: init...');
                $scope.wndWidth = $(window).innerWidth(); //  window.innerWidth;
                $scope.wndHeight = $(window).innerHeight(); // window.innerHeight;
                $scope.scrollX = window.scrollX;
                $scope.scrollY = window.scrollY;
            };

        });

</script>
</div>