<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 1920 – 1</title>
<style id="applicationStylesheet" type="text/css">
.mediaViewInfo {
--web-view-name: Web 1920 – 1;
--web-view-id: Web_1920__1;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
:root {
--web-view-ids: Web_1920__1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
}
#Web_1920__1 {
position: absolute;
width: 1920px;
height: 1519px;
background-color: rgba(255,255,255,1);
overflow: hidden;
--web-view-name: Web 1920 – 1;
--web-view-id: Web_1920__1;
--web-scale-on-resize: true;
--web-enable-deep-linking: true;
}
@keyframes fadein {

0% {
opacity: 0;
}
100% {
opacity: 1;
}

}
#Rectangle_1 {
fill: rgba(255,255,255,1);
stroke: rgba(112,112,112,1);
stroke-width: 1px;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-miterlimit: 4;
shape-rendering: auto;
}
.Rectangle_1 {
position: absolute;
overflow: visible;
width: 1920px;
height: 2175px;
left: 0px;
top: 0px;
}
#dw24-tiger-ning-03-bamboo_2 {
opacity: 0.75;
position: absolute;
width: 1920px;
height: 1522.5px;
left: 0px;
top: 0px;
overflow: visible;
}
#Rectangle_2 {
opacity: 0.75;
fill: rgba(255,255,255,1);
}
.Rectangle_2 {
position: absolute;
overflow: visible;
width: 1920px;
height: 106px;
left: 0px;
top: 193px;
}
#About {
left: 100px;
top: 223px;
position: absolute;
overflow: visible;
width: 109px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: Web_1920___2.html;
cursor: pointer;
text-align: center;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: rgba(112,112,112,1);
}
#Products {
left: 774px;
top: 224px;
position: absolute;
overflow: visible;
width: 163px;
white-space: nowrap;
text-align: center;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: rgba(112,112,112,1);
}
#Meet_The_Team {
left: 335px;
top: 224px;
position: absolute;
overflow: visible;
width: 275px;
white-space: nowrap;
--web-animation: fadein 0.3s ease-out;
--web-action-type: page;
--web-action-target: Artboard___1.html;
cursor: pointer;
text-align: center;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: rgba(112,112,112,1);
}
#Blog {
left: 1124px;
top: 223px;
position: absolute;
overflow: visible;
width: 83px;
white-space: nowrap;
text-align: center;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: rgba(112,112,112,1);
}
#AHN {
left: 1392px;
top: 224px;
position: absolute;
overflow: visible;
width: 85px;
white-space: nowrap;
text-align: center;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: rgba(112,112,112,1);
}
#Contact_Us {
left: 1635px;
top: 224px;
position: absolute;
overflow: visible;
width: 203px;
white-space: nowrap;
text-align: center;
font-family: Helvetica Neue;
font-style: normal;
font-weight: normal;
font-size: 40px;
color: rgba(112,112,112,1);
}
</style>
<script id="applicationScript">
///////////////////////////////////////
// INITIALIZATION
///////////////////////////////////////

/**
* Functionality for scaling, showing by media query, and navigation between multiple pages on a single page.
* Code subject to change.
**/

if (window.console==null) { window["console"] = { log : function() {} } }; // some browsers do not set console

