@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using ClientDependency.Core
@using ClientDependency.Core.Mvc
@using AdoramaPix.Umbraco.Core.Models
@using AdoramaPix.Umbraco.Core.Utilities
@using AdoramaPix.Navigation.Clear;
@using Archetype.Models;
@using Archetype.Extensions;

@{
    Layout = "Master.cshtml";
    var globalSettings = Umbraco.ContentSingleAtXPath("//globalSettings");
    Html.RequiresJs(new JavascriptFile("~/Scripts/core/hoverIntent.js") { Priority = 3  });
    Html.RequiresJs(new JavascriptFile("~/Scripts/bookslanding/carousel.js") { Priority = 7  });
    Html.RequiresJs(new JavascriptFile("~/Scripts/jquery.touchSwipe.min.js") { Priority = 3  });

    Html.RequiresCss("~/css/InfoTip.css");
    Html.RequiresCss("~/css/adoramapix.ui.css");
    Html.RequiresCss("~/css/adoramapix.content.css");
    Html.RequiresCss("~/css/adoramapix.hacks.css");
    //Html.RequiresCss("~/css/adoramapix.landing.homepage.css");
    var sections = Model.Content.GetPropertyValue<ArchetypeModel>("homePageSection");
    if (sections == null)
    {
        sections = Model.Content.GetPropertyValue<ArchetypeModel>("sections");
    }
    var ogImage = Umbraco.Media(Umbraco.Field("opengraphMetaImage", recursive: true).ToString());
    var ogImg = "";
    if (ogImage != null)
    {
        ogImg = ogImage.Url;
    }
}
@section metaContent {
    <meta property="fb:admins" content="@globalSettings.GetPropertyValue("facebookMeatAdmins")" />
    <meta property="fb:app_id" content="@globalSettings.GetPropertyValue("facebookAppID")" />
    <meta property="og:type" content="@Umbraco.Field("opengraphMetaType", recursive: true)" />
    <meta property="og:title" content="@Umbraco.Field("opengraphMetaTitle", recursive: true)" />
    <meta property="og:site_name" content="@Umbraco.Field("opengraphMetaSiteName", recursive: true)" />
    <meta property="og:image" content="@ogImg" />
    <meta property="og:description" content="@Umbraco.Field("opengraphMetaDescription", recursive: true)" />
    <meta name="description" content="@Umbraco.Field("pixMetaDescription", recursive: true)" />
    <meta name="keywords" content="@Umbraco.Field("pixMetaKeywords", recursive: true)" />
    <meta name="viewport" content="@Umbraco.Field("pixMetaViewport", recursive: true)">
}
@section headContent{

}
<div id="home-banner">
</div>
@if (sections != null)
{
    @Html.RenderArchetypePartialsEx(sections)

}

