/*
 * Any link can be used to trigger a popup. Each link with @rel="popupStarter" becomes automatically a trigger.
 * 
 * <a rel="popupStarter" modal="true" onclick="myDynamicPopup.showContent( '<div>someHTML</div>' )" href="">Merkliste anlegen</a>
 * 
 * rel="popupStarter" is required
 * onclick is required, and must call myDynamicPopup.showContent().
 * modal="true" is optional, if set turns the popup in modal mode.
 *  
 */

var DynamicPopup = Class.create();

DynamicPopup.prototype = {
	
	link:null,
		
	initLink:function( anchor ){
		anchor.observe( 'click', function( event ){ 
			event.stop(); 
			myDynamicPopup.start( event.element() ); 
		} );
	},
		
	initialize: function() {	
		if (!document.getElementsByTagName) return;
		$$('a[rel="popupStarter"]' ).each( this.initLink );  
		if( null != $( 'popupOverlay' ) ) return;
		var objBody = $$( 'body' )[ 0 ];
		
		var objOverlay = new Element( 'div', { id:'popupOverlay', style:'display:none' } );  
		objBody.insert( objOverlay );
	
		var objPopup = new Element( 'div', { id:'dynamicPopup', style:'display:none;' } ).addClassName( 'transientLayerBorder' );
		objPopup.observe( 'click', function( e ){ if ( e.element().id == 'dynamicPopup' ) myDynamicPopup.end(); } );

		objPopup.insert(
                Builder.node('div', {}, [
                        Builder.node('div', {}, [
                                Builder.node( 'div', {}, [
                                    Builder.node('div').addClassName('shad_tl'),
                                    Builder.node('div').addClassName('shad_tr')
                                ]).addClassName('shad_tc')
                            ]).addClassName('shad_t'),
                    Builder.node('div', {}, [
                        Builder.node('div', {},[

                            new Element( 'div', { id:'popupContainer' } )

                        ]).addClassName('shad_cr')
                    ]).addClassName('shad_cl'),
                        Builder.node( 'div', {}, [
                                Builder.node( 'div', {}, [
                                    Builder.node( 'div' ).addClassName('shad_bl'),
                                    Builder.node( 'div' ).addClassName('shad_br')
                                ]).addClassName('shad_bc')
                            ]).addClassName('shad_b')
                ]).addClassName('shad')
        );
	
		var objTopNavCloseLink = new Element( 'a', { id:'popupNavClose', href:'javascript:myDynamicPopup.end()' } ).addClassName( 'spritesIcons shclose' );
		objPopup.insert( objTopNavCloseLink );
		
		objBody.insert( objPopup );
	},
	
	/**
	 * 
	 * @param triggerLink is optional
	 * @return
	 */
	start: function( triggerLink ) {	
		this.link = 'undefined' == triggerLink ? null : triggerLink;
		hideSelectBoxes();
		hideFlash();

		// stretch overlay to fill page and fade in
		$( 'popupOverlay' ).style.height = getPageSize()[ 1 ] + 'px';
		new Effect.Appear( 'popupOverlay', { duration: 0.1, from: 0.0, to: 0.2 });

		$( 'popupOverlay' ).stopObserving( 'click' );
		if( 'undefined' == typeof triggerLink || 'true' != triggerLink.readAttribute( 'modal' ) ) $( 'popupOverlay' ).observe( 'click', this.end );
		var scroll = document.viewport.getScrollOffsets()[ 1 ];
		var dynamicPopupTop = Math.round( scroll + 120 );
		var dynamicPopupLeft = Math.max( ( getPageSize()[ 0 ] - 400 ) >> 1, 160 );
		$( 'dynamicPopup' ).setStyle( { left:dynamicPopupLeft + 'px', top:dynamicPopupTop + 'px' } );
		$( 'popupContainer' ).update();
	},

	showContent: function( html ){
		$( 'dynamicPopup' ).show();
		$( 'popupContainer' ).update( html );
		var content = $( 'popupContainer' ).down();
		var dim = content.getDimensions();
		
		// calculate top offset for the lightbox and display 
		var dynamicPopupTop, dynamicPopupLeft;
		if( null != this.link && 'here' == this.link.readAttribute( 'showAt' ) ){
			var pos = this.link.cumulativeOffset();
			dynamicPopupTop = ( dim.height + this.link.viewportOffset()[ 1 ] < document.viewport.getHeight() ) ? pos.top - 8 : ( pos.top - dim.height + 24 );
			if( 0 > dynamicPopupTop ) dynamicPopupTop = pos.top - 8;
			dynamicPopupLeft = Math.min( pos.left - 8, document.viewport.getWidth() - dim.width >> 1 );
			
		}else{
			dynamicPopupTop = getPageScroll() + Math.max( ( getPageSize()[ 3 ] - dim.height ) >> 1, 15 );
			dynamicPopupLeft = Math.max( ( getPageSize()[ 0 ] - dim.width ) >> 1, 160 );
		}
		$( 'dynamicPopup' ).setStyle( { left:dynamicPopupLeft + 'px', top:dynamicPopupTop + 'px' } );

        var avCLasses = [ 'dpw710', 'dpw470' ];
        var curClass = 'dpw' + $( 'popupContainer' ).getWidth();

        $( 'dynamicPopup' ).className = $( 'dynamicPopup' ).className.replace( /dpw[0-9]+/g, '' );

        if (avCLasses.indexOf( curClass ) == -1) {
            curClass = 'dpw0';
        }

        $( 'dynamicPopup' ).addClassName( curClass );
		
		//if dynamic popup contain enter event handler, let's attach it
		var onEnterScript = $( 'dynamicPopup' ).readAttribute( 'onEnterKey' );		
		if( onEnterScript ) document.observe( 'keydown', function( e ){
			if( Event.KEY_RETURN == e.keyCode ){
				eval( onEnterScript );
				document.stopObserving( 'keydown' );
			}
		});
	},

	end: function( noClean ) {
		if( 'undefined' == typeof( noClean ) ) $( 'popupContainer' ).update();
		$( 'dynamicPopup' ).hide();
		$( 'popupOverlay' ).hide();
		document.stopObserving('keydown');
		showSelectBoxes();
		showFlash();
	}
};

function initDynamicPopup() { myDynamicPopup = new DynamicPopup(); }

document.observe( 'dom:loaded', initDynamicPopup );


function showFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i != flashObjects.length; i++) {
		flashObjects[i].style.visibility = "visible";
	}

	var flashEmbeds = document.getElementsByTagName("embeds");
	for (i = 0; i != flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "visible";
	}
}

// ---------------------------------------------------

function hideFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i != flashObjects.length; i++) {
		flashObjects[i].style.visibility = "hidden";
	}

	var flashEmbeds = document.getElementsByTagName("embeds");
	for (i = 0; i != flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "hidden";
	}

}

function showSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

function hideSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}

function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	return arrayPageSize;
}

function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}
	return yScroll;
}