//We get the type of device to change the height of the head in the case of iOS

if(tempDevice == 'iOS'){

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML += 'jsv-content { top: 64px; }';

style.innerHTML += 'jsv-tabs{ top: 64px; }';

style.innerHTML += '.has-tabs{ top: 109px; }';

style.innerHTML += 'jsv-header { padding-top: 20px; height: 64px }';

document.getElementsByTagName('head')[0].appendChild(style);

}

//Load FastClick

new FastClick(document.body);

//Save type proyect, now we can (null,left,bottom), this corresponds to the menu.

typeProject = type;

//Keep dom element body in a global variable

objBody = $v.select('body');

//Add full spinner div in dom

console.log(spinnerModal);

objBody.innerHTML += spinnerModal;

//Save the reference full spinner div in global var

//JSVfullLoading = $v.select('#JSVcontainerLoading');

//Read json of all views declared

for(var obj in e){

//Keep dom element in a variable

var objElement = $v.select('#' + obj);

//Create the container of all external views to jsv-main

if(!objElement){

//Add to body or container the element jsv-view of the view

objBody.innerHTML += '<jsv-view id="' + obj + '"></jsv-view>';

//Keep dom element in a variable

objElement = $v.select('#' + obj);

//Put all containers out of camera

objElement.classList.add('JSVcontainerRight');

objElement.classList.add('JSVcontainerTransition');

//Save in the array the views declared with its options (url, template, controlator, ...)

if(e.hasOwnProperty(obj)){

JSVDeclareViews[obj] = e[obj];

}

$JSVRequest.do(obj,e[obj].template);

}

}

//Assign actual view to global var

JSVActualView = e;

//Keep dom element in a variable

var objElement = $v.select('#' + e);

//Put actual view into camera :)

objElement.classList.remove('JSVcontainerRight');

objElement.classList.add('JSVcontainerCenter');

objElement.classList.remove('JSVcontainerBackground');

objElement.classList.add('JSVcontainerForeground');

//Read the template

$JSVRequest.do(e,JSVDeclareViews[e].template,true);

window.history.pushState(e, "Titulo", '/www/index.html#' + e);

// console.group('dataView obj -> ' + obj);

// console.time('dataView');

var contentView = JSVContainersViews[e];

for (var x in obj) {

console.log(x);

console.log(obj[x]);

if(!obj[x]) obj[x]='';

contentView = contentView.replace(new RegExp('{{'+x+'}}', 'g'), obj[x]);

}

//Keep dom element in a variable

var objElement = $v.select('#' + e);

//Remove the previous contents of the container

objElement.innerHTML = ''

//Add the new contents of the container

objElement.innerHTML += contentView;

// console.timeEnd('dataView');

// console.groupEnd();

// console.group('goToView e -> ' + e);

// console.time('goToView');

//Keep dom element in a variable

var objMain = $v.select('jsv-main');

var objElement = $v.select('#' + e);

//If the parent of this view YES is jsv-main, we move jsv-main to the left

if($v.select('#' + JSVActualView).parentNode.tagName.toLowerCase() == 'jsv-container'){

//Put the actual view out of camera

objMain.classList.add('JSVcontainerLeft')

objMain.classList.remove('JSVcontainerCenter')

//Put the new view into the camera

objElement.classList.add('JSVcontainerCenter')

objElement.classList.remove('JSVcontainerRight')

//If the parent of this view NO is jsv-main, we move this view to the left

}else{

//Keep dom element in a variable

var objJSVActualView = $v.select('#' + JSVActualView);

//Put the actual view out the camera

objJSVActualView.classList.add('JSVcontainerLeft')

objJSVActualView.classList.remove('JSVcontainerCenter')

//Put the new view into the camera

objElement.classList.add('JSVcontainerCenter')

objElement.classList.remove('JSVcontainerRight')

}

//If the current view is different to the view query now

if(JSVActualView != e){

//Assign actual view to global var

JSVActualView = e;

//Execute the function controller of this view

$JSView.controller[e](e);

//Change the url

window.history.pushState(e, '', '/www/index.html#' + e);

}

/*-----------*/

// console.timeEnd('goToView');

// console.groupEnd();

//If we add the jsv-main component to body (This is why we want a menu)

objBody.innerHTML += '<jsv-main></jsv-main>';

//Keep dom element in a variable

var objMain = $v.select('jsv-main');

//Asign element jsv-main from body to objMain var

objMain.innerHTML = '<jsv-container></jsv-container>';

objMain.classList.add('JSVcontainerCenter');

objMain.classList.add('JSVcontainerTransition');

var objContainer = $v.select('jsv-container');

