//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

function openPopUpDialog(ID, titel, height, width, image, content, ajaxFile, ajaxValues, CSSclass, modal, modaltype, ClosePosition, scrollleiste)
{
	var template=' <div class="'+CSSclass+'"><span id="popupStatus-'+(popupStatus+1)+'" style="display:none;">test</span>';
	if (modal==true)
	{
		template=template + '<div id="backgroundPopup'+ID+'" class="'+CSSclass+' backgroundPopup" style="position:fixed; height:10000px;width:5000px; z-index:1100"></div>';
	}

	//var width2 = parseInt(width) + 50;

	template=template + ' \
					 <div style="visibility:hidden;">\
					 <div id="popupBox'+ID+'" class="'+CSSclass+' popupBox" style="width:'+width+'px; height:'+height+'px;">\
					 <div id="draggable'+ID+'" style="left:0px; top:0px;" class="ui-widget-content">\
					 <table cellspacing="0" cellpadding="0" border="0" style="width:'+width+'px;">\
					 <tr id="draggableHandel'+ID+'">\
					 <td class="'+CSSclass+' BorderUpperLeft">&nbsp;&nbsp;</td> 	\
					 <td valign="top" class="'+CSSclass+' backgrounddivbox BorderTop">';
	if(ClosePosition != "")
	{
		template=template +'\
						 <div style="float:'+ClosePosition+'"> '


						 template=template +'<a id="popupBoxClose'+ID+'" class="'+CSSclass+' popupBoxClose"></a>'
						 template=template +'</div>';
	}
	var positionLine = 0;
	var positionHeadline = 0;
	var widthLine=width-115;
	var positionTopLine=40;
	if (image != "")
	{
		template=template +	'<div class="'+CSSclass+' PopUpImage" style="float:left;"><img id="logobox" src="'+image+'" width="30" height="30" alt="" border="0"></div>';
		positionLine  = 40;
		positionTopLine= 40;
		positionHeadline = 10;
		widthLine=width-135;
	}

	// Bei Popups mit Scrollbar muss die Hoehe nochmal im "ScrollPaneDiv1" gesetzt werden.
	var optionalHeight= '';
	if (scrollleiste != '') {
		optionalHeight='height:'+height+'px';
	}

	template=template + ' \
					 <div class="'+CSSclass+' headlinetext" style="padding-left:'+positionHeadline+'px; float:left; width:'+widthLine+'px;">'+titel+'</div>\
					 <div style="clear:both;"></div> \
					 <div class="'+CSSclass+' headerline" style="padding-left:'+positionLine+'px;"><img src="/images/templates/linePopUpBox.gif" style="height:1px; position:absolute; top:'+positionTopLine+'px; width:'+widthLine+'px;" alt="" border="0"></div>\
					 </td>\
					 <td class="'+CSSclass+' BorderUpperRight">&nbsp;</td>\
					 </tr>\
					 <tr>\
					 <td class="'+CSSclass+' BorderLeft">&nbsp;</td>\
					 <td class="'+CSSclass+' backgrounddivbox">\
					 <div id="videoplayerdiv'+ID+'"></div>\
					 <div id="ScrollPaneDiv1'+ID+'" style="z-index:5; '+optionalHeight+'">\
					 <div class="ui-widget-header" id="ajaxText'+ID+'"> \
					 </div>\
					 </div>\
					 </td>\
					 <td class="'+CSSclass+' BorderRight">&nbsp;&nbsp;&nbsp;&nbsp;</td>\
					 </tr>\
					 <tr>\
					 <td class="'+CSSclass+' BorderBottomLeft">&nbsp;</td>\
					 <td class="'+CSSclass+' BorderBottom">&nbsp;</td>\
					 <td class="'+CSSclass+' BorderBottomRight">&nbsp;</td>\
					 </tr>\
					 </table>\
					 </div>\
					 </div>\
					 </div>\
					 </div>\
					 ';

	mytemplate = document.createElement('div');
	mytemplate.id = "CompleteChild"+ID;
	mytemplate.innerHTML=template;
	document.body.appendChild(mytemplate);


	if (content!= "")
	{
		$("#ajaxText"+ID).html(content);
	}

	if (ajaxFile != "")
	{
		eval('$.get("'+ajaxFile+'",'+ajaxValues+',  function(data){   document.getElementById("ajaxText'+ID+'").innerHTML=data;  $(".scroll-pane").jScrollPane({showArrows:true,scrollbarWidth:13,arrowSize:14,dragMaxHeight:28,dragMinHeight:28,	wheelSpeed:50,scrollbarMargin:30});});');

	}


	$("#draggable"+ID).draggable({ cancel:"div.ui-widget-header" });
	$("#draggable"+ID).draggable('disable');
	$("#draggableHandel"+ID).mouseenter(function(){
			$("#draggable"+ID).draggable('enable');
			});

	$("#draggableHandel"+ID).mouseleave(function(){
			$("#draggable"+ID).draggable('disable');
			});



	if (ClosePosition != "")
	{
		$("#popupBoxClose"+ID).click(function(){
				disablePopup(ID);
				});

	}

	if (ClosePosition!= "")
	{
		//Click out event!
		$("#backgroundPopup" + ID).click(function() {
				if (!modal)
				disablePopup(ID);
				});
		//Press Escape event!
		$(document).keypress(function(e){
				if(e.keyCode==27 && popupStatus>0){
				disablePopup(ID);
				}
				});

	}

	if (scrollleiste != false)
	{
		$('#ScrollPaneDiv1'+ID).jScrollPane({showArrows:true,
				scrollbarWidth:13,
				arrowSize:14,
				dragMaxHeight:28,
				dragMinHeight:28,
				wheelSpeed:50,
				scrollbarMargin:30});

	}


	centerPopup(ID);
	loadPopup(ID, modaltype);

}


