@{
    ViewBag.Title = "EnglishIndex";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

<link rel="stylesheet" href="~/Content/assets/css/animate.css" />
<link rel="stylesheet" href="~/Content/assets/css/home.css" />
<script src="~/Content/assets/js/wow.min.js" type="text/javascript"></script>

@using NEducation.Code;
@using NEducation.Controllers;

@section navMenu{

    <a href="/Home/" class="nav-link">@Lang.Home</a>
    <a href="/Common/Course?courseType=@UtilsController.Constant.EN_VOCABULARY" class="nav-link">@Lang.Vocabulary</a>
    <a href="/Common/Course?courseType=@UtilsController.Constant.EN_GRAMMAR" class="nav-link">@Lang.Grammar</a>
    <a href="/Common/Course?courseType=@UtilsController.Constant.EN_LISTEN" class="nav-link">@Lang.Listening</a>
    <a href="/MiniGame" class="nav-link ">@Lang.MiniGame</a>
    @*<a href="/Ebook/" class="nav-link">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@

    <div class="dropdown nav-link">
        <button onclick="myFunction()" class="dropbtn">
            E-Library
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </button>
        <div id="myDropdown" class="dropdown-content">
            <a href="/Ebook/">@Lang.Ebook</a>
            <a href="/Ebook/Video">Children's Video</a>
        </div>
    </div>

    @*<a href="/Music/" class="nav-link">Music</a>*@
}

@section menu{
    <a href="/Home/" class="header-menu-link ">@Lang.Home</a>
    <a href="/Common/Course?courseType=@UtilsController.Constant.EN_VOCABULARY" class="header-menu-link ">@Lang.Vocabulary</a>
    <a href="/Common/Course?courseType=@UtilsController.Constant.EN_GRAMMAR" class="header-menu-link ">@Lang.Grammar</a>
    <a href="/Common/Course?courseType=@UtilsController.Constant.EN_LISTEN" class="header-menu-link ">@Lang.Listening</a>
    <a href="/MiniGame" class="header-menu-link ">@Lang.MiniGame</a>
    @*<a href="/Ebook/" class="header-menu-link ">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@

    <li class="menu-item-has-children header-menu-link ">
        <a href="#" class="">
            E-Library
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>
        <ul class="" style=" margin-left: 20px;">
            <li><a href="/Ebook/">@Lang.Ebook</a></li>
            <li><a href="/Ebook/Video">Children's Video</a></li>
        </ul>
    </li>
}

<input type="hidden" id="current-url" value="">
@using NEducation.Content.Texts;

@{
    var msisdn = "";
    var displayGuest = "";
    var displayUser = "";
    var displaySub = "";

    if (Session["profile"] != null)
    {
        var profile = Session["profile"] as UserProfile;
        msisdn = profile.users.Substring(3);
        var isSub = Session["isSub"] as String;
        if (isSub == "true")
        {
            displayGuest = "none";
            displayUser = "inherit";
            displaySub = "none";
        }
        else
        {
            displayGuest = "none";
            displayUser = "none";
            displaySub = "inherit";
        }
    }
    else
    {
        displayGuest = "inherit";
        displayUser = "none";
        displaySub = "none";
    }
}

<div class="container-fluid english-page" id="page-home-top">
    <span class="project-balloon balloon-3"></span>
    <div id="top-title-padding">
        <div class="row">
            <div class="col-md-12">
                <div class="row" id="page-title-top">
                    <div class="col-md-6 col-xs-12 col-sm-6" align="center">
                        <div id="logo">
                            <img src="~/Content/assets/imgs/student.png" />
                            <h1 id="title-left-top"><span id="title">USTUDY</span></h1>
                            <text style="color:#FFF" font-family="'opensansregular'" font-size="17">
                                @Lang.OvercomingAnObstacle
                            </text>
                        </div>
                    </div>
                    <div class="col-md-6 col-xs-12 col-sm-6">
                        <div id="title-left-top" align="center">
                            <h1 id="title">
                                <span>
                                    @Lang.ResearchingEnglish
                                </span>
                            </h1>
                            <p id="content-title">
                                @Lang.ForEveryone
                            </p>

                            <a href="javascript:void(0)" id="btn-start" data-toggle="modal" data-target="#signup-dialog" style="display:@displayGuest;margin:0 0 20px 0">
                                @Lang.SignUp
                            </a>
                            <a href="javascript:void(0)" id="btn-start" data-toggle="modal" data-target="#login-dialog" style="display:@displayGuest">
                                @Lang.LoginNow
                            </a>

                            <a href="javascript:void(0)" id="btn-start" class="btn-subscribe-now"
                               style="display:@displaySub">
                                @Lang.SubscriberNow
                            </a>

                            <a href="/Common/Course" id="btn-start" style="display:@displayUser">
                                @Lang.GetStartedNow
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row img-motocycle">
        <span class="project-balloon balloon-1"></span>
        <div class="travel-voca-content">
            <img class="wow bounceInLeft" data-wow-duration="2s" src="~/Content/assets/imgs/travel-voca.png" alt="voca travel" />
        </div>

    </div>
</div><!--end page-home-top-->
<!-- Home Intro -->
<div class="home-intro-container-top" id="page-home-m">
    <div class="home-intro-cover-top">
        <div class="row">
            <div class="col-xs-12">
                <div class="home-intro-left">
                    <div class="home-intro-img">
                        <img class="intro-image wow zoomIn" alt="voca man" src="~/Content/assets/imgs/m-home-voca-man.svg" />
                    </div>
                    <h1 class="home-intro-detail">
                        @Lang.ResearchingEnglish
                    </h1>

                    @*<a href="javascript:void(0)" class="home-intro-button" data-toggle="modal" data-target="#signup-dialog"
                           style="display:block">
                            @Lang.SignUp
                        </a>*@
                    <a href="javascript:void(0)" class="home-intro-try-free" data-toggle="modal" data-target="#login-dialog"
                       style="display:block">@Lang.LoginNow</a>

                    <a href="/Common/Course" class="home-intro-button" style="display:@displayUser">
                        @Lang.GetStartedNow
                    </a>
                    <a href="javascript:void(0)" class="home-intro-button" data-toggle="modal" data-target="#signup-dialog" style="display:@displaySub">
                        @Lang.SubscriberNow
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="container-fluid" id="three-step-learn-english">
    <div class="project-product">
        <div class="product-cover">
            <h3 class="product-title">
                @Lang.UnitelEduSystem
            </h3>
            <p class="product-description">
                @Lang.FiveSystemsHelpYouImproveAllYourSkills
                <strong>@Lang.FourSkills</strong>
            </p>

            <div class="project-system">

                <div class="project-system-item system-voca">
                    <a data-wow-duration="1s" class="system-cover wow zoomIn" href="/Voca">
                        <div class="system-image"></div>
                        <h3 class="system-name">
                            MEDU Vocabulary
                        </h3>
                        <h4 class="system-des">
                            @Lang.VocabularySystem
                        </h4>
                        <p class="system-button">@Lang.View</p>
                    </a>
                </div>

                <div class="project-system-item system-grammar">
                    <a data-wow-duration="2s" class="system-cover wow zoomIn" href="/Grammar">
                        <div class="system-image"></div>
                        <h3 class="system-name">
                            MEDU Grammar
                        </h3>
                        <h4 class="system-des">
                            @Lang.GrammarSystem
                        </h4>
                        <p class="system-button">@Lang.View</p>
                    </a>
                </div>

                <div class="project-system-item system-natural">
                    <a data-wow-duration="4s" class="system-cover wow zoomIn" href="/Listening">
                        <div class="system-image"></div>
                        <h3 class="system-name">
                            @Lang.ListeningEnglish
                        </h3>
                        <h4 class="system-des">
                            @Lang.ListeningSystem
                        </h4>
                        <p class="system-button">@Lang.View</p>
                    </a>
                </div>

            </div>

        </div>
    </div>


    <div class="project-product">
        <div class="product-cover">
            <h3 class="product-title">
                @*Không Ngôn Ngữ*@
                HowDoesUSTUDYHelpYou
            </h3>
        </div>

        <div class="product-intro-group">
            <div class="product-intro-item product-intro-voca">
                <div class="product-intro-item-left">
                    <span>1</span>
                    <p class="product-intro-item-description">
                        <strong>@Lang.Vocabulary</strong> - @Lang.ThisMethodHelpsYouRememberEasily
                    </p>
                    <p>
                        <a target="_blank" href="/Voca">
                            +  @Lang.LearningAboutThisMethod
                        </a>
                    </p>
                </div>
                <div class="product-intro-item-right">
                    <img class="wow bounceInRight" data-wow-duration="3s" src="~/Content/assets/imgs/intro-voca.png">
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="product-intro-item product-intro-grammar">

                <div class="product-intro-item-left">
                    <img class="wow bounceInLeft" data-wow-duration="3s" src="~/Content/assets/imgs/intro-grammar.png">
                </div>
                <div class="product-intro-item-right">
                    <span>2</span>
                    <p class="product-intro-item-description">
                        <strong>@Lang.Grammar</strong> – @Lang.ThisMethodHelpsYouCreateADocumentEasily
                    </p>
                    <p>
                        <a target="_blank" href="/Grammar">
                            + @Lang.LearningAboutThisMethod
                        </a>
                    </p>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="product-intro-item product-intro-natural">

                <div class="product-intro-item-right">
                    <img class="wow bounceInLeft" data-wow-duration="3s" src="~/Content/assets/imgs/intro-natural.png">
                </div>
                <div class="product-intro-item-left">
                    <span>3</span>
                    <p class="product-intro-item-description">
                        <strong>
                            @Lang.Listening
                        </strong> - @Lang.ThisMethodHelpsImprovingYourSpekingSkill
                    </p>
                    <p>
                        <a target="_blank" href="/Listening">
                            + @Lang.LearningAboutThisMethod
                        </a>
                    </p>
                </div>
            </div>
        </div>


    </div>
    <div class="clearfix"></div>
    <div class="voca-dream">
        <div class="voca-dream-content">
            <div class="voca-dream-left">
                <h2>
                    @*Không Ngôn Ngữ*@
                    MEDU MakesYourDreamComeTrue
                </h2>
            </div>
            <div class="voca-dream-right">
                <img src="~/Content/assets/imgs/balloon.svg" />
            </div>
            <div class="clearfix"></div>
        </div>

    </div>

</div><!--end three-step-learn-english-->

<div class="container-fluid" id="register">
    <div class="row img-clould">
        <img src="~/Content/assets/imgs/home-cloud-center.svg" alt="" />
    </div>
    <div class="row" align="center" id="register-box">
        <img class="wow zoomIn" data-wow-duration="2s" src="~/Content/assets/imgs/home-voca.png" /><br />
        <div id="register-main">
            <p id="title-register">
                @Lang.DoYouWantToGoodAtEnglish
            </p>
            <p id="content-register">
                @Lang.LetsRegisterToBecomeAMember
            </p>
        </div>
    </div>
</div><!--end community register-->
<!--Begin learning guide-->
<div class="modal fade" id="community-video-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 600px;">
        <div class="modal-content modal-popular">

            <div class="row modal-content-popular" style="margin-top: 0px;">
                <div class="col-xs-12">

                    <iframe width="100%" height="315" src="" frameborder="0" allowfullscreen></iframe>

                </div>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--End learning guide-->



<script>
    $(document).ready(function () {
        // Optimalisation: Store the references outside the event handler:
        var $window = $(window);
        var $panew = $('#page-home-top');
        var $panem = $('#page-home-m');

        function checkWidth() {
            var windowsize = $window.width();
            if (windowsize > 440) {
                //if the window is greater than 440px wide then turn on jScrollPane..
                $panew.css('display', '');
                $panem.css('display', 'none');
            } else {
                $panew.css('display', 'none');
                $panem.css('display', '');
            }
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });
</script>