// global vars
var		globalThisEvent;
var		globalThisID;
var currentDetailImg= new Image();
var defaultImgPath='fileadmin/IMAGES/detailViewer/';
var newPosy=0;

// holds id of current selected item
var contentID= '0';
var prevContentID='0';

// start opening animation only if the last one has ended.
// close any still opened detailview first.
var actionClick=0;
var detailViewOpen=0;
var specialMode=0 // 'reopen == dv already open and should be opened for anoth3er item'
var inProcess = 0 // when effects are in action there must be no interaction, otherwise positioning is likley to fail

// position of detailview will only change if page is scrolled
var currentScroll=0 // stores scrollstatus Posi of detailview will only be reset if scroll changes...


var bebuggerCall=0;
var preloadImage = function(imageSrc) {
		loadedImg = new Image();
		loadedImg.src = imageSrc
		return loadedImg;
}
// just a single preloade pic...
var preloadedImg1= preloadImage('fileadmin/IMAGES/detailViewer/misc/btr_close.png');


// tmp highlight of active preview pic, needed for function highlightCurrent()
var highlightedID= 'none';

// pager
var pager_active=0;
var pager_totalItems=0;
var pager_totalPages=0;
var pager_currentPage=0;
var pager_itemsPerPage= 9;
var pager_itemsArr= new Array();
var pager_content='';


var globalVideoObj= new Object();


Effect.DelayedChain = Class.create();
Object.extend(Effect.DelayedChain.prototype, {
    initialize: function(effect, elements, options, timeout){
        this.elements = elements;
        this.effect = effect;
        this.timeout = timeout || 100;
        this.options = Object.extend({}, options || {});

        this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
        this.options.afterFinish = Prototype.emptyFunction;
        setTimeout(this.action.bind(this),1);
    },
    action: function() {
        if(this.elements.length){
            new Effect[this.effect](this.elements.shift(), this.options);
            setTimeout(this.action.bind(this), this.timeout);
        } else {
            if(this.afterFinish) this.afterFinish();
        }
    }
});

Effect.Chain = Class.create();
Object.extend(Effect.Chain.prototype, {
    initialize: function(effect, elements, options){
        this.elements = elements || [];
        this.effect = effect;
        this.options = options || {};
        this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
        this.options.afterFinish = this.nextEffect.bind(this);
        setTimeout(this.nextEffect.bind(this), 1);
    },
    nextEffect: function(){
        if(this.elements.length)
            new Effect[this.effect](this.elements.shift(), this.options);
        else
            this.afterFinish();
    }
});

function hideAll(classname, parentname){

		var elems = document.getElementsByClassName(classname, parentname);
		for (var i = 0; i < elems.length; i++) {
			elems[i].style.display = 'none';
		}

}

function showAll(classname, parentname,serialCall){

		var elems = document.getElementsByClassName(classname, parentname);
		if(pager_active==1){

		if(serialCall==1){
		  for (var i=0; i<elems.length;i++){
            Element.hide(elems[i]);
		  }
		}
		var tmpSliceTo=0;
		if(parseInt(pager_itemsPerPage*pager_currentPage+pager_itemsPerPage,10)>pager_totalItems){
		  tmpSliceTo=pager_totalItems;
		}else{
		  tmpSliceTo=parseInt(pager_itemsPerPage*pager_currentPage+pager_itemsPerPage,10);
		}
		pager_itemsArr= elems.slice(parseInt(pager_itemsPerPage*pager_currentPage,10),tmpSliceTo);

		new Effect.DelayedChain('Appear', pager_itemsArr, { duration: 1 }, 100);
		//pager active, show only part of all items
		}else{
		  new Effect.DelayedChain('Appear', elems, { duration: 1 }, 100);
		}
		//new Effect.DelayedChain('Highlight', elems, { duration: 1 ,startcolor:'#000000', endcolor:'#FF0000'}, 100);
}

function setInProcess(){
	inProcess=1;
	}

function showPrev(arrLength){
	registerValidClick();
	contentID--;
	if(contentID==0)
	contentID=arrLength;
	$('detailsInner').innerHTML=$('boxerDetail_'+contentID).innerHTML;
	detailViewOpen==1
}

function showNext(arrLength){
	registerValidClick();
	contentID++;
	if(contentID>arrLength)
	contentID=1;
	$('detailsInner').innerHTML=$('boxerDetail_'+contentID).innerHTML;
}