function openES3PopUp(ID, CSSclass)
{
	var template=' <div class="'+CSSclass+'"><span id="popupStatus-'+(popupStatus+1)+'" style="display:none;"></span>';
	template=template + '<div id="backgroundPopup'+ID+'" class="'+CSSclass+' backgroundPopup" style="position:fixed; height:10000px;width:5000px; z-index:1100"></div>';

	parent.$("#"+ ID).css("display", "block");
	mytemplate = document.createElement('div');
	mytemplate.innerHTML=template;
	document.body.appendChild(mytemplate);
	
	$("#backgroundPopup"+ID).css("opacity","0.7");
	$("#backgroundPopup"+ID).fadeIn("slow");
}


function openPopUpDialog2(ID, titel, height, width,  content ,CSSclass, modal, modaltype,ClosePosition, background)
{

	var template=' <div class="'+CSSclass+'"><span id="popupStatus-'+(popupStatus+1)+'" style="display:none;">test</span>';
	if (modal==true)
	{
		template=template + '<div id="backgroundPopup'+ID+'" class="'+CSSclass+' backgroundPopup" style="position:fixed; height:10000px;width:5000px; z-index:1100"></div>';
	}

	template=template + ' \
					 <div style="visibility:hidden;">\
					 <div id="popupBox'+ID+'" class="'+CSSclass+' popupBox" style="width:'+width+'px; height:'+height+'px; ">\
					 <div id="draggable'+ID+'" style="width:'+width+'px; height:'+height+'px; background-image:url('+background+');  background-repeat:repeat-none;  left:0px; top:0px;" class="ui-widget-content">';

	if(ClosePosition != "")
	{
		template=template + '<div style="float:'+ClosePosition+'"><a id="popupBoxClose'+ID+'" class="popupBoxCloseB"></a></div>';
	}

	template=template + '<div  id="ScrollPaneDiv1'+ID+'" style="z-index:5; ">\
					 <div class="ui-widget-header" id="ajaxText'+ID+'"> \
					 </div>\
					 </div>\
					 </div>\
					 </div>\
					 </div>\
					 </div>\
					 ';

	mytemplate = document.createElement('div');
	mytemplate.id = "CompleteChild"+ID;
	mytemplate.innerHTML=template;
	document.body.appendChild(mytemplate);


	if (content!= "")
	{
		$("#ajaxText"+ID).html(content);
	}



	$("#draggable"+ID).draggable({ cancel:"div.ui-widget-header" });

	if (ClosePosition != "")
	{
		$("#popupBoxClose"+ID).click(function(){
				disablePopup(ID);
				});

		$("#popupBoxClose"+ID).click(function(){
				disablePopup(ID);
				});

	}

	if (ClosePosition!= "")
	{
		//Click out event!
		$("#backgroundPopup"+ID).click(function(){
				disablePopup(ID);
				});
		//Press Escape event!
		$(document).keypress(function(e){
				if(e.keyCode==27 && popupStatus>0){
				disablePopup(ID);
				}
				});

	}

	centerPopup(ID);
	loadPopup(ID, modaltype);

}