objContainer.classList.add('jsv-main-' + typeProject);

objContainer.classList.add('JSVcontainerCenter');

objContainer.classList.add('JSVcontainerTransition');

//Read json of all views declared

for(var obj in e){

if(obj == 'menu'){

$v.select('jsv-main').innerHTML += '<jsv-menu-' + typeProject + ' id="' + obj + '"></jsv-menu-' + e[obj].type + '>';

$JSVRequest.do(obj, e[obj].template, true);

}else{

//Add the container the jsv-vew element of the view

$v.select('jsv-container').innerHTML += '<jsv-view id="' + obj + '"></jsv-view>';

//Put all containers out the camera

$v.select('#' + obj).classList.add('JSVcontainerBackground');

//Save in array the views declarated with its options (url, template, controlator, ...)

if(e.hasOwnProperty(obj)){

JSVDeclareViews[obj] = e[obj];

}

$JSVRequest.do(obj, e[obj].template);

}

}

//Keep dom element in a variable

var objContainer = $v.select('jsv-container');

//If execute actionMenu with value in e, is that we want chante the intern view of jsv-main

if (typeof e != 'undefined') {

//Keep dom element in a variable

var objElement = $v.select('#' + e);

var objContainerJSVcontainerForeground = $v.select('jsv-container .JSVcontainerForeground')

objContainerJSVcontainerForeground.classList.add('JSVcontainerBackground');

objContainerJSVcontainerForeground.classList.remove('JSVcontainerForeground');

objElement.classList.remove('JSVcontainerBackground');

objElement.classList.add('JSVcontainerForeground');

//If the current view is different to the view query now

if(JSVActualView != e){

//Assign actual view to global var

JSVActualView = e;

//Execute the function controller of this view

$JSView.controller[e](e);

//Change the url

window.history.pushState(e, '', '/www/index.html#' + e);

}

/*-----------*/

}

//If is the left menu enter here

if(typeProject == 'left'){

if(statusActionMenuSide == false){

objContainer.classList.add('JSVcontainerLeftMenuSide')

objContainer.classList.remove('JSVcontainerCenter')

statusActionMenuSide = true

}else{

objContainer.classList.add('JSVcontainerCenter')

objContainer.classList.remove('JSVcontainerLeftMenuSide')

statusActionMenuSide = false

}

}

//Read json of all views modal declared

for(var obj in e){

//Keep dom element in a variable

var objElement = $v.select('#' + obj);

//Create the content of all external views to jsv-main

if(!objElement){

//Add to body or container the element jsv-view

objBody.innerHTML += '<jsv-modal id="' + obj + '"></jsv-modal>';

objElement = $v.select('#' + obj);

//Put all containers out the camera

objElement.classList.add('JSVcontainerBottom');

objElement.classList.add('JSVcontainerTransition');

//Save in array the views declarated with its options (url, template, controlator, ...)

if(e.hasOwnProperty(obj)){

JSVDeclareViews[obj] = e[obj];

}

$JSVRequest.do(obj,e[obj].template);

}

}

//Keep dom element in a variable

var objElement = $v.select('#' + e);

//Change the class and show modal div

objElement.classList.add('JSVcontainerCenter')

objElement.classList.remove('JSVcontainerBottom')

//Assign actual view to global var

JSVActualView = e;

//Execute the function controller of this view

$JSView.controller[e](e);

/*-----------*/

//Change the url

window.history.pushState(e, '', '/www/index.html#'+e);

//Keep dom element in a variable

var objElement = $v.select('#' + e);

//Change the class and hide modal

objElement.classList.add('JSVcontainerBottom')

objElement.classList.remove('JSVcontainerCenter')

//Return to previous url

window.history.back()

setTimeout(function(){

//Assign actual view to global var

JSVActualView = window.history.state

},0);

var idPatrent = $v.select('#' + e).parentNode.id;

//Change the class and hide modal

$v.select('#' + idPatrent + ' #' + e).classList.add('jsv-modal-menu-show');

//Change the class and show modal div

$v.select('#' + idPatrent + ' #' + e + ' jsv-list').classList.add('JSVcontainerCenter');

//Close menu modal, click background transparent

var liClicked = false

$v.select('#' + idPatrent + ' #' + e + ' jsv-list ').onclick = function(){

liClicked = true;

}

$v.select('#' + idPatrent + ' #' + e).onclick = function(){

if(liClicked == false){

$JSView.closeMenuModal(e);

}

liClicked = false;

}

var idPatrent = $v.select('#' + e).parentNode.id;

//Change the class and hide modal

$v.select('#' + idPatrent + ' #' + e).classList.remove('jsv-modal-menu-show');