function updateDetails(attention){
//alert('update');
setPosi();
		registerValidClick();
		//currentDetailImg= preloadImage('fileadmin/IMAGES/detailViewer/275x275/'+contentID+'.png');

  	if(inProcess!=1){

			if(attention!='reopen'){

		    //Element.hide('previewsContainer');
		    //new Effect.Appear('details',{duration:1});
		    if(detailViewOpen==0){

	        	$('detailsInner').innerHTML=$('boxerDetail_'+contentID).innerHTML;

		    	inProcess=1;

		    		new Effect.Appear('details',{duration:0.5,beforeStart:setPosi ,afterFinish: finishOpenProcess});
		  	}else{
		  		// detailview is already opened
					if(contentID!=prevContentID){
		  		// show other content immo:
					$('detailsInner').innerHTML=$('boxerDetail_'+contentID).innerHTML;
					}else{
						//alert('dont');
					}
		 			//closeDetails('reopen');
		  	}
		  }else{
		  //	alert(contentID);
		  //	alert(thisID);
		  	$('detailsInner').innerHTML=$('boxerDetail_'+contentID).innerHTML;
		  new Effect.Appear('detailsInner',{duration:0.5,beforeStart:setPosi, afterFinish: finishOpenProcess});
		  }
		}
	prevContentID= contentID;
}




function finishOpenProcess(){
	detailViewOpen=1;
	inProcess=0;
	unregisterValidClick()
	//alert('finishupdate');
}

function closeDetails(attention){
	//alert('CLOSE');
	setInProcess();
	registerValidClick();
	if(detailViewOpen==1){
		specialMode= attention;
		if(attention=='reopen'){
			new Effect.Fade('detailsInner',{duration:0.5,afterFinish: finishCloseProcess});
		}else{
			new Effect.Fade('details',{duration:0.5,afterFinish: finishCloseProcess});
		}

	}
}



function finishCloseProcess(){
	//alert('FINISHCLOSE');
	//alert(contentID);
	detailViewOpen=0;
	inProcess=0;
	unregisterValidClick();
	if(specialMode=='reopen'){updateDetails('reopen');}
}


///
// find out if ie runs in quirks mode
//
var docEl = (
             typeof document.compatMode != "undefined" &&
             document.compatMode        != "BackCompat"
            )? "documentElement" : "body";

// register event
// capture it for nc 4x (ok it's a dino)
//
function mousePosi(e) {

    // position where mousemove fired
    //
  var xPos    =  e? e.pageX : window.event.x;
	var yPos    =  e? e.pageY : window.event.y;

	// for not ie remove scroll position
	//
	if (document.all && !document.captureEvents) {
	    xPos    += document[docEl].scrollLeft;
	    yPos    -= document.scrollTop;
    }

}



//function setPosi(e,divID) {

    /* whole setPosi is dump
    // due to pager, it might not be needed anymore at all...

    picsPerRow=3 // must be adjusted
    picH= 130;
    bigH=500;
    defaultOffset=35;
    margins=4;
    extraOffset=0;
    divID= parseInt(divID,10);
    offsetRow=(Math.ceil(divID/picsPerRow))-1;

    // general, the detailview will now be at the exact y posi,
    // still, it has to be chekked if there is enough space for full display:

    newPosi=offsetRow*picH+offsetRow*margins+defaultOffset;
    //alert(newPosi+'='+offsetRow*picH+'+'+offsetRow*margins+'+'+defaultOffset)



    checkBottom= screen.height-e.clientY;
    //alert(checkBottom+' '+e.clientY);
    if(scrollCheck(e)){
        if(checkBottom<670){
            adjustY=bigH-checkBottom;
            //alert('relocate: TO LOW!: '+newPosi);
            newPosi=newPosi-adjustY-300;
            //alert('relocate: to: '+newPosi);
        }else if(e.clientY<120){
            newPosi=newPosi+100;
        }
        $("details").style.top=newPosi+'px';
    }
    currentScroll=document.documentElement.scrollTop;

*/
//}


function setPosi(e,el)	{

var browserIsIE = (document.all && !window.opera);
var iebody = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body;
windowScrollTop = browserIsIE ? iebody.scrollTop : pageYOffset;
//alert(windowScrollTop);

	if(windowScrollTop){
	//alert(windowScrollTop);
	var topIsChanged = 0;
	    if(windowScrollTop >100){   
            newScrollTop= windowScrollTop-100;
            topIsChanged = 1;
            //alert('adjust 100');
	    }
	    if(windowScrollTop >200){
	        newScrollTop= windowScrollTop-200;
	        topIsChanged = 1;
	        //alert('adjust 200');
	    }   
	    
	if(topIsChanged){
	   Element.setStyle('details',{top: newScrollTop+'px'});
	}else{
	   Element.setStyle('details',{top: windowScrollTop+'px'});
	}    
	
	}
}



