{extend name="public/base" /}
{block name="title"}
{notempty name=":lang('aboutus_culture.title')"}<title>{:lang('aboutus_culture.title')}</title>
{else/}{__BLOCK__}{/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/aboutus_culture.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/animate.min.css" />
{/block}
{block name="main"}
<div class="culture_top">
    {notempty name="focus_image"}
    {notempty name="focus_image.link"}
    <a href="{$focus_image.link}">
        <img src="{$focus_image.image}" />
    </a>
    {else/}
    <img src="{$focus_image.image}" />
    {/notempty}
    {notempty name="culture"}
    <div class="culture_bril_con swt-Container">
        {volist name="culture" id="cul" offset="0" length="3"}
        <div class="culture_bril_div">
            <div class="iconimg"><img src="{$cul.image}" /></div>
            <div class="title">
                <p>{$cul.title}</p>
            </div>
            <div class="subtitle">{$cul.desc|raw}</div>
        </div>
        {/volist}
    </div>
    {/notempty}
</div>
{notempty name="culture"}
<div class="culture_vision">
    <div class="swt-Container">
        <div class="title">
            <!--Vision and Mission-->
        </div>
        {volist name="culture" id="cul" key="k" offset="3" mod="2"}
        {eq name="mod" value="1"}
        <div class="swt-Table img-responsive">
            <div id="tab{$k}" class="Table-Row">
                <div class="Table-Cell left"><img src="{$cul.image}" /></div>
                <div class="Table-Cell center"></div>
                <div class="Table-Cell right">
                    <p class="subtitle">{$cul.title}</p>
                    <p class="des">{$cul.desc|raw}</p>
                </div>
            </div>
        </div>
        {else /}
        <div class="swt-Table img-responsive culture_vision_02">
            <div id="tab{$k}" class="Table-Row">
                <div class="Table-Cell left">
                    <p class="subtitle">{$cul.title}</p>
                    <p class="des">{$cul.desc|raw}</p>
                </div>
                <div class="Table-Cell center"></div>
                <div class="Table-Cell right"><img src="{$cul.image}" /></div>
            </div>
        </div>
        {/eq}
        {/volist}
    </div>
</div>
{/notempty}
{/block}
{block name="script"}
<script type="text/javascript">
    $(document).ready(function() {
        $('.culture_bril_div').addClass('animated fadeInUp');

        var myelement = $('#tab1'); // the element to act on if viewable
        goScroll(myelement);
        var myelement2 = $('#tab2'); // the element to act on if viewable
        goScroll(myelement2);
        var myelement3 = $('#tab3'); // the element to act on if viewable
        goScroll(myelement3);

        function goScroll(obj){
            $(window).scroll(function() {
                if(isScrolledIntoView(obj)) {
                    $(obj).find('.left').addClass('animated fadeInLeft');
                    $(obj).find('.right').addClass('animated fadeInRight');
                } 
            });
        }

        function isScrolledIntoView(elem) {
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();
            return (elemTop <= docViewBottom);
        }
    });
</script>
{/block}