kiosk.js

/* - */
'use strict';
var amtMaps     = MapArray.length;
var icon        = "fa fa-circle-o";
var iconActive  = "fa fa-circle";
MapArray.forEach( function ( floor ) {
    var switches        = document.getElementById( 'switches' );
    var maps            = document.getElementById( 'maps_container' );
    var z               = MapArray.indexOf( floor );
    var listItem        = document.createElement( 'li' );
    var content         = document.createElement( 'i' );
    var map_img         = document.createElement( 'img' );
    content.className   = icon;
    content.onclick     = function () { setState( floor ); };
    content.id          = '__icon_' + z;
    listItem.appendChild( content );
    switches.appendChild( listItem );
    map_img.src             = floor.image;
    map_img.id              = '__floor_' + z;
    map_img.title           = floor.name;
    map_img.zIndex          = z + 1;
    map_img.style.bottom    = ( z * 5 ) + '%';
    maps.appendChild( map_img );
} );
setState( MapArray[0] );
function setState ( floor ) {
    var title       = document.getElementById( 'title' );
    title.innerHTML = '<h3>' + floor.name + '</h3>';
    var floorIndex  = MapArray.indexOf( floor );
    MapArray.forEach( function( f ) {
        var current = MapArray.indexOf( f );
        var img     = document.getElementById( '__floor_' + current );
        if( floorIndex < current ) {
            img.style.bottom = '100%';
        }
        else {
            img.style.bottom = ( current * 5 ) + '%';
        }
    } );
    for( var x = 0; x < amtMaps; x++) {
        var currentIcon = document.getElementById( '__icon_' + x );
        if( x == floorIndex ) {
            currentIcon.className = iconActive;
        }
        else {
            currentIcon.className = icon;
        }
    }
}