function setBackgrounds(classname, parentname){


    var elems = document.getElementsByClassName(classname, parentname);
	for (var i = 0; i < elems.length; i++) {
		elems[i].style.background = '#FFFFFF url(fileadmin/IMAGES/detailViewer/130x130/'+elems[i].id.substr(3)+'.png) bottom left no-repeat';
	}


}


function hideAllPics(anz_pics,boxer) {
  registerValidClick();
  for (i=1;i<=anz_pics;i++) {
    pic = "big_"+boxer+"_"+i;
    document.getElementById(pic).style.display = "none";
  }
}

function showPic(pic_nr,boxer) {
    pic = "big_"+boxer+"_"+pic_nr;
    document.getElementById(pic).style.display = "block";
}

function checkClick(event){
	/*
		var debugText=actionClick+' '+detailViewOpen;
	$('debuggerBox').innerHTML=debugText+' call:'+bebuggerCall+ ' function: checkCLick' ;
	bebuggerCall++;
	*/
	if(actionClick==0 && detailViewOpen==1){
			//alert('closeIT!');
			closeDetails();
		}else{
	unregisterValidClick();
	}
	//$('posydisplay').innerHTML=mouseY(event);
	}

function registerValidClick(){
		actionClick=1;
	}

function unregisterValidClick(){
		actionClick=0;
	}

function scrollCheck(){
    if (!e) var e = window.event;
    var scrollStatus=0;
    //alert(document.body.scrollTop)
    //alert(window.document.body.scrollTop);
    //alert(document.documentElement.scrollTop);
    if(document.documentElement.scrollTop!=currentScroll){
        scrollStatus=1;
    }

    return scrollStatus;
}



function pagerSetup(isActive){
    if(isActive==1){
        pager_active=1;
        pager_totalItems= pagerGetItemsTotal('singlePreview','PreviewsContainer');
        pager_totalPages= Math.ceil(pager_totalItems/pager_itemsPerPage);

        // draw pager
        var pager_toLeft='<span id="pagerToLeft" onclick="pagerUpdate(-1,this)"><<</span>';
        var pager_toRight='<span id="pagerToRight"  onclick="pagerUpdate(1,this)">>></span>';
        var pager_Repeat='';

        for(var i=0; i<pager_totalPages; i++){
        pager_Repeat+='<span id="pagerPage_'+i+'" class="pagerSinglePage" onclick="pagerUpdate(this.id,this)">'+(i+1)+'</span>' ;
        }

        pager_content=pager_toLeft+pager_Repeat+pager_toRight;

        $('detailViewerpager').innerHTML=pager_content;

        pagerAdjust();
    }

}

function pagerAdjust(){

    // sets current/ disable unavailable pager controls

    // remove previous In-/Activities
	var allPagesArr = document.getElementsByClassName('pagerSinglePage', 'detailViewerpager');
		for (var i = 0; i < allPagesArr.length; i++) {
			if(allPagesArr[i].id!='pagerPage_'+pager_currentPage){

			    Element.removeClassName(allPagesArr[i], 'currentPagerItem');
			}
		}


    if(pager_currentPage==0){
        Element.addClassName('pagerToLeft', 'inactivePagerItem');
        Element.removeClassName('pagerToRight', 'inactivePagerItem');
    }else if(pager_currentPage==pager_totalPages-1){
        Element.addClassName('pagerToRight', 'inactivePagerItem');
        Element.removeClassName('pagerToLeft', 'inactivePagerItem');
    }else{
        Element.removeClassName('pagerToLeft', 'inactivePagerItem');
        Element.removeClassName('pagerToRight', 'inactivePagerItem');
    }


    // currentpageitem active setzen
    Element.addClassName('pagerPage_'+pager_currentPage, 'currentPagerItem');
    // currentpageitem link entfernen
}

function pagerGetItemsTotal(classname,parentname){

    var elems = document.getElementsByClassName(classname, parentname);
	var tmpTotalItems= elems.length;
	return tmpTotalItems;
}

function mouseY(evt) {
   return evt.clientY ;

}