@section footer{
    <link href="//fonts.googleapis.com/css?family=Lato:400,300,700" rel="stylesheet" type="text/css">
    <script src="//use.typekit.net/rqi6qdz.js" type="text/javascript"></script>
    <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
    <style type="text/css">
        #stripWrapper { height: 90px; }
    </style>

    <script type="text/javascript">
        /*String splited*/
        function cutLongString(element, count_lit, light) {
            var text = element.html();
            var all_len = text.length;
            var new_text;

            if (all_len > count_lit) {
                new_text = text.substr(0, (count_lit - 3)) + '...';
                if (light) {
                    var first_part_text = new_text.substr(0, (count_lit - 10));
                    var light_part_text = new_text.substr((count_lit - 10), count_lit);
                    var light_text = "";
                    var array_color = ["#8D8D8D", "#8D8D8D", "#8D8D8D", "#8D8D8D", "#848484", "#949494", "#a4a4a4", "#b4b4b4", "#c4c4c4", "#d4d4d4"];
                    for (var i = 0; i < 10; i++) {
                        light_text += "<span style='color: " + array_color[i] + "'>" + light_part_text.substr(i, 1) + "</span>";
                    }
                    new_text = first_part_text + light_text;
                }
                element.html(new_text);
            }
        }

        function onBannerClick(flag, url) {
            if (flag) {
                if (url && url.length > 0) {
                    window.location = url;
                } else {
                    showLoginPopup(window.location);
                }
            }
        }

        $(document).ready(function () {
 var queryParams = (function () {
                var url = window.location.toString();
                url.match(/\?(.+)$/);
                var params = RegExp.$1;
                var params = params.split("&");
                var queryStringList = {};

                for (var i = 0; i < params.length; i++) {
                    var tmp = params[i].split("=");
                    queryStringList[tmp[0]] = unescape(tmp[1]);
                }
                return queryStringList;
            })();

            if (queryParams.NextPage) {
                showLoginPopup(queryParams.NextPage);
            }
            else if (queryParams.Referral)
            {
                showRegisterPopup(null, queryParams.Referral);
            }

            $('.card .card--text p').each(function () {
                cutLongString($(this), 85, true);
            });


            var $document = $(document),
            $body = $('body'),

            // js events fired when animations end
            animationEnd = "animationend webkitAnimationEnd oanimationend MSAnimationEnd",
            transitionEnd = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend";


            mfh.apix.CarouselsInstance = new mfh.apix.Carousel();
            mfh.apix.CarouselsInstance.init();
            (function () {

                var $extra = $('#hero-carousel-extra'),
                    biggerHeight = 0,
                    loop = true,
                    timer = null,
                    animTimer = null,
                    heroCarousel = function (index) {
                        var $this = $(this),
                            $pages = $this.children(),
                            len = $pages.length,
                            $this = $(this);

                        createNav($this, len, $this);

                        select($this, 0, loop);
                    },

                    createNav = function ($el, len, $this) {

                        var $nav = $el.next('nav'),
                            $as;

                        $this.swipe({
                            swipeLeft: function (event, direction, distance, duration, fingerCount) {
                                var index = $nav.find('a.active').index() - 1;
                                select($el, index, false);
                            },
                            swipeRight: function (event, direction, distance, duration, fingerCount) {
                                var index = $nav.find('a.active').index();
                                var len = $this.children().length;
                                select($el, index !== len - 1 ? index + 1 : 0, false);
                            },
                            threshold: 30
                        });


                        $nav.addClass('nav--carousel');

                        for (var i = 0; i < len; i++) {
                           $nav.append('<a href="page-' + i + '"></a>');
                        }

                        $nav.css({
                            'margin-left': -($nav.width() / 2) + 'px'
                        })

                        $as = $nav.find('a');

                        $as.on('click', function (e) {

                            e.preventDefault();

                            var $this = $(this),
                                index = $as.index($this[0]),
                                disabled = $this.attr('disabled');

                            if (disabled === undefined) {
                                loop = false;
                                select($el, index, loop);
                            }
                        });

                    },

                    select = function ($carousel, index, loop) {

                        var $pages = $carousel.children(),
                            len = $pages.length,
                            $page = $($carousel.children().get(index)),
                            $active = $pages.filter('.active'),
                            $nav = $carousel.next('nav'),
                            $navItems = $nav.children(),
                            $navItemsToActive = $($navItems.get(index)),
                            $extras = $extra.children(),
                            $extraPage = $($extras.get(index));
                        $blueBox = $(".b-start-book__content");
                        $bookStart = $("#start-book");

                        if (timer)
                            clearTimeout(timer);

                        if ($active == $page)
                            return;

                        $active.css({
                            'z-index': 1
                        });

                        $page.css({
                            'z-index': 2
                        });

                        if ($extraPage.hasClass("disabled")) {
                            if (!$blueBox.hasClass("disabled")) {
                                $blueBox.addClass("disabled")
                            }
                        } else {
                            if ($blueBox.hasClass("disabled")) {
                                $blueBox.removeClass("disabled");
                            }
                        }

                        if ($extraPage.attr("data-url") != undefined) {
                            if (!$bookStart.hasClass("clickable")) {
                                $bookStart.addClass("clickable")
                            }

                            $bookStart
                                .off("click")
                                .on("click", function () {
                                    onBannerClick(true, $extraPage.data("url"));
                                });
                        } else {
                            if ($bookStart.hasClass("clickable")) {
                                $bookStart.removeClass("clickable");
                            }
                            $bookStart.off("click");
                        }

                        $navItems.removeClass('active').attr("disabled", true);
                        setTimeout(function () {
                            $navItemsToActive.addClass('active');
                        }, 0);


                        $extras.removeClass('active').css({ 'z-index': 1 });

                        $page.one(transitionEnd, function (e) {
                            $navItems.attr("disabled", false);
                        });

                        $active.removeClass('active');
                        $page.addClass('active');

                        setTimeout(function () {
                            $extraPage.css({ 'z-index': 2 }).addClass('active');
                            $navItems.attr("disabled", false);
                            $navItemsToActive.addClass('active');
                        }, 250);

                        if (loop) {
                            timer = setTimeout(function () {
                                select($carousel, index !== len - 1 ? index + 1 : 0, loop);
                            }, 10000);
                        }
                    };

                $('.ui--carousel').each(heroCarousel);

                $extra.find('.carousel--page').each(function () {

                    var $this = $(this),
                        height = $this.outerHeight();

                    if (height > biggerHeight)
                        biggerHeight = height;

                });

                $extra.height(biggerHeight);

                if ($('.nav--carousel a').length == 1) {
                    $('.nav--carousel').hide();
                }

                //For banners

            }());

            $(".nav--carousel > a").bind('click', function () {
                $('.wrp-banner .start-banner, .wrp-banner .button').css({ 'visibility': 'hidden', 'opacity': '0' });
            });

            /*show hide banner*/
            $('.switch-button').hide();
            setTimeout(function () {
                $('.wrp-banner .button').css({ 'visibility': 'visible', 'opacity': '1' });
            }, 10);
            setTimeout(function () {
                $('.switch-button').show();
                $('.wrp-banner .start-banner, .wrp-banner .button').css({ 'visibility': 'hidden', 'opacity': '0' });
            }, 15000);

        });

        WebFontConfig = {
            google: { families: ['Lato:400,300,700'] },
            active: function () {
                $(this).css('height', '100.01%');
                $(this).css('height', 'auto');
            }
        };

        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	                '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);

            var location = 1;
            var divID = 'home-banner';
            var host = '@Url.Content("~/")';

            $.get(host + 'app/webapi/generator/' + location + '/banner.js?t=' + Math.random(), function (data) {
                $("#" + divID).html(data);
            });
        })();
    </script>
}