$v.select('#' + idPatrent + ' #' + e + ' jsv-list').classList.remove('JSVcontainerCenter');

var modalId = Date.now();

objBody.innerHTML += '<div id="notification' + modalId + '" class="notification JSVcontainerTop JSVcontainerTransition">' + t + '</div>';

//Put element notification in camera

JSVNotifications[modalId] = setTimeout(function(){

$v.select('#notification' + modalId).classList.add('JSVcontainerCenter');

$v.select('#notification' + modalId).classList.remove('JSVcontainerTop');

//Put element notification out camera and remove element

setTimeout(function(){

$v.select('#notification' + modalId).classList.add('JSVcontainerTop');

$v.select('#notification' + modalId).classList.remove('JSVcontainerCenter');

setTimeout(function(){

$v.select('#notification' + modalId).remove();

clearInterval(JSVNotifications[modalId]);

delete JSVNotifications[modalId];

},250);

},2000);

},100);

//Keep dom element in a variable

var objInputs = $v.selectAll('#' + e + ' #' + form + ' input');

var objTextareas = $v.selectAll('#' + e + ' #' + form + ' textarea');

//Read all severals elements type inputs from form

for(var i = 0; i < objInputs.length; i++){

objInputs[i].onkeyup = function(e){

if(this.value != '')

this.parentElement.childNodes[0].classList.add('show');

else

this.parentElement.childNodes[0].classList.remove('show');

}

}

for(var i = 0; i < objTextareas.length; i++){

objTextareas[i].onkeyup = function(e){

if(this.value != '')

this.parentElement.childNodes[0].classList.add('show');

else

this.parentElement.childNodes[0].classList.remove('show');

}

}

//Keep dom element in a variable

var objElement = $v.select('#' + e + ' jsv-menu-circle');

var objElementUl = $v.select('#' + e + ' jsv-menu-circle jsv-list ul');

//Added a style element for animation. It is obligatory for the animation is fluid

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML += '#' + objElement.id + '.JSVmenuCircleOpen { height: ' + (objElementUl.offsetHeight-70) + 'px; }';

document.getElementsByTagName('head')[0].appendChild(style);

//If the user click in ul don´t hide menu, but if click in element parent yes.

var liClicked = false

objElementUl.onclick = function(){

liClicked = true;

}

objElement.onclick = function(){

if(liClicked == false){

if(objElement.classList.contains('JSVmenuCircleOpen') == false){

//Change the class and hide modal

objElement.classList.add('JSVcontainerCenter');

objElement.classList.add('JSVmenuCircleOpen');

}else{

//Change the class and hide modal

objElement.classList.remove('JSVmenuCircleOpen');

objElement.classList.remove('JSVcontainerCenter');

}

}

liClicked = false;

}

var idPatrent = $v.select('#' + e).parentNode.id;

var objElement = $v.select('#' + idPatrent + ' jsv-menu-circle#' + e);

//Change the class and close menu

objElement.classList.remove('JSVmenuCircleOpen');

objElement.classList.remove('JSVcontainerCenter');

var objElement = $v.select('jsv-image-popup#' + e);

objElement.style.backgroundImage = image.style.backgroundImage;

objElement.classList.add('show');

var objElement = $v.select('jsv-image-popup#' + e);

objElement.classList.remove('show');

setTimeout(function(){

objElement.style.backgroundImage = '';

},250);

//Return to previous url

window.history.back();

setTimeout(function(){

console.log(window.history.state);

$JSView.returnTo(window.history.state);

},0);

//Keep dom element in a variable

var objElementJSVActualView = $v.select('#' + JSVActualView);

//If parent of view YES is jsv-main, move to center jsv-main

if($v.select('#' + e).parentNode.tagName.toLowerCase() == 'jsv-container'){

//Keep dom element in a variable

var objMain = $v.select('jsv-main');

//Put all containers out the camera

objElementJSVActualView.classList.add('JSVcontainerRight')

objElementJSVActualView.classList.remove('JSVcontainerCenter')

//Put the new view into camera

objMain.classList.add('JSVcontainerCenter')

objMain.classList.remove('JSVcontainerLeft')

//If parent of view is NOT jsv-main, move to center the view

}else{

//Keep dom element in a variable

var objElement = $v.select('#' + e);

//Put all containers out the camera

objElementJSVActualView.classList.add('JSVcontainerRight')

objElementJSVActualView.classList.remove('JSVcontainerCenter')

//Put the new view into camera

objElement.classList.add('JSVcontainerCenter')

objElement.classList.remove('JSVcontainerLeft')

}

//Assign actual view to global var

JSVActualView = e