function pagerUpdate(direction, thisCaller){
    // set right current page
    if(direction==1 || direction==-1){
        pager_currentPage+=direction;
    }else{
    pager_currentPage=parseInt(direction.substr(10),10);
    }
    if(pager_currentPage<0){
        pager_currentPage=0;
    }else if(pager_currentPage>=pager_totalPages){
        pager_currentPage=pager_totalPages-1;
    }


    if(!Element.hasClassName(thisCaller,'inactivePagerItem') && !Element.hasClassName(thisCaller,'currentPagerItem')){
        showAll('singlePreview','previewsContainer',1);
    }
    pagerAdjust();


    // fade all shown

    // show all new
}

function hoverOn(item){
        if(item.id!=highlightedID){
            Element.setStyle(item.id,{backgroundColor: 'rgb(230,230,230)'});
        }

	}

function hoverOff(item){
        if(item.id!=highlightedID){
		  Element.setStyle(item.id,{backgroundColor: 'rgb(255,255,255)'});
        }
	}



function hoverImg(thisDiv,imgUrl, altText){
	   Element.setStyle(thisDiv.id,{background: 'rgb(255,255,255) url('+imgUrl+') top left no-repeat' });
	   if(altText){
	   	$(thisDiv.id).title=altText;
	   }
	}


function highlightCurrent(){

    if(highlightedID != 'none'){
        Element.setStyle(highlightedID,{backgroundColor: 'rgb(255,255,255)'});
    }
    Element.setStyle('ID_'+contentID,{backgroundColor: 'rgb(255,215,0)'});
    highlightedID='ID_'+contentID;
}


function moveDetails(){
//alert('movedetails!');
    var browserIsIE = (document.all && !window.opera);
    var iebody = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body;
    windowScrollTop = browserIsIE ? iebody.scrollTop : pageYOffset;
    //alert(windowScrollTop);
    
    	if(windowScrollTop){
    	//alert(windowScrollTop);
    	var topIsChanged = 0;
    	    if(windowScrollTop >100){   
                newScrollTop= windowScrollTop-100;
                topIsChanged = 1;
                //alert('adjust 100');
    	    }
    	    if(windowScrollTop >200){
    	        newScrollTop= windowScrollTop-200;
    	        topIsChanged = 1;
    	        //alert('adjust 200');
    	    }   
    	    
    	if(topIsChanged){
    	   Element.setStyle('detailViewCon',{top: newScrollTop+'px'});
    	}else{
    	   Element.setStyle('detailViewCon',{top: windowScrollTop+'px'});
    	}    
    	
    	}
    
  
}

// Video Display

function showVideoFile (myVideoObj, attention, srcType){
    
var srcType= srcType;
//alert(myVideoObj);
//alert(attention);
//alert(srcType);

    closeDetailsVideo();
setPosi();    
// calc offset if scrolled
 moveDetails();    
    
globalVideoObj = myVideoObj;
		//registerValidClick();
  	if(inProcess!=1){

			if(attention!='reopen'){

		    //Element.hide('previewsContainer');
		    //new Effect.Appear('details',{duration:1});
		    if(detailViewOpen==0){

	      //  	$('detailsInner').innerHTML='<p>popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch...</p>';
							$('detailsInner').innerHTML=ix_renderVideoObject(myVideoObj,srcType);
		    	inProcess=1;
                     Element.show('detailViewCon');
		    		//new Effect.Appear('detailViewCon',{duration:0.5,beforeStart:setPosi ,afterFinish: finishOpenProcess});
		    		//Element.show('detailViewCon');
		  	}else{
		  		// detailview is already opened

		 			closeDetailsVideo('reopen');
		  	}
		  }else{

		  //	alert(contentID);
		  //	alert(thisID);
		  //$('detailsInner').innerHTML='<p>popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch... popcorn munch... munch...</p>';
		  $('detailsInner').innerHTML=ix_renderVideoObject(myVideoObj,srcType);
		  Element.show('detailViewCon');
		  //new Effect.Appear('detailViewCon',{duration:0.5,beforeStart:setPosi, afterFinish: finishOpenProcess});
		  //Element.show('detailViewCon');
		  }
		}
}


function closeDetailsVideo(attention){
	//alert('CLOSE');
	setInProcess();
	registerValidClick();
	/*
	if(detailViewOpen==1){
		specialMode= attention;
		if(attention=='reopen'){
			//new Effect.Fade('detailViewCon',{duration:0.5,afterFinish: finishCloseProcessVideo});
			Element.hide('detailViewCon');finishCloseProcessVideo();
		}else{
			//new Effect.Fade('detailViewCon',{duration:0.5,afterFinish: finishCloseProcessVideo});
			Element.hide('detailViewCon'); finishCloseProcessVideo();
		}

	}
	*/
	Element.hide('detailViewCon');
	finishCloseProcessVideo();
	
}