var Application = function() {
// event constants
this.prefix = "--web-";
this.NAVIGATION_CHANGE = "viewChange";
this.VIEW_NOT_FOUND = "viewNotFound";
this.VIEW_CHANGE = "viewChange";
this.VIEW_CHANGING = "viewChanging";
this.STATE_NOT_FOUND = "stateNotFound";
this.APPLICATION_COMPLETE = "applicationComplete";
this.APPLICATION_RESIZE = "applicationResize";
this.SIZE_STATE_NAME = "data-is-view-scaled";
this.STATE_NAME = this.prefix + "state";

this.lastTrigger = null;
this.lastView = null;
this.lastState = null;
this.lastOverlay = null;
this.currentView = null;
this.currentState = null;
this.currentOverlay = null;
this.currentQuery = {index: 0, rule: null, mediaText: null, id: null};
this.inclusionQuery = "(min-width: 0px)";
this.exclusionQuery = "none and (min-width: 99999px)";
this.LastModifiedDateLabelName = "LastModifiedDateLabel";
this.viewScaleSliderId = "ViewScaleSliderInput";
this.pageRefreshedName = "showPageRefreshedNotification";
this.applicationStylesheet = null;
this.mediaQueryDictionary = {};
this.viewsDictionary = {};
this.addedViews = [];
this.views = {};
this.viewIds = [];
this.viewQueries = {};
this.overlays = {};
this.overlayIds = [];
this.numberOfViews = 0;
this.verticalPadding = 0;
this.horizontalPadding = 0;
this.stateName = null;
this.viewScale = 1;
this.viewLeft = 0;
this.viewTop = 0;
this.horizontalScrollbarsNeeded = false;
this.verticalScrollbarsNeeded = false;

// view settings
this.showUpdateNotification = false;
this.showNavigationControls = false;
this.scaleViewsToFit = false;
this.scaleToFitOnDoubleClick = false;
this.actualSizeOnDoubleClick = false;
this.scaleViewsOnResize = false;
this.navigationOnKeypress = false;
this.showViewName = false;
this.enableDeepLinking = true;
this.refreshPageForChanges = false;
this.showRefreshNotifications = true;

// view controls
this.scaleViewSlider = null;
this.lastModifiedLabel = null;
this.supportsPopState = false; // window.history.pushState!=null;
this.initialized = false;

// refresh properties
this.refreshDuration = 250;
this.lastModifiedDate = null;
this.refreshRequest = null;
this.refreshInterval = null;
this.refreshContent = null;
this.refreshContentSize = null;
this.refreshCheckContent = false;
this.refreshCheckContentSize = false;

var self = this;

self.initialize = function(event) {
var view = self.getVisibleView();
var views = self.getVisibleViews();
if (view==null) view = self.getInitialView();
self.collectViews();
self.collectOverlays();
self.collectMediaQueries();

for (let index = 0; index < views.length; index++) {
var view = views[index];
self.setViewOptions(view);
self.setViewVariables(view);
self.centerView(view);
}

// sometimes the body size is 0 so we call this now and again later
if (self.initialized) {
window.addEventListener(self.NAVIGATION_CHANGE, self.viewChangeHandler);
window.addEventListener("keyup", self.keypressHandler);
window.addEventListener("keypress", self.keypressHandler);
window.addEventListener("resize", self.resizeHandler);
window.document.addEventListener("dblclick", self.doubleClickHandler);

if (self.supportsPopState) {
window.addEventListener('popstate', self.popStateHandler);
}
else {
window.addEventListener('hashchange', self.hashChangeHandler);
}

// we are ready to go
window.dispatchEvent(new Event(self.APPLICATION_COMPLETE));
}

if (self.initialized==false) {
if (self.enableDeepLinking) {
self.syncronizeViewToURL();
}

if (self.refreshPageForChanges) {
self.setupRefreshForChanges();
}

self.initialized = true;
}

if (self.scaleViewsToFit) {
self.viewScale = self.scaleViewToFit(view);

if (self.viewScale<0) {
setTimeout(self.scaleViewToFit, 500, view);
}
}
else if (view) {
self.viewScale = self.getViewScaleValue(view);
self.centerView(view);
self.updateSliderValue(self.viewScale);
}
else {
// no view found
}

if (self.showUpdateNotification) {
self.showNotification();
}

//"addEventListener" in window ? null : window.addEventListener = window.attachEvent;
//"addEventListener" in document ? null : document.addEventListener = document.attachEvent;
}


///////////////////////////////////////
// AUTO REFRESH
///////////////////////////////////////

self.setupRefreshForChanges = function() {
self.refreshRequest = new XMLHttpRequest();

if (!self.refreshRequest) {
return false;
}

// get document start values immediately
self.requestRefreshUpdate();
}

/**
* Attempt to check the last modified date by the headers
* or the last modified property from the byte array (experimental)
**/
self.requestRefreshUpdate = function() {
var url = document.location.href;
var protocol = window.location.protocol;
var method;

try {

if (self.refreshCheckContentSize) {
self.refreshRequest.open('HEAD', url, true);
}
else if (self.refreshCheckContent) {
self.refreshContent = document.documentElement.outerHTML;
self.refreshRequest.open('GET', url, true);
self.refreshRequest.responseType = "text";
}
else {

// get page last modified date for the first call to compare to later
if (self.lastModifiedDate==null) {

// File system does not send headers in FF so get blob if possible
if (protocol=="file:") {
self.refreshRequest.open("GET", url, true);
self.refreshRequest.responseType = "blob";
}
else {
self.refreshRequest.open("HEAD", url, true);
self.refreshRequest.responseType = "blob";
}

self.refreshRequest.onload = self.refreshOnLoadOnceHandler;

// In some browsers (Chrome & Safari) this error occurs at send:
//
// Chrome - Access to XMLHttpRequest at 'file:///index.html' from origin 'null'
// has been blocked by CORS policy:
// Cross origin requests are only supported for protocol schemes:
// http, data, chrome, chrome-extension, https.
//
// Safari - XMLHttpRequest cannot load file:///Users/user/Public/index.html. Cross origin requests are only supported for HTTP.
//
// Solution is to run a local server, set local permissions or test in another browser
self.refreshRequest.send(null);

// In MS browsers the following behavior occurs possibly due to an AJAX call to check last modified date:
//
// DOM7011: The code on this page disabled back and forward caching.

// In Brave (Chrome) error when on the server
// index.js:221 HEAD https://www.example.com/ net::ERR_INSUFFICIENT_RESOURCES
// self.refreshRequest.send(null);

}
else {
self.refreshRequest = new XMLHttpRequest();
self.refreshRequest.onreadystatechange = self.refreshHandler;
self.refreshRequest.ontimeout = function() {
self.log("Couldn't find page to check for updates");
}

var method;
if (protocol=="file:") {
method = "GET";
}
else {
method = "HEAD";
}

//refreshRequest.open('HEAD', url, true);
self.refreshRequest.open(method, url, true);
self.refreshRequest.responseType = "blob";
self.refreshRequest.send(null);
}
}
}
catch (error) {
self.log("Refresh failed for the following reason:")
self.log(error);
}
}

self.refreshHandler = function() {
var contentSize;

try {

if (self.refreshRequest.readyState === XMLHttpRequest.DONE) {

if (self.refreshRequest.status === 2 ||
self.refreshRequest.status === 200) {
var pageChanged = false;

self.updateLastModifiedLabel();

if (self.refreshCheckContentSize) {
var lastModifiedHeader = self.refreshRequest.getResponseHeader("Last-Modified");
contentSize = self.refreshRequest.getResponseHeader("Content-Length");
//lastModifiedDate = refreshRequest.getResponseHeader("Last-Modified");
var headers = self.refreshRequest.getAllResponseHeaders();
var hasContentHeader = headers.indexOf("Content-Length")!=-1;

if (hasContentHeader) {
contentSize = self.refreshRequest.getResponseHeader("Content-Length");

// size has not been set yet
if (self.refreshContentSize==null) {
self.refreshContentSize = contentSize;
// exit and let interval call this method again
return;
}

if (contentSize!=self.refreshContentSize) {
pageChanged = true;
}
}
}
else if (self.refreshCheckContent) {

if (self.refreshRequest.responseText!=self.refreshContent) {
pageChanged = true;
}
}
else {
lastModifiedHeader = self.getLastModified(self.refreshRequest);

if (self.lastModifiedDate!=lastModifiedHeader) {
self.log("lastModifiedDate:" + self.lastModifiedDate + ",lastModifiedHeader:" +lastModifiedHeader);
pageChanged = true;
}

}


if (pageChanged) {
clearInterval(self.refreshInterval);
self.refreshUpdatedPage();
return;
}

}
else {
self.log('There was a problem with the request.');
}

}
}
catch( error ) {
//console.log('Caught Exception: ' + error);
}
}

self.refreshOnLoadOnceHandler = function(event) {

// get the last modified date
if (self.refreshRequest.response) {
self.lastModifiedDate = self.getLastModified(self.refreshRequest);

if (self.lastModifiedDate!=null) {

if (self.refreshInterval==null) {
self.refreshInterval = setInterval(self.requestRefreshUpdate, self.refreshDuration);
}
}
else {
self.log("Could not get last modified date from the server");
}
}
}

self.refreshUpdatedPage = function() {
if (self.showRefreshNotifications) {
var date = new Date().setTime((new Date().getTime()+10000));
document.cookie = encodeURIComponent(self.pageRefreshedName) + "=true" + "; max-age=6000;" + " path=/";
}

document.location.reload(true);
}

self.showNotification = function(duration) {
var notificationID = self.pageRefreshedName+"ID";
var notification = document.getElementById(notificationID);
if (duration==null) duration = 4000;

if (notification!=null) {return;}

notification = document.createElement("div");
notification.id = notificationID;
notification.textContent = "PAGE UPDATED";
var styleRule = ""
styleRule = "position: fixed; padding: 7px 16px 6px 16px; font-family: Arial, sans-serif; font-size: 10px; font-weight: bold; left: 50%;";
styleRule += "top: 20px; background-color: rgba(0,0,0,.5); border-radius: 12px; color:rgb(235, 235, 235); transition: all 2s linear;";
styleRule += "transform: translateX(-50%); letter-spacing: .5px; filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .1))";
notification.setAttribute("style", styleRule);

notification.className= "PageRefreshedClass";

document.body.appendChild(notification);

setTimeout(function() {
notification.style.opacity = "0";
notification.style.filter = "drop-shadow( 0px 0px 0px rgba(0,0,0, .5))";
setTimeout(function() {
notification.parentNode.removeChild(notification);
}, duration)
}, duration);

document.cookie = encodeURIComponent(self.pageRefreshedName) + "=; max-age=1; path=/";
}

/**
* Get the last modified date from the header
* or file object after request has been received
**/
self.getLastModified = function(request) {
var date;

// file protocol - FILE object with last modified property
if (request.response && request.response.lastModified) {
date = request.response.lastModified;
}

// http protocol - check headers
if (date==null) {
date = request.getResponseHeader("Last-Modified");
}

return date;
}

self.updateLastModifiedLabel = function() {
var labelValue = "";

if (self.lastModifiedLabel==null) {
self.lastModifiedLabel = document.getElementById("LastModifiedLabel");
}

if (self.lastModifiedLabel) {
var seconds = parseInt(((new Date().getTime() - Date.parse(document.lastModified)) / 1000 / 60) * 100 + "");
var minutes = 0;
var hours = 0;

if (seconds < 60) {
seconds = Math.floor(seconds/10)*10;
labelValue = seconds + " seconds";
}
else {
minutes = parseInt((seconds/60) + "");

if (minutes>60) {
hours = parseInt((seconds/60/60) +"");
labelValue += hours==1 ? " hour" : " hours";
}
else {
labelValue = minutes+"";
labelValue += minutes==1 ? " minute" : " minutes";
}
}

if (seconds<10) {
labelValue = "Updated now";
}
else {
labelValue = "Updated " + labelValue + " ago";
}

if (self.lastModifiedLabel.firstElementChild) {
self.lastModifiedLabel.firstElementChild.textContent = labelValue;

}
else if ("textContent" in self.lastModifiedLabel) {
self.lastModifiedLabel.textContent = labelValue;
}
}
}

self.getShortString = function(string, length) {
if (length==null) length = 30;
string = string!=null ? string.substr(0, length).replace(/\n/g, "") : "[String is null]";
return string;
}

self.getShortNumber = function(value, places) {
if (places==null || places<1) places = 4;
value = Math.round(value * Math.pow(10,places)) / Math.pow(10, places);
return value;
}

///////////////////////////////////////
// NAVIGATION CONTROLS
///////////////////////////////////////

self.updateViewLabel = function() {
var viewNavigationLabel = document.getElementById("ViewNavigationLabel");
var view = self.getVisibleView();
var viewIndex = view ? self.getViewIndex(view) : -1;
var viewName = view ? self.getViewPreferenceValue(view, self.prefix + "view-name") : null;
var viewId = view ? view.id : null;

if (viewNavigationLabel && view) {
if (viewName && viewName.indexOf('"')!=-1) {
viewName = viewName.replace(/"/g, "");
}

if (self.showViewName) {
viewNavigationLabel.textContent = viewName;
self.setTooltip(viewNavigationLabel, viewIndex + 1 + " of " + self.numberOfViews);
}
else {
viewNavigationLabel.textContent = viewIndex + 1 + " of " + self.numberOfViews;
self.setTooltip(viewNavigationLabel, viewName);
}

}
}

self.updateURL = function(view) {
view = view == null ? self.getVisibleView() : view;
var viewId = view ? view.id : null
var viewFragment = view ? "#"+ viewId : null;

if (viewId && self.viewIds.length>1 && self.enableDeepLinking) {

if (self.supportsPopState==false) {
self.setFragment(viewId);
}
else {
if (viewFragment!=window.location.hash) {

if (window.location.hash==null) {
window.history.replaceState({name:viewId}, null, viewFragment);
}
else {
window.history.pushState({name:viewId}, null, viewFragment);
}
}
}
}
}

self.updateURLState = function(view, stateName) {
stateName = view && (stateName=="" || stateName==null) ? self.getStateNameByViewId(view.id) : stateName;

if (self.supportsPopState==false) {
self.setFragment(stateName);
}
else {
if (stateName!=window.location.hash) {

if (window.location.hash==null) {
window.history.replaceState({name:view.viewId}, null, stateName);
}
else {
window.history.pushState({name:view.viewId}, null, stateName);
}
}
}
}

self.setFragment = function(value) {
window.location.hash = "#" + value;
}

self.setTooltip = function(element, value) {
// setting the tooltip in edge causes a page crash on hover
if (/Edge/.test(navigator.userAgent)) { return; }

if ("title" in element) {
element.title = value;
}
}

self.getStylesheetRules = function(styleSheet) {
try {
if (styleSheet) return styleSheet.cssRules || styleSheet.rules;

return document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
}
catch (error) {
// ERRORS:
// SecurityError: The operation is insecure.
// Errors happen when script loads before stylesheet or loading an external css locally

// InvalidAccessError: A parameter or an operation is not supported by the underlying object
// Place script after stylesheet

console.log(error);
if (error.toString().indexOf("The operation is insecure")!=-1) {
console.log("Load the stylesheet before the script or load the stylesheet inline until it can be loaded on a server")
}
return [];
}
}

/**
* If single page application hide all of the views.
* @param {Number} selectedIndex if provided shows the view at index provided
**/
self.hideViews = function(selectedIndex, animation) {
var rules = self.getStylesheetRules();
var queryIndex = 0;
var numberOfRules = rules!=null ? rules.length : 0;

// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
var rule = rules[i];

if (rule.media!=null) {

if (queryIndex==selectedIndex) {
self.currentQuery.mediaText = rule.conditionText;
self.currentQuery.index = selectedIndex;
self.currentQuery.rule = rule;
self.enableMediaQuery(rule);
}
else {
if (animation) {
self.fadeOut(rule)
}
else {
self.disableMediaQuery(rule);
}
}

queryIndex++;
}
}

self.numberOfViews = queryIndex;
self.updateViewLabel();
self.updateURL();

self.dispatchViewChange();

var view = self.getVisibleView();
var viewIndex = view ? self.getViewIndex(view) : -1;

return viewIndex==selectedIndex ? view : null;
}

/**
* Hide view
* @param {Object} view element to hide
**/
self.hideView = function(view) {
var rule = view ? self.mediaQueryDictionary[view.id] : null;

if (rule) {
self.disableMediaQuery(rule);
}
}

/**
* Hide overlay
* @param {Object} overlay element to hide
**/
self.hideOverlay = function(overlay) {
var rule = overlay ? self.mediaQueryDictionary[overlay.id] : null;

if (rule) {
self.disableMediaQuery(rule);

//if (self.showByMediaQuery) {
overlay.style.display = "none";
//}
}
}

/**
* Show the view by media query. Does not hide current views
* Sets view options by default
* @param {Object} view element to show
* @param {Boolean} setViewOptions sets view options if null or true
*/
self.showViewByMediaQuery = function(view, setViewOptions) {
var id = view ? view.id : null;
var query = id ? self.mediaQueryDictionary[id] : null;
var isOverlay = view ? self.isOverlay(view) : false;
setViewOptions = setViewOptions==null ? true : setViewOptions;

if (query) {
self.enableMediaQuery(query);

if (isOverlay && view && setViewOptions) {
self.setViewVariables(null, view);
}
else {
if (view && setViewOptions) self.setViewOptions(view);
if (view && setViewOptions) self.setViewVariables(view);
}
}
}

/**
* Show the view. Does not hide current views
*/
self.showView = function(view, setViewOptions) {
var id = view ? view.id : null;
var query = id ? self.mediaQueryDictionary[id] : null;
var display = null;
setViewOptions = setViewOptions==null ? true : setViewOptions;

if (query) {
self.enableMediaQuery(query);
if (view==null) view =self.getVisibleView();
if (view && setViewOptions) self.setViewOptions(view);
}
else if (id) {
display = window.getComputedStyle(view).getPropertyValue("display");
if (display=="" || display=="none") {
view.style.display = "block";
}
}

if (view) {
if (self.currentView!=null) {
self.lastView = self.currentView;
}

self.currentView = view;
}
}

self.showViewById = function(id, setViewOptions) {
var view = id ? self.getViewById(id) : null;

if (view) {
self.showView(view);
return;
}

self.log("View not found '" + id + "'");
}

self.getElementView = function(element) {
var view = element;
var viewFound = false;

while (viewFound==false || view==null) {
if (view && self.viewsDictionary[view.id]) {
return view;
}
view = view.parentNode;
}
}

/**
* Show overlay over view
* @param {Event | HTMLElement} event event or html element with styles applied
* @param {String} id id of view or view reference
* @param {Number} x x location
* @param {Number} y y location
*/
self.showOverlay = function(event, id, x, y) {
var overlay = id && typeof id === 'string' ? self.getViewById(id) : id ? id : null;
var query = overlay ? self.mediaQueryDictionary[overlay.id] : null;
var centerHorizontally = false;
var centerVertically = false;
var anchorLeft = false;
var anchorTop = false;
var anchorRight = false;
var anchorBottom = false;
var display = null;
var reparent = true;
var view = null;

if (overlay==null || overlay==false) {
self.log("Overlay not found, '"+ id + "'");
return;
}

// get enter animation - event target must have css variables declared
if (event) {
var button = event.currentTarget || event; // can be event or htmlelement
var buttonComputedStyles = getComputedStyle(button);
var actionTargetValue = buttonComputedStyles.getPropertyValue(self.prefix+"action-target").trim();
var animation = buttonComputedStyles.getPropertyValue(self.prefix+"animation").trim();
var isAnimated = animation!="";
var targetType = buttonComputedStyles.getPropertyValue(self.prefix+"action-type").trim();
var actionTarget = self.application ? null : self.getElement(actionTargetValue);
var actionTargetStyles = actionTarget ? actionTarget.style : null;

if (actionTargetStyles) {
actionTargetStyles.setProperty("animation", animation);
}

if ("stopImmediatePropagation" in event) {
event.stopImmediatePropagation();
}
}

if (self.application==false || targetType=="page") {
document.location.href = "./" + actionTargetValue;
return;
}

// remove any current overlays
if (self.currentOverlay) {

// act as switch if same button
if (self.currentOverlay==actionTarget || self.currentOverlay==null) {
if (self.lastTrigger==button) {
self.removeOverlay(isAnimated);
return;
}
}
else {
self.removeOverlay(isAnimated);
}
}

if (reparent) {
view = self.getElementView(button);
if (view) {
view.appendChild(overlay);
}
}

if (query) {
//self.setElementAnimation(overlay, null);
//overlay.style.animation = animation;
self.enableMediaQuery(query);

var display = overlay && overlay.style.display;

if (overlay && display=="" || display=="none") {
overlay.style.display = "block";
//self.setViewOptions(overlay);
}

// add animation defined in event target style declaration
if (animation && self.supportAnimations) {
self.fadeIn(overlay, false, animation);
}
}
else if (id) {

display = window.getComputedStyle(overlay).getPropertyValue("display");

if (display=="" || display=="none") {
overlay.style.display = "block";
}

// add animation defined in event target style declaration
if (animation && self.supportAnimations) {
self.fadeIn(overlay, false, animation);
}
}

// do not set x or y position if centering
var horizontal = self.prefix + "center-horizontally";
var vertical = self.prefix + "center-vertically";
var style = overlay.style;
var transform = [];

centerHorizontally = self.getIsStyleDefined(id, horizontal) ? self.getViewPreferenceBoolean(overlay, horizontal) : false;
centerVertically = self.getIsStyleDefined(id, vertical) ? self.getViewPreferenceBoolean(overlay, vertical) : false;
anchorLeft = self.getIsStyleDefined(id, "left");
anchorRight = self.getIsStyleDefined(id, "right");
anchorTop = self.getIsStyleDefined(id, "top");
anchorBottom = self.getIsStyleDefined(id, "bottom");


if (self.viewsDictionary[overlay.id] && self.viewsDictionary[overlay.id].styleDeclaration) {
style = self.viewsDictionary[overlay.id].styleDeclaration.style;
}

if (centerHorizontally) {
style.left = "50%";
style.transformOrigin = "0 0";
transform.push("translateX(-50%)");
}
else if (anchorRight && anchorLeft) {
style.left = x + "px";
}
else if (anchorRight) {
//style.right = x + "px";
}
else {
style.left = x + "px";
}

if (centerVertically) {
style.top = "50%";
transform.push("translateY(-50%)");
style.transformOrigin = "0 0";
}
else if (anchorTop && anchorBottom) {
style.top = y + "px";
}
else if (anchorBottom) {
//style.bottom = y + "px";
}
else {
style.top = y + "px";
}

if (transform.length) {
style.transform = transform.join(" ");
}

self.currentOverlay = overlay;
self.lastTrigger = button;
}

self.goBack = function() {
if (self.currentOverlay) {
self.removeOverlay();
}
else if (self.lastView) {
self.goToView(self.lastView.id);
}
}

self.removeOverlay = function(animate) {
var overlay = self.currentOverlay;
animate = animate===false ? false : true;

if (overlay) {
var style = overlay.style;

if (style.animation && self.supportAnimations && animate) {
self.reverseAnimation(overlay, true);

var duration = self.getAnimationDuration(style.animation, true);

setTimeout(function() {
self.setElementAnimation(overlay, null);
self.hideOverlay(overlay);
self.currentOverlay = null;
}, duration);
}
else {
self.setElementAnimation(overlay, null);
self.hideOverlay(overlay);
self.currentOverlay = null;
}
}
}

/**
* Reverse the animation and hide after
* @param {Object} target element with animation
* @param {Boolean} hide hide after animation ends
*/
self.reverseAnimation = function(target, hide) {
var lastAnimation = null;
var style = target.style;

style.animationPlayState = "paused";
lastAnimation = style.animation;
style.animation = null;
style.animationPlayState = "paused";

if (hide) {
//target.addEventListener("animationend", self.animationEndHideHandler);

var duration = self.getAnimationDuration(lastAnimation, true);
var isOverlay = self.isOverlay(target);

setTimeout(function() {
self.setElementAnimation(target, null);

if (isOverlay) {
self.hideOverlay(target);
}
else {
self.hideView(target);
}
}, duration);
}

setTimeout(function() {
style.animation = lastAnimation;
style.animationPlayState = "paused";
style.animationDirection = "reverse";
style.animationPlayState = "running";
}, 30);
}

self.animationEndHandler = function(event) {
var target = event.currentTarget;
self.dispatchEvent(new Event(event.type));
}

self.isOverlay = function(view) {
var result = view ? self.getViewPreferenceBoolean(view, self.prefix + "is-overlay") : false;

return result;
}

self.animationEndHideHandler = function(event) {
var target = event.currentTarget;
self.setViewVariables(null, target);
self.hideView(target);
target.removeEventListener("animationend", self.animationEndHideHandler);
}

self.animationEndShowHandler = function(event) {
var target = event.currentTarget;
target.removeEventListener("animationend", self.animationEndShowHandler);
}

self.setViewOptions = function(view) {

if (view) {
self.minimumScale = self.getViewPreferenceValue(view, self.prefix + "minimum-scale");
self.maximumScale = self.getViewPreferenceValue(view, self.prefix + "maximum-scale");
self.scaleViewsToFit = self.getViewPreferenceBoolean(view, self.prefix + "scale-to-fit");
self.scaleToFitType = self.getViewPreferenceValue(view, self.prefix + "scale-to-fit-type");
self.scaleToFitOnDoubleClick = self.getViewPreferenceBoolean(view, self.prefix + "scale-on-double-click");
self.actualSizeOnDoubleClick = self.getViewPreferenceBoolean(view, self.prefix + "actual-size-on-double-click");
self.scaleViewsOnResize = self.getViewPreferenceBoolean(view, self.prefix + "scale-on-resize");
self.enableScaleUp = self.getViewPreferenceBoolean(view, self.prefix + "enable-scale-up");
self.centerHorizontally = self.getViewPreferenceBoolean(view, self.prefix + "center-horizontally");
self.centerVertically = self.getViewPreferenceBoolean(view, self.prefix + "center-vertically");
self.navigationOnKeypress = self.getViewPreferenceBoolean(view, self.prefix + "navigate-on-keypress");
self.showVie