$v('a').each(function() {

$v( this ).attr( "onclick", "window.open('"+$v( this ).attr("href")+"', '_blank', 'location=yes')");

$v( this ).removeAttr("href");

});

navigator.notification.alert(

message, // message

null, // callback

title, // title

button // buttonName

);

var elements = $v.selectAll('.JSVscrollerHammer ul li');

var numberElement = elements.length;

var pane_count = numberElement;

var current_pane = 0;

var maxWidth = $v.select(id).parentElement.offsetWidth;

var maxHeight = $v.select(id).parentElement.offsetHeight;

var pane_width = maxWidth;

// indicators

$v.select(id).innerHTML += '<div class="JVSnav"><ul class="JSVindicator"></ul></div>';

var indicator = '';

for (var i = 1; i <= numberElement; i++){

if ( i == 1) indicator += '<li class="active">' + i + '</li>';

else indicator += '<li>' + i + '</li>';

}

$v.select(id + ' .JSVindicator').innerHTML = indicator;

$v.select(id + ' .JSVindicator').style.paddingLeft = (maxWidth - this.innerWidth) + 'px';

// end indicators

for(var i = 0; i < numberElement; i++){

$v.selectAll('.JSVscrollerHammer ul li')[i].style.width = maxWidth + 'px';

$v.selectAll('.JSVscrollerHammer ul li')[i].style.height = maxHeight + 'px';

var touchControl = new Hammer($v.selectAll('.JSVscrollerHammer ul li')[i]);

touchControl.on("swipeleft swiperight dragleft dragright panleft panright panend",function(event,element){

switch(event.type){

case 'panleft':

case 'panright':

var pane_offset = -(100/pane_count) * current_pane;

var drag_offset = ((100/pane_width) * event.deltaX) / pane_count;

var percent = pane_offset+drag_offset;

// slow down at the first and last pane

if((current_pane == 0 && event.direction == Hammer.DIRECTION_RIGHT) ||

(current_pane == pane_count-1 && event.direction == Hammer.DIRECTION_LEFT)) {

drag_offset *= .4;

}

setContainerOffset(percent,false,id,current_pane,event);

break;

case 'swiperight':

previous(event);

break;

case 'swipeleft' :

next(event);

break;

case 'panend':

// more then 50% moved, navigate

if(Math.abs(event.deltaX) > pane_width/2) {

if(event.direction == Hammer.DIRECTION_RIGHT) {

previous(event);

} else {

next(event);

}

}

else {

showPane(current_pane, true);

}

break;

}

});

}

showPane = function(index,animate,id,event){

index = Math.max(0, Math.min(index, pane_count-1));

current_pane = index;

var offset = -((100/pane_count)*current_pane);

setContainerOffset(offset, true,id,current_pane,event);

}

next = function(event){

current_pane++;

return this.showPane(current_pane,true,id,event);

}

previous = function(){

current_pane--;

return this.showPane(current_pane, true,id,event);

}

setContainerOffset = function(percent, animate,id,current_pane,event) {

var container = $v.select('.JSVscrollerHammer ul');

container.style.width = numberElement * maxWidth + 'px';

container.className = "";

if(animate) {

container.className = "animate";

}

var px = ((pane_width * pane_count) / 100) * percent;

container.style.transform = "translate3d("+ percent +"%,0,0) scale3d(1,1,1)";

indicators(id,current_pane);

}

indicators = function(obj,id,current_pane){

$v.select(id + ' .JSVindicator > li.active').className = '';

$v.select(id + ' .JSVindicator > li:nth-child(' + (current_pane+1) + ')').className = 'active';

}

var view = e ;

setTimeout(function(view){

var interstitialContainer = $v.select('#interstitialContainer');

var view = $v.select(e);

var maxWidth = $v.select(id).parentElement.offsetWidth;

var maxHeight = $v.select(id).parentElement.offsetHeight;

var div = $v.select('#Adsinterstitial');

div.style.width = (maxWidth - 24) + 'px';

div.style.height = maxHeight + 'px';

var heightFooter = maxHeight - (maxHeight-50);

$v.select('.footerInterstitial').style.height = heightFooter + 'px';

div.style.verticalAlign = maxHeight / 2 + 'px';

div.style.marginTop = (maxHeight/4)-20 + 'px';

$v.select('.contentInterstitial').style.height = (maxHeight/2) + 'px';

$v.select(id).style.zIndex = 0;

$v.select(id).style.position = 'absolute';

$v.select('.contentInterstitial img').src = obj.source;

//show the divs

interstitialContainer.appendChild(div);

$v.select('#' + e).appendChild(interstitialContainer);

//show the divs

div.style.display = 'block';

var duration = obj.duration;

progressBar(obj.duration);

$v.select(".headerInterstitial a").addEventListener('click',function(evt){

evt.preventDefault();

$v.select('#Adsinterstitial').style.display = 'none';

// $v.select('#' + interstitialContainer.id).classList.remove('interstitialContainer');

});

},1000);