function finishCloseProcessVideo(){
	//alert('FINISHCLOSE');
	//alert(contentID);
	detailViewOpen=0;
	inProcess=0;
	unregisterValidClick();
	$('detailsInner').innerHTML=''; // ness. to stop running video!
	if(specialMode=='reopen'){showVideoFile(globalVideoObj,'reopen');}
}
function ix_renderVideoObject (myParams, srcType){

var srcType=srcType;
var description= 	myParams['id']+'_contentGhost';

//	videoParams['id']
//	videoParams['link']		= myLink; 	// http://www.hamburg1video.de/p/de/iLyROoaftr1s.html
//	videoParams['base']		= myBase; 	// http://www.hamburg1video.de
//	videoParams['height']	= myHeight;
//	videoParams['width']	= myWidth;
//  videoParams['title']  = myTitle;  // Boxen: Steffen Kretschmann - Marek Oravsky - hamburg1video
//  videoParams['altPic'] = myaltPic; // http://t.kewego.com/t/0/0396/154x114_iLyROoaftr1s_2.jpg

//<object type="application/x-shockwave-flash" data="http://www.hamburg1video.de/p/de/iLyROoaftr1s.html" width="300" height="277" base="http://www.hamburg1video.de">
//	<param name="movie" value="http://www.hamburg1video.de/p/de/iLyROoaftr1s.html" />
//<param name="wmode" value="transparent" />
//	<param name="base" value="http://www.hamburg1video.de" />
//	<embed src="http://www.hamburg1video.de/p/de/iLyROoaftr1s.html" width="300" height="277" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="http://www.hamburg1video.de">
//		<a href="http://www.hamburg1video.de/video/iLyROoaftr1s.html" title="Boxen: Steffen Kretschmann - Marek Oravsky - hamburg1video"><img src="http://t.kewego.com/t/0/0396/154x114_iLyROoaftr1s_2.jpg" alt="Boxen: Steffen Kretschmann - Marek Oravsky - hamburg1video" width="300" height="277"/></a><br /><a href="http://www.hamburg1video.de/video/iLyROoaftr1s.html">Boxen: Steffen Kretschmann - Marek Oravsky - hamburg1video</a>
//	</embed>
//</object>

	var ret ='';
	
	
if(srcType=='youtube'){
	ret+='<div id="videoCon">';
	
	//ret+='<object width="'+myParams['width']+'" height="'+myParams['height']+'">';
    ret+='<object width="300" height="250">';
	ret+='<param name="movie" value="'+myParams['link']+'"></param>';
	ret+='<param name="wmode" value="transparent"></param>';
	
	//ret+='<embed src="http://www.youtube.com/v/JtS6F-aT5lY" type="application/x-shockwave-flash" wmode="transparent" width="'+myParams['width']+'" height="'+myParams['height']+'"></embed>';
	ret+='<embed src="'+myParams['link']+'" type="application/x-shockwave-flash" wmode="transparent" width="300" height="250"></embed>';
	ret+='</object>';	
	ret+='</div>';	

	ret+='<div id="videoDescriptionCon">';
	ret+= $(description).innerHTML;
	//ret+= $('video_02_contentGhost').innerHTML;
	
	
	ret+='</div>';


}

if(srcType=='hh1'){
	ret+='<div id="videoCon">';
	ret+='<object type="application/x-shockwave-flash" data="'+myParams['link']+'" width="'+myParams['width']+'" height="'+myParams['height']+'" base="'+myParams['base']+'">';
	ret+='<param name="movie" value="'+myParams['link']+'" />';
	ret+='<param name="wmode" value="transparent" />';
	ret+='<param name="base" value="'+myParams['base']+'" />';
	ret+='<embed src="'+myParams['link']+'" width="'+myParams['width']+'" height="'+myParams['height']+'" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="'+myParams['base']+'">';
	ret+='	<a href="'+myParams['link']+'" title="'+myParams['title']+'"><img src="'+myParams['altPic']+'" alt="'+myParams['title']+'" width="'+myParams['width']+'" height="'+myParams['height']+'"/></a><br /><a href="'+myParams['link']+'">'+myParams['title']+'</a>';
	ret+='</embed>';
	ret+='</object>';
	ret+='</div>';

	ret+='<div id="videoDescriptionCon">';
	ret+= $(description).innerHTML;
	//ret+= $('video_02_contentGhost').innerHTML;
	ret+='</div>';
	
}	
	return ret;
}