var myBox = {
	'background_id' : '#lightbox_bg',
	'box_id' : '#lightbox',
	'content_id' : '#lightbox_content',
	'hasLeftPic' : false,
	'hasRightPic' : false,
	'template'	: '',
	'init_run'	: false,
	'preloader_img_path' : '/html/images/main/lightbox/ajax-loader.gif',
	'preloader_img' : new Image(),
	'html_store' : new Array(),
	'start' : new Date(),
	'case_title' : '',
	'galleryPos' : 1,
	
	init : function() {
		var dim = getPageSize();
		
		if (myBox.init_run == false) {
			
			var html = '<div id="lightbox_bg"></div>'+
							'<div id="lightbox">'+
								'<div class="l_inner">'+
									'<div class="l_head">'+
										'<div class="l_buttons">'+
											'<a href="#" class="close_icon"><span><!--icon//--></span></a>'+
											'<a href="#" class="close">close window</a>'+
											'<a href="#" class="print_icon"><span><!--icon//--></span></a>'+
											'<a href="#" class="print">print</a>'+	
										'</div>'+
										'<div class="l_headline"><h3>Case title</h3></div>'+
										'<div class="clear">&nbsp;</div>'+	
									'</div>'+
									'<div id="lightbox_content" class="content_abstand">'+	
									'</div> <!-- Ende: lightbox_content //-->'+
								'</div> <!-- Ende: l_inner //-->'+
							'</div> <!-- Ende: lightbox //-->';
			
			$('body').append(html);
			
			$(myBox.box_id+" .l_head a.close_icon").click(function(){
	            myBox.close(); 
	        } );
			$(myBox.box_id+" .l_head a.close").click(function(){
	            myBox.close(); 
	        } );
			
			//print btn --------------------------
			$(myBox.box_id+" .l_head a.print_icon").click(function(){
	            myBox.printView(); 
	        } );
			$(myBox.box_id+" .l_head a.print").click(function(){
	            myBox.printView(); 
	        } );
			
			
			$(myBox.background_id).click(function(){
				if (myBox.template == 'compare_print' || myBox.template == 'overview_print') {
					myBox.printViewHide();
				}
				myBox.template = 'overview';
	            myBox.close(); 
	        } );			
			
			myBox.preloader_img.src = myBox.preloader_img_path;
			
			myBox.init_run = true;
		}
		
		
		
		//init bg --------------
		var h = dim[1]/12;
		$(myBox.background_id).css({ height:h+"em" });
		hideSelectBoxes();
		hideFlash();
		$(myBox.background_id).show();
		
		
		var data = myBox.getData();
		
		
		//panel head ------------------------------
		var head = "Case Study";	
		if (data.title) head = data.title;
		$(myBox.box_id+" .l_head h3").html(head);
		
		//overview -------------------------------
		myBox.renderOverview();
		
		//show panel --------------
		$(myBox.box_id).show();
		
		//open time ----------------------
		myBox.start = new Date();
		trackCasestudygalleryOpen();
	},
	
	close : function () {
		if (myBox.template == 'compare_print' || myBox.template == 'overview_print') {
			myBox.printViewHide();
		} else {
			if (myBox.template == 'overview') {
				showSelectBoxes();
				showFlash();
				
				$("#page").show();
				$(myBox.box_id).hide();
				$(myBox.background_id).hide();
				
				myBox.trackViewtime();
			} else {
				myBox.renderOverview();
			}
		}
		return false;
	},
	
	trackViewtime : function () {
		var nun = new Date(); 
        var diff = Math.round((nun.getTime() - myBox.start.getTime())/1000);
		trackCasestudygalleryViewtime (myBox.case_title, myBox.galleryPos, diff);
	},
	
	printView : function () {
		if (myBox.template != 'compare_print' && myBox.template != 'overview_print' ) {
			$("#page").hide();
			myBox.html_store[0] = $("#printHeader").html();		
			$("#printHeader").html("");		
			$("#printHeader").css("border-bottom-width","0px");		
			myBox.html_store[1] = $("#printFooter").html();		
			$("#printFooter").html("");	
			if ( !$("#lightbox_bg").hasClass('printView') ) $("#lightbox_bg").addClass('printView'); 
			if ( !$("#lightbox").hasClass('printView') ) $("#lightbox").addClass('printView'); 
			myBox.template += '_print';
		}
		window.print();
		
		return false;
	},
	
	printViewHide : function () {
		$("#page").show();
		$("#printHeader").html(myBox.html_store[0]);		
		$("#printHeader").css("border-bottom-width","1px");		
		$("#printFooter").html(myBox.html_store[1]);
		if ( $("#lightbox_bg").hasClass('printView') ) $("#lightbox_bg").removeClass('printView'); 
		if ( $("#lightbox").hasClass('printView') ) $("#lightbox").removeClass('printView'); 
		if ( myBox.template == 'overview_print' ) myBox.template = 'overview';
		if ( myBox.template == 'compare_print') myBox.template = 'compare';
	},
	
	renderOverview : function () {
		//var data = getLightboxData();
		var data = myBox.getData();
		
		//parse data and render templates  -------------------
		$(myBox.content_id).empty();
		$(myBox.content_id).attr("class", "content_abstand");
		
		$.each(data.rows, function(i,row){
        	if (row.images) {
				var row_id = "imagerow_"+i;
				
				$(myBox.content_id).append('<div class="img-row" id="'+row_id+'"></div>');
				
				$.each(row.images, function(n,image){
					if (n < 2) {
						var img_html = '<div class="img-item">';
					} else {
						var img_html = '<div class="img-item last">';
					}
					
          var l = (image.label && image.label!="") ? image.label : 'Zoom and compare';
          
          img_html += 			'<strong>'+image.titleshort+'</strong>'+
											'<div class="pic_box_middle"><a href="#top" class="detaillink value_'+i+'_'+n+'"><img src="'+image.path2+'" /></a><div class="image-overlay"><div><h5>'+image.title+'</h5><p>'+image.desc+'</p><p></p></div></div></div>'+
											'<div class="zoombtn">'+
												'<span class="image-info"><em>Information</em></span>'+
                        '<a href="#top" class="detaillink value_'+i+'_'+n+' icon"><!--icon//--></a>'+
												'<a href="#top" class="detaillink value_'+i+'_'+n+'">'+l+'</a>'+
												'<div class="clear">&nbsp;</div>'+
											'</div>'+
										'</div>';
					$("#"+row_id).append(img_html);
				});
				$("#"+row_id).append('<div class="clear">&nbsp;</div>');
				
					
			} //if images
			   
			if (row.txt) {
				$(myBox.content_id).append('<div class="teaser_txt">'+row.txt+'</div>');
			}	
        }); // each row
		
		$(myBox.box_id+" a.detaillink").click(function(){
		    var item_values = myBox.getValueArray($(this).attr("class"));
			if (myBox.template != 'overview_print') myBox.switchToDetail(item_values[0], item_values[1]);
				
		} );
		
		myBox.template = 'overview';
		
		$('span.image-info').mouseover(function(){
      var _p = $(this).parents('.img-item');
      var _t = $('div.image-overlay',_p);
      if(!$(_t).hasClass('hh')) {                   
        $(this).addClass('a');
        _h = $('.pic_box_middle img',_p)[0].offsetHeight;
        _w = $('.pic_box_middle img',_p)[0].offsetWidth; 
        $(_t).show().css({'height':_h,'width':_w}).addClass('hh');            
      }
    }).mouseout(function(){ 
        var _p = $(this).parents('.img-item');
        var _t = $('div.image-overlay',_p);
        $(_t).hide().removeClass('hh'); 
        $(this).removeClass('a');          
      });
		
	},
	
	switchToDetail : function (pos_row, pos_col) {
		
		myBox.hasLeftPic = false;
		myBox.hasRightPic = false;
		
		//container ---------------
		$(myBox.content_id).empty();
		$(myBox.content_id).attr('class','compare_view');
		
		//left panel -----------------------
		$(myBox.content_id).append('<div id="lightbox_panel_left" class="imagepanel"></div>');
		
		//show image left --------------
		var picture = myBox.getPictureByPos(pos_row, pos_col);
		myBox.renderDetailPanel ('#lightbox_panel_left', picture, '');
		
		//selection left ( hidden) -------------
		myBox.renderDetailSelection ('#lightbox_panel_left', pos_row, pos_col, 'display:none;');
		
		//right panel ------------------------------		
		$(myBox.content_id).append('<div id="lightbox_panel_right" class="imagepanel right"></div>');
		
		//image right (hidden) ---------------
		myBox.renderDetailPanel ('#lightbox_panel_right', -1, 'display:none');
		
		//selection right ------------------------
		myBox.renderDetailSelection ('#lightbox_panel_right', -1, -1, '');
		
		//clear nach panels --------------------------------------------
		$(myBox.content_id).append('<div class="clear">&nbsp;</div>');
		
		myBox.template = 'compare';
	},
	
	renderDetailPanel : function (panel_id, picture, style) {
		if (picture == -1) {
			picture = {
						"path1":"", 
   					    "path2":"",
						"path3":"",
						"title":"",
						"desc":""	,
						"label":"Zoom and compare"
					  }
		} else {
			if ( panel_id == "#lightbox_panel_left") myBox.hasLeftPic = true;
			if ( panel_id == "#lightbox_panel_right") myBox.hasRightPic = true;
		}
		
		if ( panel_id == "#lightbox_panel_left" ) var short_id = "left";
		else var short_id = "right";
		
		var pic_html = '<div class="panel_detail" style="'+style+'">'+
							'<div class="switch_panel">'+
								'<a href="#">Open picture Selection</a>'+
							'</div>'+
							'<div class="center"><img src="'+picture.path3+'" class="img_large" id="'+short_id+'_img_large" /></div>'+
							'<div class="imagedetails">'+
								'<strong>'+picture.title+'</strong><br />'+picture.desc+
							'</div>'+
						'</div>';
		$(panel_id).append(pic_html);
		$('.disabledid').removeClass('disabledid');

		$(panel_id+" .panel_detail .switch_panel a").click(function(){
		    $(this).blur();
			var panel = $(this).parents("div.imagepanel").attr("id");
			$("#"+panel+" .panel_selection").css({ display:"block" });
			$("#"+panel+" .panel_detail").css({ display:"none" });
			return false;	
		} );
		
		
		
	},
	
	renderDetailSelection : function (panel_id, pos_row, pos_col, style) {
		var panel_select = '<div class="panel_selection" style="'+style+'">'+
								'<div class="selection_box">'+
									'<a href="#" class="min_link">Minimize Picture Selection</a>'+
									'<div class="thumbs"></div>'+
									'<div class="legend">'+
										'selected'+
									'</div>'+
								'</div>'+
								'<div class="infobox">'+
									'<div class="inner">'+
										'Please select a second image of the Picture Selection, if you want to compare it with your first choice.<br />'+
										'<br />'+
										'To enlarge a different image, please click on \'Open picture selection\' and choose a different image.'+
									'</div>'+
								'</div>'+
								'<div class="clear">&nbsp;</div>'+	
							'</div>';
		$(panel_id).append(panel_select);				
		
		//var data = getLightboxData();
		var data = myBox.getData();
		
		//current openimage to compare...
		var cop = false;
		if($('#lightbox_content .img_large').size() > 0) {
      var cop = $('#lightbox_content .img_large').attr('src').toString().replace(/_large/,'_mini');
    }
		
		$.each(data.rows, function(i,row){
        	if (row.images) {
				$.each(row.images, function(n,image){
					var active = "";
					if (i == pos_row && n == pos_col) active = " active";
					cop = cop.split('/html/');
					cop = '/html/'+cop[1];
          
          if(cop && image.path1==cop) {
            $(panel_id+" .panel_selection .thumbs").append('<a href="#" class="disabledid value_'+i+'_'+n+active+'"><img src="'+image.path1+'" /></a>');
          } else {
            $(panel_id+" .panel_selection .thumbs").append('<a href="#" class="value_'+i+'_'+n+active+'"><img src="'+image.path1+'" /></a>');
          }
					
				});
				$(panel_id+" .panel_selection .thumbs").append('<div class="clear">&nbsp;</div>'); 	
			} //if images	
        }); // each row
		
		//click events -------------
		$(panel_id+" .panel_selection .thumbs a").click(function(){
		  $(this).blur();
		  var item_values = myBox.getValueArray($(this).attr("class"));
			if($(this).attr("class").indexOf('active')!=-1) {return false;}
			var panel = $(this).parents("div.imagepanel").attr("id");
			myBox.switchPanelDetail("#"+panel, item_values[0], item_values[1]);
			return false;	
		} );
		
		$(panel_id+" .panel_selection a.min_link").click(function(){
		    $(this).blur();
			var panel = $(this).parents("div.imagepanel").attr("id");
			if ( (myBox.hasLeftPic && panel == "lightbox_panel_left") || 
			     (myBox.hasRightPic && panel == "lightbox_panel_right")  
				) {
					$("#"+panel+" .panel_selection").css({ display:"none" });
					$("#"+panel+" .panel_detail").css({ display:"block" });
			}
			return false;	
		} );
		
	},
	
	switchPanelDetail : function (panel_id, pos_row, pos_col) {
		
		//highlight -----------------------
		var cur_row = 0;
		var cur_col = -1;
		$(panel_id+" .panel_selection .thumbs > *").each(function (i, el) {
			var tag = el.tagName;
			
			if (tag == "A") {
				var classname = el.className;			
				cur_col++;
				if (cur_col == pos_col && cur_row == pos_row) {
					if (classname.indexOf("active") == -1) {
						el.className += " active";
					}
				} else {
					if (classname.indexOf("active") != -1) {
						el.className = "value_"+cur_row+"_"+cur_col;
					}
				}
			}
			if (tag == "DIV") {
				cur_row++;
				cur_col = -1;
			}
			
		});
		
		//render detail-view ----------------------------------
		var picture = myBox.getPictureByPos(pos_row, pos_col);
		
		//START: new ------------------
		if ( panel_id == "#lightbox_panel_left" ) var short_id = "left";
		else var short_id = "right";
		
		var imgPreloader = new Image();
		imgPreloader.onload=function(){
		  //$(panel_id+" .panel_detail .img_large").attr("src", picture.path3);
			document.getElementById(short_id+"_img_large").src = picture.path3;
			
			var con = (short_id=='left') ? '#lightbox_panel_right' : '#lightbox_panel_left';
			$('.disabledid',con).removeClass('disabledid');
		  $('div.thumbs img',con).each(function(){
		    var s = $(this).attr('src');
		    s = s.toString().split('/html/');
				s = '/html/'+s[1];
				
				var p = picture.path3.toString().split('/html/');
				p = '/html/'+p[1];
				
		  
		     if(s.toString()==p.replace(/_large/,'_mini')) {
          $(this).parent().addClass('disabledid');
         }
      });
			
			
			
			imgPreloader.onload=function(){};	//	clear onLoad, as IE will flip out w/animated gifs
			
			return false;
		}
		imgPreloader.src = picture.path3;
		
		document.getElementById(short_id+"_img_large").src = myBox.preloader_img_path;
		

		//$(panel_id+" .panel_detail .img_large").attr("src", myBox.preloader_img_path);
		//ENDE: new ------------------
		
		//$(panel_id+" .panel_detail .img_large").attr("src", picture.path3);
		
		$(panel_id+" .panel_detail .imagedetails").html('<strong>'+picture.title+'</strong><br />'+picture.desc);
		
		if ( panel_id == "#lightbox_panel_left") myBox.hasLeftPic = true;
		if ( panel_id == "#lightbox_panel_right") myBox.hasRightPic = true;
		
		//switch panel ----------------------------------------
		$(panel_id+" .panel_selection").css({ display:"none" });
		$(panel_id+" .panel_detail").css({ display:"block" });
		
	},
	
	getValueArray : function (txt) {
		var parts = txt.split(" ");
		var values = new Array();
		for (var i=0; i<parts.length; i++) {
			var part = parts[i];
			var start = part.indexOf("value_");
			if (start != -1) {
				val = part.substring(start+6, part.length);
				values = val.split("_");
			}

		}
		return values;
	},
	
	getPictureByPos : function (pos_row, pos_col) {
		//var data = getLightboxData();
		var data = myBox.getData();
		return data.rows[pos_row].images[pos_col];
	},
	
	setData: function (data_function, title, pos) {
		myBox.data_func = data_function;
		myBox.case_title = title;
		myBox.galleryPos = pos;
		
	},
	
	getData: function () {
		return eval(myBox.data_func);
	}
}





// GENERAL (no change)! -----------------------------------------------------------------------------------

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
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;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}



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




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

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
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;
}

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

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e){
	if (e == null) { // ie
		keycode = event.keyCode;
	} else { // mozilla
		keycode = e.which;
	}
	key = String.fromCharCode(keycode).toLowerCase();
	
	if(key == 'x'){
	}
}

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

//
// listenKey()
//
function listenKey () {	document.onkeypress = getKey; }
	
// ---------------------------------------------------

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 showFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i < flashObjects.length; i++) {
		flashObjects[i].style.visibility = "visible";
	}

	var flashEmbeds = document.getElementsByTagName("embed");
	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("embed");
	for (i = 0; i < flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "hidden";
	}

}

function nl2br(str) {
    if(typeof(str)=="string") return str.replace(/(\r\n)|(\n\r)|\r|\n/g,"<BR />");
    else return str;
}