progressBar = function(duration){

var progressWidth = 1;

var id = setInterval(function(){

if (progressWidth >= 100) {

clearInterval(id);

// $v.select('#' + interstitialContainer.id).classList.remove('interstitialContainer');

$v.select('#Adsinterstitial').display = 'none';

} else {

progressWidth ++;

$v.select('.progres-bar-container').style.width = progressWidth +'%';

}

},duration)

}

var elements = $v.selectAll(e + ' .JSVscroller ul li');

var numberElement;

var maxWidth;

//Asign width

if(options.responsive == true){

//Responsive

numberElement = elements.length;

maxWidth = $v.select(e).parentElement.offsetWidth;

maxHeight = $v.select(e).parentElement.offsetHeight;

var divs = $v.selectAll(e + ' .JSVscroller ul li');

for (var i = 0; i < numberElement; ++i) {

$v.selectAll(e + ' .JSVscroller ul li')[i].style.width = maxWidth + 'px';

$v.selectAll(e + ' .JSVscroller ul li')[i].style.height = maxHeight + 'px';

}

$v.select(e + ' .JSVscroller').style.width = (maxWidth * numberElement) + 'px';

}else if(options.width && options.height){

//Absolute

$v.select(e).style.width = options.width + 'px';

$v.select(e).style.height = options.height + 'px' ;

numberElement = elements.length;

maxWidth = options.width;

for (var i = 0; i < numberElement; ++i) {

$v.selectAll(e + ' .JSVscroller ul li')[i].style.width = maxWidth + 'px';

}

$v.select(e + ' .JSVscroller').style.width = (maxWidth * numberElement) + 'px';

}else{

console.warn("Debes definir un diseño responsive o absoluto con width y eight.")

}

/*---------------------*/

//Create the indicators

if(options.indicators == true){

$v.select(e).innerHTML += '<div class="JVSnav"><ul class="JSVindicator"></ul></div>';

var indicator = '';

for (var i = 1; i <= numberElement; i++){

if ( i == 1) indicator += '<li class="active">' + i + '</li>';

else indicator += '<li>' + i + '</li>';

}

$v.select(e + ' .JSVindicator').innerHTML = indicator;

$v.select(e + ' .JSVindicator').style.paddingLeft = (maxWidth - this.innerWidth) + 'px';

}

/*---------------------*/

//Add slide to array

new iScroll(e, {

snap: true,

momentum: false,

hScrollbar: false,

onScrollEnd: function () {

if(options.indicators == true){

$v.select(e + ' .JSVindicator > li.active').className = '';

$v.select(e + ' .JSVindicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';

}

}

});

/*---------------------*/

var elements = $v.selectAll(e + ' .JSVscrollerAd ul li');

var numberElement;

var maxWidth;

//Asign width

if(options.responsive == true){

//Responsive

numberElement = elements.length;

maxWidth = $v.select(e).parentElement.offsetWidth;

maxHeight = $v.select(e).parentElement.offsetHeight;

var divs = $v.selectAll(e + ' .JSVscrollerAd ul li');

for (var i = 0; i < numberElement; ++i) {

$v.selectAll(e + ' .JSVscrollerAd ul li')[i].style.width = maxWidth + 'px';

$v.selectAll(e + ' .JSVscrollerAd ul li')[i].style.height = maxHeight + 'px';

}

$v.select(e + ' .JSVscrollerAd').style.width = (maxWidth * numberElement) + 'px';

}else if(options.width && options.height){

//Absolute

$v.select(e).style.width = options.width + 'px';

$v.select(e).style.height = options.height + 'px' ;

numberElement = elements.length;

maxWidth = options.width;

maxHeight = options.height;

for (var i = 0; i < numberElement; ++i) {

$v.selectAll(e + ' .JSVscrollerAd ul li')[i].style.width = (maxWidth-60) + 'px';

$v.selectAll(e + ' .JSVscrollerAd ul li')[i].style.height = maxHeight + 'px';

}

$v.select(e + ' .JSVscrollerAd').style.width = ((maxWidth-40) * numberElement)-20 + 'px';

}else{

console.warn("Debes definir un diseño responsive o absoluto con width y eight.")

}

/*---------------------*/

//Add slide to array

new iScroll(e, {

snap: true,

momentum: false,