var boxwin=(function(){
	var genkey="";
	var mainbox=[];
	var boxaktif=null;
	var titleaktif=null;
	var posX=0;
	var posY=0;
	var bedaX=0;
	var bedaY=0;
	var zindex=100;
	return{
		load:function(a){
			var obj=new Object;
			var genid=boxwin.genid(8);
			var idbox=a['box'] || null;
			var lebar=a['lebar'] || null;
			var tinggi=a['tinggi'] || "fit";
			var tinggimax=a['tinggimax'] || null;
			var judul=a['judul'] || "";
			var tombolbawah = a['tombolbawah'] || null;
			var tombolatas = a['tombolatas'] || null;
			
			if(idbox==null) return;
			
			
			var box=document.getElementById(idbox);
			obj.box=box;
			var isi=box.innerHTML;
			box.innerHTML="";
			
			var stlebar="left:"+(100+(parseInt(mainbox.length)*30))+"px;";
			if(lebar!=null) {
				stlebar="width:"+lebar+"px;left:calc(50% - "+((lebar/2)+(parseInt(mainbox.length)*30))+"px);";
			}
			
			if(tinggi!=null){
				if(tinggi=="fit"){
					stlebar+="height:calc(100% - 200px);";
				}else if(tinggi=="auto"){
					stlebar+="height:auto;overflow:auto;";
				}else{
					if(!isNaN(parseInt(tinggi))){
						stlebar+="height:"+tinggi+"px;";
					}
				}
			}
			if(tinggimax!=null){
				if(tinggimax=="fit"){
					stlebar+="max-height: calc(100% - 200px);";
				}
				
			}
			
			var boxbg=document.getElementById("css_box_window");
			var ttlbar=document.createElement("div");
			ttlbar.className="ttlwin";
			
			var bttutup=document.createElement("div");
			bttutup.className="tutupwin";
			ttlbar.appendChild(bttutup);
			
			var ttlwin=document.createElement("div");
			obj.ttl=ttlwin;
			ttlwin.className="ttltextwin";
			ttlwin.innerHTML=judul;
			ttlbar.appendChild(ttlwin);
			
			box.insertBefore(ttlbar, box.firstChild);
			
			var boxatas=null;
			if(tombolatas!=null){
				boxatas=document.createElement("div");
				boxatas.className="boxtombolatas";
				box.appendChild(boxatas);
			}
			
			var boxisi=document.createElement("div");
			boxisi.className="boxwinisi";
			if(tombolatas!=null && tombolbawah!=null){
				boxisi.className="boxwinisi isiboxatasbawah";
			}else if(tombolbawah!=null || tombolatas!=null){
				boxisi.className="boxwinisi isiboxatas";
			}
			
			box.appendChild(boxisi);
			boxisi.innerHTML=isi;
			
			if(tombolatas!=null){
				var isiatas=document.getElementById(tombolatas);
				boxatas.appendChild(isiatas);
			}
			
			var boxbawah=null;
			if(tombolbawah!=null){
				boxbawah=document.createElement("div");
				boxbawah.className="boxbawah";
				box.appendChild(boxbawah);
				
				var isibx=document.getElementById(tombolbawah);
				boxbawah.appendChild(isibx);
			}
			
			(function(bx,ob,ttl,boxis,ttp,bg,ttlw,boxa,tba,boxbw,tbw,idx){
				ob.buka=function(){
					document.body.className="stopscroll";
					bx.className="boxwin boxwinsh";
					bx.style="top:"+(100+(parseInt(idx)*30))+"px;"+stlebar+"z-index:"+(zindex+idx+2)+";";
					bg.style="display:block;z-index:"+(zindex+idx+1)+";";
					boxaktif=bx;
					titleaktif=ttl;
					boxwin.addlisten();
				};
				
				ob.tutup=function(){
					bx.className="boxwin boxwinhd";
					bx.style="top:-550%;"+stlebar;
					
					bx.removeChild(ttl);
					var isisbl=boxis.children;
					
					bx.removeChild(boxis);
					bx.appendChild(isisbl[0]);
					mainbox.splice(idx,1);
					
					if(tba!=null){
						var isiba=document.getElementById(tba);
						bx.appendChild(isiba);
					}
					if(boxa!=null){
						bx.removeChild(boxa);
					}
					
					if(tbw!=null){
						var isibx=document.getElementById(tbw);
						bx.appendChild(isibx);
					}
					if(boxbw!=null){
						bx.removeChild(boxbw);
					}
					
					if(mainbox.length>0){
						boxaktif=mainbox[(mainbox.length-1)].box;
						titleaktif=mainbox[(mainbox.length-1)].ttl;
						bg.style="display:block;z-index:"+(zindex+idx)+";";
					}else{
						bg.style="display:none;";
						document.body.className="scroll";
					}
					
				};
				
				ttp.onclick=function(){
					bx.className="boxwin boxwinhd";
					bx.style="top:-550%;"+stlebar;
					bx.removeChild(ttl);
					
					var isisbl=boxis.children;
					
					bx.removeChild(boxis);
					bx.appendChild(isisbl[0]);
					mainbox.splice(idx,1);
					
					if(tba!=null){
						var isiba=document.getElementById(tba);
						bx.appendChild(isiba);
					}
					if(boxa!=null){
						bx.removeChild(boxa);
					}
					
					if(tbw!=null){
						var isibx=document.getElementById(tbw);
						bx.appendChild(isibx);
					}
					if(boxbw!=null){
						bx.removeChild(boxbw);
					}
					if(mainbox.length>0){
						boxaktif=mainbox[(mainbox.length-1)].box;
						titleaktif=mainbox[(mainbox.length-1)].ttl;
						bg.style="display:block;z-index:"+(zindex+idx)+";";
					}else{
						bg.style="display:none;";
						document.body.className="scroll";
					}
				};
				
				ob.title=function(a){
					ttlw.innerHTML=a;
				};
				
			})(box,obj,ttlbar,boxisi,bttutup,boxbg,ttlwin,boxatas,tombolatas,boxbawah,tombolbawah,mainbox.length);
			
			mainbox.push(obj);
			return obj;
		},
		yesno:function(a){
			var obj=new Object;
			var proses=a['proses'] || null;
			obj.proses=proses;
			
			var boxbg=document.getElementById("css_box_window");
			var boxy=document.createElement("div");
			boxy.align="center";
			boxy.className="boxwin winyesno";
			document.body.appendChild(boxy);
			
			var ttlbar=document.createElement("div");
			ttlbar.align="left";
			ttlbar.className="ttlwin";
			
			var bttutup=document.createElement("div");
			bttutup.className="tutupwin";
			ttlbar.appendChild(bttutup);
			
			var ttlwin=document.createElement("div");
			obj.ttl=ttlwin;
			ttlwin.className="ttltextwin";
			ttlwin.innerHTML="Peringatan";
			ttlbar.appendChild(ttlwin);
			
			boxy.appendChild(ttlbar);
			
			var boxtombol=document.createElement("div");
			
			boxtombol.style="margin-top:20px;";
			boxy.appendChild(boxtombol);
			var boxketerangan=document.createElement("div");
			boxketerangan.innerHTML=a['judul'];
			boxketerangan.style="margin-bottom:20px;";
			boxtombol.appendChild(boxketerangan);
			
			var bttidak=document.createElement("span");
			bttidak.align="center";
			bttidak.className="btmerah";
			bttidak.innerHTML="BATAL";
			boxtombol.appendChild(bttidak);
			
			var btya=document.createElement("span");
			btya.align="center";
			btya.style="margin-left:8px;";
			btya.className="bthijau";
			btya.innerHTML="PROSES";
			boxtombol.appendChild(btya);
			
			(function(bx,ob,ttp,bg,bttdk,bty,idx){
				ob.buka=function(){
					document.body.className="stopscroll";
					bx.className="boxwin winyesno boxwinsh";
					bx.style="top:50%;margin-top:-150px;z-index:"+(zindex+idx+2)+";";
					bg.style="display:block;z-index:"+(zindex+idx+1)+";";
					
				};
				
				ob.tutup=function(){
					bx.style="top:-550%;z-index:"+(zindex+idx+2)+";";
					bg.style="display:block;z-index:"+(zindex+idx)+";";
					if(idx==0){
						bg.style="display:none;";
						document.body.className="scroll";
					}
					
				};
				
				bttdk.onclick=function(){
					bx.style="top:-550%;z-index:"+(zindex+idx+2)+";";
					bg.style="display:block;z-index:"+(zindex+idx)+";";
					if(idx==0){
						bg.style="display:none;";
						document.body.className="scroll";
					}
					
				};
				
				ttp.onclick=function(){
					bx.style="top:-550%;z-index:"+(zindex+idx+2)+";";
					bg.style="display:block;z-index:"+(zindex+idx)+";";
					if(idx==0){
						bg.style="display:none;";
						document.body.className="scroll";
					}
				};
				bty.onclick=function(){
					ob.proses();
				};
				
			})(boxy,obj,bttutup,boxbg,bttidak,btya,mainbox.length);
			
			return obj;
		},
		genid:function(a){
			var text = "";
		    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		    for( var i=0; i < a; i++ )
		        text += possible.charAt(Math.floor(Math.random() * possible.length));
		    return text;
		},
		addlisten:function(bx){
			titleaktif.addEventListener('mousedown', boxwin.mouseDown, false);
   		 	window.addEventListener('mouseup', boxwin.mouseUp, false);
		},
		mouseUp:function(){
			window.removeEventListener('mousemove', boxwin.divMove, true);
		},
		mouseDown:function(e){
			window.addEventListener('mousemove', boxwin.divMove, true);
			elemRect = boxaktif.getBoundingClientRect();
			
			
			posX=elemRect.left;
			posY=elemRect.top;
			bedaX=e.clientX-posX;
			bedaY=e.clientY-posY;
			
			console.log(elemRect.left+" "+e.clientX+" "+bedaX);
		},
		divMove:function(e){
			console.log(e.clientX+" "+(e.clientX-bedaX));
		  	boxaktif.style.top = ((e.clientY-bedaY)+5) + 'px';
		  	boxaktif.style.left = ((e.clientX-bedaX)+5) + 'px';
		}
	}
})();
