{% extends 'base.html.twig' %}

{% block title %}IntraCrane{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/fullpage.css') }}">
{% endblock %}
{% block body %}
    <div class="submenu fp-navPer">
        <ul class="links_section">
            <li class="select"  id="lnk_section0"><a href="#" data-scroll="section0" class="pdtmenu select">IntraFlow</a></li><!--
            --><li  id="lnk_section1"><a href="#" id="was_is" data-scroll="section1" class="pdtmenu"  >What's IntraFlow</a></li><!--
            --><li  id="lnk_section2"><a href="#" data-scroll="section2" class="pdtmenu" >Extensions</a></li>
        </ul>
    </div>
    <div class="kontaktPOP">
        <!--<div class="kontaktMenu" onclick="showKontakt()"><img src="<?php echo URL_LOCAL; ?>img/icon_form.png" alt="<?php echo DIREKTKONTAKT; ?>"><span><?php echo DIREKTKONTAKT; ?></span></div>-->
    </div>
    <div class="containerHome submain fpContainer">
        <div id="fullpage" style="position:relative;">
            <div class="section " id="section0"> 
                <input type="hidden" name="section0_pos" id="section0_pos">
                <div class="image_section intracrane-bg2 drop-shadow">
                </div>
                <div class="shadowCurve1"></div>
                <div class="bottom_msg"><table><tr><td>IntraFlow</td></tr></table></div>

            </div>
            <div class="section" id="section1">
                <input type="hidden" name="section1_pos" id="section1_pos">
                <div id="sl0" class="slide active sf-slides">
                    <div class="moduleIzq">
                        <div class="contIzq">
                            <div class="content_paragraph">
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                                <h2>IntraFlow</h2>
                                <p>
                                    IntraFlow administriert IntraCrane und stellt für andere Peripherien anlagenspezifische Schnittstellen bereit. Dies ermöglicht eine einheitliche Administrierung aller am Prozess beteiligten Komponenten und machte eine Prozessverknüpfung einfacher. Ein Materialfluss über verschieden Aggregate und Softwarelösungen hinweg kann so einheitlich erfasst, abgebildet und gesteuert werden. Statt individuellen Schnittstellen zwischen den einzelnen Gewerken, benötigt jede Komponente nur eine Schnittstelle zu IntraFlow.
                                </p>
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                            </div>
                        </div>
                        <div class="contDer">
                            <div class="sliderFP sl2">
                                <div>
                                    <div class="imgSlider" style="display: block;">
                                        <img src="{{ asset('img/intraflow/intraflow.png') }}" title="IntraFlow" style="max-height:450px;" alt="IntraFlow" class="imgDer">
                                    </div>
                                </div>
                            </div>
                            <div class="navSlider">
                                <span id="frame1sl2" class="pointNav select"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <nav class="slideA nav-circlepop">
                </nav>
                <div class="navFooter" data-desp="0">
                    <span id="nfoot0" class="navFoot select" data-desp="0">&nbsp;</span>
                    <input class="desp" type="hidden" value="0">
                </div>
            </div>
            <div class="section" id="section2">
                <input type="hidden" name="section2_pos" id="section2_pos">
                <div id="sl11" class="slide active sf-slides">
                    <div class="moduleIzq">
                        <div class="contIzq">
                            <div class="content_paragraph FP_paragraph">
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                                <h2>IntraCrane</h2>
                                <p>
                                    Die Lösung für Ihre Krananlage. Von der klassischen Lagerverwaltung bis zur Industrie 4.0 – Verwaltungsschale für Ihren Kran, IntraCrane bietet Lösungen die das komplette Spektrum abdecken können. Dabei sehen wir die Lagerverwaltung als festen Bestandteil von IntraCrane und finden zunehmend mehr Aufgabenfelder in der Vernetzung mit vor- oder nachgelagerten Prozessen und Anlagen.<br>
                                    <br>
                                    IntraFlow administriert IntraCrane vollständig. Eine andere Möglichkeit IntraCrane zu konfigurieren als über IntraFlow ist über die bestehende API-Schnittstelle möglich, ist von Haus aus aber nicht angedacht.
                                </p>
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                            </div>
                        </div>
                        <div class="contDer">
                            <div class="sliderFP s31">
                                <div style="height:550px;">
                                    <div class="imgSlider" style="display: block; width:100%;">
                                        <img src="{{ asset('img/intraflow/intracrane_logo.png') }}" alt="IntraCrane" title="IntraCrane" style="max-width:54%;" class="w60 imgDer">
                                    </div>
                                </div>
                            </div>
                            <div class="navSlider">
                                <span id="frame1s31" class="pointNav select"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="sl12" class="slide sf-slides">
                    <div class="moduleIzq">
                        <div class="contIzq">
                            <div class="content_paragraph FP_paragraph">
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                                <h2>FehrWMS</h2>
                                <p>
                                    Die Lagerverwaltungssoftware für ihr Hochregallager. fehr wms verwaltet Ihre Bestände im Langgutlager im Handumdrehen. Sägeprozesse, Chargen- und Restlängenverwaltung sind für uns keine Fremdwörter. Eine Menüführung über Touchdisplays, mobil über eine Tabletvariante oder klassisch über Tastatur und Maus, bei der Anpassung an ihr Hochregallager finden wir, von der Funktionalität bis zur Bedienung, mit Ihnen zusammen die passende Lösung. Auch die nachgelagerten Logistikprozesse sind problemlos integrierbar.<br>
                                    <br>
                                    IntraFlow kann alle Kontanten konfigurieren, die für die Einrichtung von fehrWMS nötig sind, den Anlagenstatus des Hochregallagers auslesen sowie Aufträge erstellen und updaten.<br>
                                    <br>
                                    Weitere Informationen zu FehrWMS erhalten Sie hier:<br>
                                <div align="center" class="logo_show">
                                    <a href="http://ottwms.de/" target="_blank"><img alt="FehrWMS" title="FehrWMS" width="50%" src="http://ottwms.de/img/logotipo.png"></a>
                                </div>
                                </p>
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                            </div>
                        </div>
                        <div class="contDer">
                            <div class="sliderFP s32">
                                <div style="height:550px;">
                                    <div class="imgSlider" style="display: block;width:100%;">
                                        <img src="{{ asset('img/intraflow/hochregallager-beschreibung.png') }}" alt="Hochregallager Beschreibung" title="Hochregallager Beschreibung" class=" imgDer">
                                    </div>
                                    <div class="imgSlider" style="width:100%;">
                                        <img src="{{ asset('img/intraflow/honeycomp.jpg') }}" alt="FehrWMS" title="FehrWMS" class="w80 imgDer">
                                    </div>
                                </div>
                            </div>
                            <div class="navSlider">
                                <span id="frame1s32" onclick="sliderInfo(1, 's32');" class="pointNav select"></span>
                                <span id="frame2s32" onclick="sliderInfo(2, 's32');" class="pointNav"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="sl13" class="slide sf-slides">
                    <div class="moduleIzq">
                        <div class="contIzq">
                            <div class="content_paragraph FP_paragraph">
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                                <h2>OptiCut</h2>
                                <p>
                                    OptiCut handhabt Schnittoptimierung sowie die Restlängen- und Restblechverwaltung. Sägen nahezu sämtlicher Hersteller können mit vollen Automationsgrad integriert werden.<br>
                                    <br>
                                    Die grafische Restlängenverwaltung unterstützt den Benutzer bei der Auswahl einer möglichst optimalen Restlänge für den Sägeauftrag. Hierbei werden Informationen wie z. B. ungünstige Restlänge (es entstehen durch den Sägeauftrag nicht handelsfähige Reststücke) direkt farblich auf dem Bildschirm visualisiert. Auch der Schneidspalt sowie die Schrottlänge kann vom System automatisch ermittelt werden. Der Hinweis über vorhandene Kopfschnitte gibt ebenfalls weitere Auskünfte. Gehrungsschnitte können verschaltet und in die Optimierung mit einbezogen werden.<br>
                                    <br>
                                    IntraFlow kann alle die Sägeparameter und Schnittfiguren konfigurieren, die für die Optimierung nötig sind, sowie Aufträge erstellen und updaten.<br>
                                    <br>
                                    Weitere Informationen zu OptiCut erhalten Sie hier:<br><br>
                                <div align="center" class="logo_show"><a href="http://ottwms.de/" target="_blank"><img width="" alt="OttWMS" src="http://ottwms.de/img/logotipo.png"></a></div>
                                </p>
                                <div class="top_down_legend">
                                    <img src="{{ asset('img/top_bottom.png') }}" class="w100" alt="DEFAULT_ALT">
                                </div>
                            </div>
                        </div>
                        <div class="contDer">
                            <div class="sliderFP s33">
                                <div style="height:445px;">
                                    <div class="imgSlider" style="display: block;width:100%;">
                                        <img src="{{ asset('img/intraflow/hochregallager-anbindung-säge.jpg') }}" alt="Hochregallager anbindung säge" title="Hochregallager anbindung säge" class="w80 imgDer">
                                    </div>
                                </div>
                            </div>
                            <div class="navSlider">
                                <span id="frame1s31" class="pointNav select"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <nav class="slideA nav-circlepop">
                    <a class="prev" data-dir="37">
                        <span class="icon-wrap"></span>
                    </a>
                    <a class="next" data-dir="39">
                        <span class="icon-wrap"></span>
                    </a>
                </nav>

                <div class="navFooter" data-desp="11">
                    <span id="nfoot11" class="navFoot select" data-desp="0">&nbsp;</span>
                    <span id="nfoot12" class="navFoot" data-desp="1">&nbsp;</span>
                    <span id="nfoot13" class="navFoot" data-desp="2">&nbsp;</span>
                    <input class="desp" type="hidden" value="0">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            if (window.widthWindow > 800) {
                var hash = window.location.hash;
                switch (hash) {
                    case '#Lagerverwaltung':
                    case '#LVS':
                    case '#Hochregallager':
                    case '#KVS':
                    case '#Automatisierung':
                    case '#Chargenverwaltung':
                    case '#MFS':
                    case '#Materialflusssystem':
                        $('.section').removeClass('active');
                        $('#section1').addClass('active');
                        break;
                    case '#Kassettenverwaltung':
                    case '#Handlingsysteme':
                    case '#Schnittoptimierung':
                    case '#Sageanbindung':
                        $('.section').removeClass('active');
                        $('#section2').addClass('active');
                        break;
                }
            }

            $(window).on("scroll", function () {
                if (window.widthWindow < 800) {
                    var pos = $(window).scrollTop();
                    pos = pos + 50;

                    var sec0 = $('#section0').position().top;
                    var sec1 = $('#section1').position().top;
                    var sec2 = $('#section2').position().top;
                    console.log(pos, sec2);

                    if (pos < sec1) {
                        $('.links_section > li').removeClass('select');
                        $('.links_section').find('a').removeClass('select');
                        $('#lnk_section0').addClass('select');
                        $('#lnk_section0').find('a').addClass('select');
                    } else if (pos >= sec1 && pos < sec2) {
                        $('.links_section  > li').removeClass('select');
                        $('.links_section').find('a').removeClass('select');
                        $('#lnk_section1').addClass('select');
                        $('#lnk_section1').find('a').addClass('select');
                    } else if (pos >= sec2) {
                        $('.links_section > li').removeClass('select');
                        $('.links_section').find('a').removeClass('select');
                        $('#lnk_section2').addClass('select');
                        $('#lnk_section2').find('a').addClass('select');
                    }
                }
            });

            console.log(window.widthWindow);
            if (window.widthWindow > 800) {
                $('#fullpage').fullpage({
                    navigation: false,
                    navigationPosition: 'right',
                    slidesNavigation: false,
                    slidesNavPosition: 'bottom',
                    responsiveWidth: 800,
                    numItems: 2
                });
            } else {
                $('.pdtmenu').click(function () {
                    console.log('test');
                    var target = "#" + $(this).attr('data-scroll');
                    $("a.pdtmenu").removeClass("select");
                    $(this).addClass("select");
                    $("a.pdtmenu").parent().removeClass("select");
                    $(this).parent().addClass("select");
                    var pos = $(target).offset().top - 130;
                    $('html, body').animate({
                        scrollTop: pos
                    }, 1000);
                });
            }
            if (window.widthWindow > 800) {
                var btn_press = '';
                switch (hash) {
                    case '#LVS':
                    case '#KVS':
                    case '#MFS':
                    case '#Materialflusssystem':
                        btn_press = 'nfoot1';
                        break;
                    case '#Kassettenverwaltung':
                        btn_press = 'nfoot14';
                        break;
                    case '#Chargenverwaltung':
                        btn_press = 'nfoot2';
                        break;
                    case '#Schnittoptimierung':
                    case '#Sageanbindung':
                        btn_press = 'nfoot12';
                        break;
                }

                if (hash != '' && hash != undefined) {
                    var delay = 1; //1 second
                    setTimeout(function () {
                        $('#' + btn_press).click();
                    }, delay);
                }
            }
        });

        function submenu(index) {
            if (!$('.imgDer').hasClass('act') && index === 1) {
                $('.contDer').fadeIn('slow', function () {
                    $('.imgDer').addClass('act');
                    $('.contIzq div').addClass('act');
                });
            }
            if (!$('.img1Izq').hasClass('act') && index === 3) {
                $('.cont1Izq').fadeIn('slow', function () {
                    $('.imgIzq').addClass('act');
                    $('.cont1Der > div').addClass('act');
                    $('.contIzq > div').addClass('act');
                });
            }
            if (!$('.logoinfoST p').hasClass('act') && index === 2) {
                $('.logoinfoST').fadeIn('slow', function () {
                    $('.logoinfoST p').addClass('act');
                    $('.msgST').addClass('act');
                });
            }
        }

        function animationUp() {
            if (!$('.imgDer').hasClass('act') && $('.fp-section.active').attr('id') === 'section2') {
                $('.contDer').fadeIn('slow', function () {
                    $('.imgDer').addClass('act');
                    $('.contIzq div').addClass('act');
                });
            }
            if (!$('.img1Izq').hasClass('act') && $('.fp-section.active').attr('id') === 'section4') {
                $('.cont1Izq').fadeIn('slow', function () {
                    $('.imgIzq').addClass('act');
                    $('.cont1Der > div').addClass('act');
                });
            }
            if (!$('.logoinfoST p').hasClass('act') && $('.fp-section.active').attr('id') === 'section3') {
                $('.logoinfoST').fadeIn('slow', function () {
                    $('.logoinfoST p').addClass('act');
                    $('.msgST').addClass('act');
                });
            }
        }
        function animationDown() {
            if (!$('.imgDer').hasClass('act') && $('.fp-section.active').attr('id') === 'section0') {
                $('.contDer').fadeIn('slow', function () {
                    $('.imgDer').addClass('act');
                    $('.contIzq div').addClass('act');
                });
            }
            if (!$('.img1Izq').hasClass('act') && $('.fp-section.active').attr('id') === 'section2') {
                $('.contDer').fadeIn('slow', function () {
                    $('.imgIzq').addClass('act');
                    $('.cont1Der > div').addClass('act');
                });
            }
            if (!$('.logoinfoST p').hasClass('act') && $('.fp-section.active').attr('id') === 'section1') {
                $('.logoinfoST').fadeIn('slow', function () {
                    $('.logoinfoST p').addClass('act');
                    $('.msgST').addClass('act');
                });
            }
        }
        var imgSld = 1;
        setInterval(function () {
            imgSld = imgSld + 1;
            if (imgSld >= 3)
                imgSld = 1;
        }, 4000);
    </script>
    <script id='code_1'>
        $(function () {
            //Enable swiping...
            $("#fullpage").swipe({
                //Generic swipe handler for all directions
                swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
                    console.log("You swiped " + direction);
                    var dir = 0;
                    if (direction == 'right') {
                        dir = 37;

                    } else if (direction == 'left') {
                        dir = 39;
                    }
                    if (dir > 0) {
                        var desp = $(".section.active .navFooter .desp").val();
                        desp = parseInt(desp);
                        slidesOtt(dir, desp);
                    }
                },
                //Default is 75px, set to 0 for demo so any distance triggers swipe
                threshold: 0
            });
        });
    </script>
{% endblock %}