//loading popup with jQuery magic!
function loadPopup(id, modaltype){

	//loads popup only if it is disabled
	if(popupStatus>=0)
	{

		if (modaltype=="dark")
		{
			$("#backgroundPopup"+id).css({
					"opacity": "0.7"
					});
		}
		else
		{
			if (modaltype=="mediumdark")
			{
				$("#backgroundPopup"+id).css({
						"opacity": "0.55"
						});
			}
			else{
				if (modaltype=="medium")
				{
					$("#backgroundPopup"+id).css({
							"opacity": "0.4"
							});
				}

				else
				{
					$("#backgroundPopup"+id).css({
							"opacity": "0"
							});
				}
			}
		}



		$("#popupBox"+id).hide();
		$("#backgroundPopup"+id).fadeIn("slow");
		$("#popupBox"+id).toggle("fold",{},1000);
		popupStatus++;


		$("#popupBox"+id).css({
				"visibility": "visible"
				});


				if(!$.support.opacity)
				{
						$("#popupBoxClose" +id).addClass("png_picture");
				}

	}
}

//disabling popup with jQuery magic!

function disablePopup(id){

	if (top.popupStatus >0)
	{
		if($("#CompleteChild"+id).find("#popupStatus-"+popupStatus).length>0)
		{

			top.$("#backgroundPopup"+id).fadeOut("slow");

			top.$("#popupBox"+id).css({
					"visibility": "hidden"
					});

			/*var Knoten = top.document.getElementById("CompleteChild"+id);
				top.document.body.removeChild(Knoten);*/
			top.$('#CompleteChild'+id).remove();

			top.popupStatus--;
		}

	}
}

//centering popup
function centerPopup(id){
	//request data for centering



	var windowWidth = getWidth();
	var windowHeight = getHeight();
	var popupHeight = $("#popupBox"+id).height()+30;
	var popupWidth = $("#popupBox"+id).width()+30;

	var Scrollheight = top.document.documentElement.scrollTop


		if (Scrollheight == 0 && !!top.window.pageYOffset)
		{
			Scrollheight = top.window.pageYOffset;
		}

	var LeftPosition = (windowWidth) ? windowWidth/2 - popupWidth/2 : 0;
	var TopPosition = (windowHeight) ? windowHeight/2 - popupHeight/2 : 0;
	TopPosition  = TopPosition > 30 ? TopPosition + Scrollheight -30 : 0;


	//centering
	$("#popupBox"+id).css({
			"position": "absolute",
			"top": TopPosition,
			"left": LeftPosition

			});

	$("#draggable"+id).css({
			"top": "0px",
			"left": "0px"
			});

	if(navigator.platform.match(/ipad/gi))
	{
		 $("#backgroundPopup"+id).css({
				"position": "fixed",
				"width": "100000px",
				"height": "100000px"
		 });
	}
}


function getWidth() {
	if (window.innerWidth) {
		return top.window.innerWidth;
	} else if (document.documentElement && document.documentElement.clientWidth){
		return document.documentElement.clientWidth;
	} else
	{
		return screen.availWidth;
	}
}


function getHeight() {
	if (window.innerHeight) {
		return window.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight){
		return document.documentElement.clientHeight;
	} else {
		return screen.availHeight;
	}
}



