/* 
The world with CSS3 Transforms.
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
*/

// Generates the world
var Point=function(e,t){this.x=e;this.y=t};Point.prototype.rotateAroundOrigin=function(e,t){var n=this;var r=Math.cos(t)*(n.x-e.x)-Math.sin(t)*(n.y-e.y)+e.x;var i=Math.sin(t)*(n.x-e.x)+Math.cos(t)*(n.y-e.y)+e.y;return new Point(r,i)};Point.prototype.distanceTo=function(e){var t=Math.pow(e.x-this.x,2);var n=Math.pow(e.y-this.y,2);return Math.sqrt(t+n)};var Dot=function(e,t,n,r,i){e=e||0;t=t||0;n=n||0;r=r||0;i=i||0;this.x=Math.ceil(e*100)/100;this.y=Math.ceil(t*100)/100;this.z=Math.ceil(n*100)/100;this.angleX=Math.ceil(r*100)/100;this.angleY=Math.ceil(i*100)/100};var World=function(e,t,n){this.detailLevel=Math.max(t,3);this.radius=150;this.diameter=this.radius*2;this.circumference=this.diameter*Math.PI;this.background=n.image;this.backgroundWidth=n.width;this.backgroundHeight=n.height;this.el=document.getElementById(e);this.el.innerHTML="";this.el.style.width=this.el.style.height=this.diameter+"px";this.center=new Dot(0,0,0,Math.PI/2,0);this.top=new Dot(this.center.x,this.center.y-this.radius,this.center.z,Math.PI/2,0);this.bottom=new Dot(this.center.x,this.center.y+this.radius,this.center.z,-Math.PI/2,0);this.prepare();this.render()};World.prototype.prepare=function(){var e=Math.PI/(this.detailLevel-1);this.rows=[];this.rows.push({dots:[this.top],width:0,height:0});for(var t=1;t<this.detailLevel-1;t++){var n=e*t;var r=new Point(this.top.z,this.top.y);var i=new Point(this.center.z,this.center.y);var s=r.rotateAroundOrigin(i,n);var o=n-Math.PI/2;var u=new Dot(this.top.x,s.y,s.x,-o,0);var a=new Dot(this.top.x,s.y,this.top.z,0,0);var f={dots:[],width:0,height:0};for(var l=0;l<this.detailLevel-1;l++){var c=e*2*l-Math.PI/2;var h=new Point(u.x,u.z);var p=new Point(a.x,a.z);var s=h.rotateAroundOrigin(p,c);var d=new Dot(s.x,u.y,s.y,u.angleX,-c);f.dots.push(d)}this.rows.push(f)}this.rows.push({dots:[this.bottom],width:0,height:0});for(var t=0;t<this.rows.length-1;t++){var f=this.rows[t];for(var l=0;l<f.dots.length-1;l++){var v=Math.min(l,f.dots.length-1);var m=Math.min(v+1,f.dots.length-1);var g=this.rows[t+1];var y=Math.min(l,g.dots.length-1);var b=Math.min(v+1,g.dots.length-1);var w=f.dots[v];var E=f.dots[m];var S=g.dots[y];var x=g.dots[b];var T=(new Point(w.x,w.z)).distanceTo(new Point(E.x,E.z));var N=(new Point(S.x,S.z)).distanceTo(new Point(x.x,x.z));var C=(new Point(w.y,w.z)).distanceTo(new Point(S.y,S.z));var k=(new Point(E.y,E.z)).distanceTo(new Point(x.y,x.z));f.width=Math.max(f.width,Math.max(T,N));f.height=Math.max(f.height,Math.max(C,k))}}};World.prototype.render=function(){for(var e=0;e<this.rows.length-1;e++){var t=this.rows[e];for(var n=0;n<t.dots.length;n++){var r=t.dots[n];this.renderMapPart(r,t,n,e)}}};World.prototype.renderMapPart=function(e,t,n,r){var i=document.createElement("div");var s=t.width+2;var o=t.height+2;i.style.width=s+"px";i.style.height=o+"px";i.style.zIndex=n*this.detailLevel+r;i.style.background="url("+this.background+")";i.style.backgroundRepeat="no-repeat";i.style.backgroundSize=this.circumference+"px "+this.circumference/2+"px";i.style.backgroundPosition=this.circumference/this.detailLevel*(n-this.detailLevel+1)+"px "+this.circumference/2/this.detailLevel*-r+"px";i.style.transform="translate3d("+(e.x-s/2)+"px, "+(e.y-o/2)+"px, "+e.z+"px)";i.style.transform+="rotateY("+e.angleY*180/Math.PI+"deg) rotateX("+e.angleX*180/Math.PI+"deg)";this.el.appendChild(i)};World.prototype.renderSquare=function(e){var t=document.createElement("div");var n=4;var r=4;t.style.marginTop=this.height/-2+"px";t.style.marginLeft=this.width/-2+"px";t.style.width=n+"px";t.style.height=r+"px";t.style.transform="translate3d("+(e.x-n/2)+"px, "+(e.y-r/2)+"px, "+e.z+"px)";t.style.transform+="rotateY("+e.angleY*180/Math.PI+"deg) rotateX("+e.angleX*180/Math.PI+"deg)";this.el.appendChild(t)}

// Controls part
var maps=[{image:"http://www.hddesktopbackgrounds.us/backgrounds-images/1920x1080/b48ti-wallpapers-091421358-1920x1080.jpg",width:1920,height:1080},{image:"http://www.nnvl.noaa.gov/images/globaldata/SnowIceCover_Daily.png",width:4096,height:2048},{image:"http://static.fjcdn.com/large/pictures/7d/42/7d42db_3928943.jpg",width:780,height:488},{image:"http://laps.noaa.gov/albers/sos/jupiter/jupiter/jupiter_rgb_cyl_www.jpg",width:4096,height:2048}];var Controls=function(e){var t=this;this.el=document.getElementById(e);var n=document.getElementById("select-detail");var r=document.getElementById("select-map");n.onchange=function(){t.detail=n.value;t.updateWorld()};r.onchange=function(){t.map=r.value;t.updateWorld()};this.detail=n.value;this.map=r.value;this.updateWorld()};Controls.prototype.updateWorld=function(){this.world=new World("world",this.detail,maps[this.map])};new Controls("controls")