/**
      * These options are used to define the jump-steps      
	  * of the jump buttons.
	  */
	function ImageLooopButtonsConfig () {

            // Set the negative jump steps of the navigation buttons
            this.ljButtonPrev = -1;
            this.ljButtonPrev5 = -5;
            this.ljButtonPrev10 = -10;	

            // Set the positive jump steps of the navigation buttons
            this.ljButtonNext = 1;
            this.ljButtonNext5 = 5;
            this.ljButtonNext10 = 10;
	}
	
	/**
	 * These options change the look&feel of the popinWindow
	 */
	function ImageLooopDesingConfig( ) {

            // Enter width of popinWindow here. Use 400 min!
            // And please don't forget to adopt the value of
            // this.lengthOfSelectBoxMsg appropriately
            this.widthX = "600";
	
            // Enter height of popinWindow here
			      // !!USE 132, 162, 172, 202, 227, 252 AS VARIABLE VALUE ONLY!!
			      this.heightY = "450";	
			
            // Enter css parameter for the popinWindow border. e.g.: thin solid #FFE384
            //this.setBorder = "thin solid #FFE384";
            this.setBorder = "dotted black 1px;";

            // Enter the background color of popinWindow here
            this.bgcolor = "#F2ECDF";

            // Enter the background image path of popinWindow here
            //this.bgImgPath = "images/looopswitcher/default_bg.gif";

            // Enter css parameter to repeat the background image. e.g.: repeat
            //this.repeatBg = "no-repeat";

            // Enter position of popinWindow here
            // !! If you change this setting, please use the complete left, top, 
            // margin-left, margin-top and position variables!!
            //
            // e.g.: 
            // var position = "left: 10px; top: 10px; margin-left: 0px; margin-top: 0px; position: relative;";
            //
            // To center the popinWindow within the VISIBLE area,
            // enter  this.position = "default";
            //
            this.position = "default";
            this.positionPosition = "absolute";

            // Set the position of the close-button in the popinWindow area
            this.closeBtPosition = "top: 0px; right: 575px;";

            // This option activates or deactivates navigation buttons.
            this.showNavButtons = false;

            // This option activates or deactivates navigation selectbox.
            this.showSelectBox = false;

            // This option sets the length of the text within the navigation selectbox
            this.lengthOfSelectBoxMsg = 35;
	}
	


	// **************************************************************************************************
	// **************************************************************************************************
	// No need to touch anything below (SetOutputCSS for position modification only)
	// **************************************************************************************************
	// **************************************************************************************************
	function PopinModel( designConfig, buttonsConfig ) {
		this.popinInit = false;
		
		this.arrUrlList = new Array();
		
		this.arrIdList = new Array();
		
		this.arrCurrentIndex = 0;

		this.allDivs;
		
		this.selectBox = null;

		this.elBtnClose;
		
		this.elBtnFirst;
		
		this.elBtnLast;	
		
		/******************************************** private methods ***********************************************/
		/**
		 * this method is used to set new internal idx.
		 */
		var setCurrentIdx = function( self, idx ) {
		    self.arrCurrentIndex = parseInt( idx );
		};
		
		var appendAttributeToTag = function ( element, name, value ) {
			var newAttr = document.createAttribute( name );
			newAttr.nodeValue = value;
			element.setAttributeNode( newAttr );
		};
		
		var parseActionId = function (elm) {
			var action = elm.id;
			
			if (action != null) 
			    return action;
			
			return elm.parentNode.id;
		};
		
		var changeCurrentIndex = function ( self, newIdx ) {
			if( newIdx >= self.arrUrlList.length 
			    || newIdx < 0 ) 
					  return false;
			
			self.arrCurrentIndex = newIdx;
		};
		
	/**
		* This function can only be called from the init() function.
		*
		* @global array arrIdList must be allready filled
		*/
		var initSelectNav = function( self ) {
			if (  self.popinInit) return;

			var popinSelectorDiv = document.getElementById( "ljButtonSelect" );
		  
			if( popinSelectorDiv == null ) return alert( "please add an empty <div> with id=ljButtonSelect. this div is used to declare a select-box." );
			
			self.selectBox = document.createElement("select");

                        if( !designConfig.showSelectBox ) return;

			appendAttributeToTag(self.selectBox, "name", "popinlist");
			appendAttributeToTag(self.selectBox, "size", "1");
			
			self.selectBox.onchange = function() { self.onChangeSelectionOfSelectBox( self.selectBox ); return false; };
			
			popinSelectorDiv.appendChild( self.selectBox );

			for( i in self.arrIdList ) {
			       var selectOption = document.createElement("option");
			       
			       var absoluteJumpPos = i;
			       appendAttributeToTag(selectOption, "value", absoluteJumpPos);
			       
			       var maxLength = designConfig.lengthOfSelectBoxMsg + 3;
			       
			       var trimedContent = self.arrIdList[i] ;
			       
			       if( trimedContent.length > maxLength )
				   trimedContent = trimedContent.substring(0, designConfig.lengthOfSelectBoxMsg) + "...";
				   
			       var content = document.createTextNode( trimedContent );
			       
			       selectOption.appendChild( content );
			       self.selectBox.appendChild( selectOption );
			}		
		};
		
		
	/**
		* This function can only be called from the init() function.
		* It fills the both global arrays arrUrlList and arrIdList.
		*
		* @global array arrUrlList ist empty
		* @global array arrIdList
		* @visibility private
		*/
		var initPopinArrays = function (self) {			
			if ( self.popinInit ) return;
		
			var elList = document.getElementsByName("popinMember");
			
			for (var i = 0; i < elList.length; ++i) {
				var sHref = elList[i].href;
				if (sHref.charAt(sHref.length-1)!='/') sHref+="/";
				
				self.arrUrlList[i] = sHref;
				self.arrIdList[i]   = elList[i].id;
			}
		};
		
	/**
		* This function can only be called from the init() function.
		* 
		* @visibility private
		*/
		var initOnclickFunctions = function ( self ) {
			if ( self.popinInit ) return;

      self.elBtnClose.onclick = function() { self.onButtonClose(); return false; };

			self.elBtnFirst.onclick = function() { self.onButtonJumpAbsolut(0); return false; };
			
			var lastElement = self.arrUrlList.length - 1 ;
			self.elBtnLast.onclick = function() { self.onButtonJumpAbsolut(lastElement); return false; };
			
			for( i in buttonsConfig ) {
			   var navi =document.getElementById( i );
			   navi.onclick = function() { self.popinBtnClicked(this); return false; };
			}
		};
		
	/**
		* This function can only be called from the init() function.
		*
		* @visibility private
		*/
		var initAllDivs = function ( self ) {
			if ( self.popinInit) return;
		
			// hardcoded divs :::
			self.allDivs = new Array(
				document.getElementById("popinWindow"),
				self.elBtnClose, self.elBtnFirst, self.elBtnLast
			);
			
			// configured divs :::
			for( i in buttonsConfig ) {
			      self.allDivs.push( document.getElementById(i) );
			}
		};
		
   var showHideDiv = function (el, bShow) {
			try {
				if (bShow && el.style.visibility!="visible")
					el.style.visibility="visible";
				if (!bShow && el.style.visibility!="hidden")
					el.style.visibility="hidden";
			}
			catch (e) {
				alert("A problem is occured ::: " + e.message+" : "+el+","+bShow);
			}
		};

		var showHideDivs = function (elList, bShow) {
			for (i in  elList ) {
				if (elList[i] == null) 
					continue;
					
				showHideDiv(elList[i],bShow);
			}
		};
		
/********************************************************** public methods ********************************************/
		
		this.init = function() {
		   if (  this.popinInit ) return;
		   
		   this.elBtnFirst = document.getElementById("ljButtonPrevAll");
		   this.elBtnLast = document.getElementById("ljButtonNextAll");
		   this.elBtnClose = document.getElementById("popinWindowClose");
		   
		   initPopinArrays( this );
		   initOnclickFunctions( this );
		   initSelectNav( this );
		   initAllDivs( this );	    

		   this.popinInit=true;
		};
		
		
   /**
		 * Opens a popinWindow with an index as parameter.
		 *
		 * @global array arrUrlList
		 */
		this. openpopinWindowWithIdx = function ( idx ) {
			this.onButtonJumpAbsolut( idx );
			
            // TODO: optimieren ? damit nicht manche divs zuerst ausgeschaltet und anschliessend eingeschaltet werden (oder anders herum)
			showHideDivs( this.allDivs, true);
			
			this.showHideButtons(this.allDivs, true);
		};
		
   /**
		 * Opens a popinWindow with an anchor as parameter.
		 *
		 * @global array arrUrlList
		 */
		this. openpopinWindowWithAnchor = function ( elAnchor ) {
			for ( i in this.arrUrlList ) {
				if (this.arrUrlList[i] == elAnchor.href) {
					setCurrentIdx( this, i );
					break;
				}
			}
			
			this.openpopinWindowWithIdx( this.arrCurrentIndex );
		};
		
		this.openpopinWindow = function(elAnchor) {
			window.location.hash="top";
		
    this.init();
			
    if( !elAnchor || elAnchor == null ) {
      var newIdx = Math.round( Math.random() * this.arrUrlList.length - 1 ) ;
      return this.openpopinWindowWithIdx( newIdx );
    }
    
    var value = parseInt( elAnchor + "" );
    
    if( !isNaN( value ) ) 
         return this.openpopinWindowWithIdx( value );
    
    this.openpopinWindowWithAnchor( elAnchor );
		};

		this.popinBtnClicked = function (elm) {
			var action = parseActionId(elm);
			
			if( action == null ) return false;
			
			var value = parseInt( buttonsConfig[ action ] );
			
			if( value == undefined || isNaN(value) ) 
			     return false;
			
			return this.onButtonJump(value);
		};

		/**
		  * @param integer step number of steps to jump
		  * @global integer arrCurrentIndex current index in the array of elements
		  */
		this.onButtonJump = function (step) {
			var nextPossiblePos = this.arrCurrentIndex + step;
		
			if( this.arrUrlList.length < nextPossiblePos ) return false;
			
			this.arrCurrentIndex += step;
			this.switchPopin( );
			
			return true;
		};
		
		this.onButtonClose = function() {
		    showHideDivs(this.allDivs,false);
		    return true;
		};
		
		this.onChangeSelectionOfSelectBox = function ( selectBox ) {
		    if( !designConfig.showSelectBox ) return;
		
		    var optionNode = selectBox.options[ selectBox.selectedIndex ];
	  
		    var jumpTo = parseInt( optionNode[ 'value' ] );
		    this.onButtonJumpAbsolut(jumpTo);
		};
		
		/**
		  * @param integer newIdx new position in the array
		  * @global integer arrCurrentIndex current index in the array of elements
		  */
		this.onButtonJumpAbsolut = function ( newIdx ) {
			changeCurrentIndex( this, newIdx ) ;
			this.switchPopin( );
			
			return true;
		};
		
		this.showHideButtons = function () {
			for( i in  buttonsConfig ) {
			     var out = "";
			
			     var naviElement = document.getElementById( i );
			     var step = buttonsConfig[i];
			     
			     var possible  = false;
			     
			     var sum =  this.arrCurrentIndex + step;
			     if( step < 0 )
				   possible = sum >= 0;
			     
			     else if( step > 0 ) 
				   possible = sum < this.arrUrlList.length;
			     
			     else return;
					     
			     var showIt = (possible && designConfig.showNavButtons);
					     
			     out += " show it ::: " + showIt + " == " + possible + " (" +   step + " ? " + this.arrCurrentIndex + ") = " + sum +  "\n";		     
			     
			     showHideDiv(naviElement,  showIt);
			}
			
			showHideDiv(this.elBtnFirst, (designConfig.showNavButtons 
									    && (this.arrCurrentIndex!=0)) );
									    
			showHideDiv(this.elBtnLast, (designConfig.showNavButtons 
									    && (this.arrCurrentIndex!=this.arrUrlList.length-1)));
		};
		
		this.switchPopin = function ( ) {
			this.showHideButtons();
			
			var arrUrlListLength = this.arrUrlList.length;
			var looopW = designConfig.widthX - 103;
			var looopH = designConfig.heightY - 52;

			if (this.arrCurrentIndex>=arrUrlListLength)
				this.arrCurrentIndex=arrUrlListLength-1;

			if (this.arrCurrentIndex<0)
				this.arrCurrentIndex=0;
				
			popinUrl = this.arrUrlList[this.arrCurrentIndex];
			//iframePopin.location.href = popinUrl;
			
			//document.getElementsByName('myspaceEmail')[0].value;
			//document.getElementsByName("Zutat")[0].checked = true;
			//alert('ElementByNameResult: ' + document.getElementsByName('myspacePassword')[0].value);

			popinUrl = popinUrl + "?myspaceEmail=" + document.getElementsByName('myspaceEmail')[0].value + "&myspacePassword=" + document.getElementsByName('myspacePassword')[0].value + "&id=" + document.getElementsByName('id')[0].value;
			//alert('popinurl: ' + popinUrl);
			iframePopin.location.href = popinUrl;

			// title-tags of buttons
			this.elBtnFirst.firstChild.firstChild.setAttribute("title", this.arrIdList[0]);

			this.elBtnLast.firstChild.firstChild.setAttribute("title", this.arrIdList[arrUrlListLength-1]);
			 
			 
			for( i in  buttonsConfig ) {
			     var naviElement = document.getElementById( i );
			     
			     var jumpStep = parseInt( buttonsConfig[ i ] );
			     if( isNaN(jumpStep) ) continue;
			     
			     var newIdx = Math.max(this.arrCurrentIndex + jumpStep, 0);
			     
			     naviElement .firstChild.firstChild.setAttribute( "title", 
						    this.arrIdList[ newIdx ] );
			}
			
			if( designConfig.showSelectBox )
			     this.selectBox.selectedIndex = this.arrCurrentIndex;
		};
	}
	
	
	var popinDesignConfig = new ImageLooopDesingConfig();
	var popinModel = new PopinModel( popinDesignConfig, new ImageLooopButtonsConfig( ) );
	
	function writeCSS() {
		if (popinDesignConfig.position != "default") {
			var SetOutputCSS = "<style type=\"text/css\">#popinWindow { z-index: 5; background-color: "+popinDesignConfig.bgcolor+"; "+
			"background-image: url("+popinDesignConfig.bgImgPath+"); background-repeat: "+popinDesignConfig.repeatBg+"; float:left; border: "+popinDesignConfig.setBorder+"; "+
			"visibility: hidden; height: "+popinDesignConfig.heightY+"px; width: "+popinDesignConfig.widthX+"px; "+popinDesignConfig.position+"} ";
		} else {
			popinDesignConfig.positionPosition = "absolute";
			var marginLeft = -Math.round(popinDesignConfig.widthX/2);
			var marginTop = -Math.round(popinDesignConfig.heightY/2);
			var SetOutputCSS = "<style type=\"text/css\">#popinWindow { z-index: 5; background-color: "+popinDesignConfig.bgcolor+"; "+
			"background-image: url("+popinDesignConfig.bgImgPath+"); background-repeat: "+popinDesignConfig.repeatBg+"; float:left; border: "+popinDesignConfig.setBorder+"; "+
			"visibility: hidden; height: "+popinDesignConfig.heightY+"px; width: "+popinDesignConfig.widthX+"px; "+
			"left:50%; top:50%; margin-left: "+marginLeft+"px; margin-top: "+marginTop+"px; position: absolute;} ";
		}
		
		SetOutputCSS+=
			"#popinWindowClose { float:right; z-index: 6; position: absolute; left: "+(popinDesignConfig.widthX-35)+"px; }</style>";

		document.getElementById("popinWindow").style.position=popinDesignConfig.positionPosition;

		document.write(SetOutputCSS);
	}


	function writeIframe() {
		var heightYNav = popinDesignConfig.heightY - 35;
		var widthXNav = popinDesignConfig.widthX - 40;
		var SetOutputIframe = "<iframe src=\"\" name=\"iframePopin\" width="+widthXNav+" height="+heightYNav+" scrolling=\"no\" frameborder=\"0\" style=\"border:0; margin:0px; padding:0px;\" allowtransparency=\"true\" background-color=\"transparent\"></iframe>";
		document.write(SetOutputIframe);
	}

    /**
	 * @visibility public
	 */
	function openpopinWindow(elAnchor) {
		popinModel.openpopinWindow( elAnchor );
	}