/*
Name:  Mobile view
Version: 1.0.0
Description: Responsive design test for phone and tablet.
Developer: Olalekan Animashaun
Date: June 2017

*/

var body = document.querySelector('body');
var button = document.querySelector('#go');
var input = document.querySelector('.input');
var phoneview = document.querySelector('.phone-view');
var tabletview = document.querySelector('.tablet-view');
var view = document.querySelector('.site');
var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var full = document.querySelector('#full');

 function MobiView()
{
  
  //URL process
  button.addEventListener("click", function(e) {
    var url = input.value;
    url = isHTTP(url);
    localStorage.setItem('source', url);
    view.src = url;
    input.val = url;
  });
  
  
  //Gray phone or tablet
  light.addEventListener("click", function(e) {
  var viewMode = body.getAttribute('view');
  if(viewMode === 'phone' ){
  phoneview.setAttribute('style', 'background-image: url(../img/phone.png);');
}else {
  tabletview.setAttribute('style', 'background-image: url(../img/tablet.png);');
}
  
  });
  
  //Black phone or tablet
  dark.addEventListener("click", function(e) {
    var viewMode = body.getAttribute('view');
    if(viewMode === 'phone' ){
    phoneview.setAttribute('style', 'background-image: url(../img/phone-dark.png);');
  }else {
    tabletview.setAttribute('style', 'background-image: url(../img/tablet-dark.png);');
  }
  });
  
  //Fullscreen mode
  full.addEventListener("click", function(e) {
  var element =  document.querySelector('html');
  launchIntoFullscreen(element);
});


var source = localStorage.getItem('source');
if (source !== null){
view.src = source;
input.value = source;
}
}

//Fullscreen function
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

//Check if the url has FTP, HTTP or HTTPS protocol
function isHTTP(url) {
   if (!/^(f|ht)tps?:\/\//i.test(url)) {
      url = "http://" + url;
      url = url.toLowerCase();
   }
   return url;
}


MobiView();
