var magicbox = {

	layer : null,	
	content : null,
	header : null,
	footer : null,
	event : null,					
	overlay : null, 					
	shim : null,	
	loader : null, 	
	closeBtn : null,					
	iframe : null,	
	status : 0,	
	height : 300,
	width : 400,
	url : '',

	init : function(){
  
		// elements & properties	
    
		this.layer = document.createElement('div');
		this.layer.className = 'magicbox_box';
		this.layer.style.display = 'none';
		document.body.appendChild(this.layer);

	 	this.closeBtn = document.createElement('div');	//close dialog button 
	 	this.layer.appendChild(this.closeBtn);
	 	this.closeBtn.className = 'magicbox_closeBtn';
		this.closeBtn.innerHTML = 'X Close';
    
    this.closeBtn.onclick = function() {
      magicbox.close();
    }

    this.content = document.createElement('div');	//holds the loaded content
  	this.content.className = 'magicbox_content';
		this.layer.appendChild(this.content);

		this.overlay = document.createElement('div');	//overlay
		this.overlay.className = 'magicbox_overlay';	
		this.overlay.style.display = 'none';	
		document.body.appendChild(this.overlay);

		this.loader = document.createElement('div');	//loading notice
		this.loader.className = 'magicbox_loader';
		this.loader.style.display = 'none';	
		document.body.appendChild(this.loader);
    
    window.onresize = function(){
      magicbox.stretchOverlay();
      magicbox.centerDialog();
    }

	},

	//show overly and loader before content is loaded	
	loading : function(){	
  
		//overlay visible		
		this.overlay.style.display = 'block';	
		this.centerDialog();
		this.loader.style.display = 'block';
		fadeElement(this.loader, 0.6, 500);	
		this.stretchOverlay();
	},

	show : function(url, w, h){
  
		if(this.status == 2) 
			return;

		this.status = 1;					//loading		
		this.height = h;
		this.width = w;

		ToggleScrollbars(false);

		// create iframe
	 	var d = new Date();
		this.iframe = document.createElement('iframe'); 	
		this.iframe.name = 'box_iframe' +  d.getTime(); 	//must be unique name
		this.iframe.frameBorder = 0;
		this.iframe.src = url;						// start loading iframe content
		this.content.innerHTML = '';				// remove all prevoius content
		this.content.appendChild(this.iframe);		// insert iframe

	 	this.loading();
	 	var obj = this;
	 	var loaded = function(){
		 	//user can cancel loading by clicking on the overlay
			if(obj.status == 1){			
				obj.status = 2;							//loaded
				obj.render();				 			
			}
	 	}
		setTimeout(loaded, 800);
	},

	close : function(){								//hides dialog 
		if(this.iframe != null){
			this.iframe.src = '';
			this.content.removeChild(this.iframe);
		}
		this.overlay.style.display = 'none';		//hide overlay
		this.loader.style.display = 'none';			//hide loader
		this.layer.style.display = 'none';			//hide layer
		this.status = 0;							//hidden
		ToggleScrollbars(true);
	},

	render : function(){
		this.loader.style.display = 'none';			//loader hidden		
		this.iframe.className = 'magicbox_iframe';	
	 	this.iframe.height = this.height;		
	 	this.iframe.width = this.width;		

    // izracun za novi botun !
		var h = this.height; 	
		var w = this.width;

    //-24 zbog novog botuna
		this.layer.style.margin =  (-h / 2 - 24) + 'px 0 0 ' + (-w / 2) + 'px';
		this.layer.style.height = h + 'px';		
	 	this.layer.style.width = w + 'px';	
		this.layer.style.display = 'block';		//layer visible	
		this.centerDialog();
		this.stretchOverlay();
		fadeElement(this.layer, 1, 700);		
	},

	centerDialog : function(){
		var size = getWindowSize();
		var scroll = getScrollXY();
		var x = size[0] / 2;
		var y = size[1] / 2 + scroll[1];
		this.layer.style.left = x + 'px'; 
		this.layer.style.top = y + 'px';
		this.loader.style.left = x + 'px'; 
		this.loader.style.top = y + 'px';
	},

	stretchOverlay : function(){
		var docSize = getDocumentSize();
    
		//stretch overlay
		this.overlay.style.width = docSize[0] + 'px';
		this.overlay.style.height = docSize[1]  + 'px';		

	},

	resize : function(w, h){
		this.width = w;
		this.height = h;
		this.render();
	}

}

function ToggleScrollbars(cond) {	
  if(document.body.scroll==null)
    document.body.style.overflow = cond ? 'auto' : 'hidden';
  else
    document.body.scroll = cond ? 'yes' : 'no';        
}

// element fading, uses time intervals for smooth animation
function fadeElement(el, finalOpacity, duration) {
	var fop = finalOpacity != null ? finalOpacity : 1;
	var opacity = 0;
	var dur = duration != null ? duration : 250;
	var timeLeft = dur;
	var last = new Date().getTime();

	function f() {
		var t = new Date().getTime();
		var elapsed = t - last;
		last = t;

		if(timeLeft <=  elapsed || opacity >= fop){
			el.style.opacity = fop;
			el.style.filter = 'alpha(opacity=' + (fop * 100) + ')';
			return;
		}
		timeLeft -= elapsed;
		opacity = 1 - timeLeft/dur;
		el.style.opacity = opacity;
		el.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
		setTimeout(f, 33);
 	};
  
  f();
}

// returns full document size
function getDocumentSize() {
	var myWidth = document.body.scrollWidth;
	var myHeight = document.body.scrollHeight;
	return [ myWidth, myHeight ];
}

//Window size and scrolling 
//http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

//Window scrolling 
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}
//Window size
function getWindowSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [ myWidth, myHeight ];
}