// ### Variablen
var iBoxGes = 0;
var iPsMax = 0;
var iBoxesPerPage = 6;
var iX = -1;
var iY = 60;
var fDetailOpenend = false;
var iDetailedOpened = 0;
var iProjectOpened = 0;
var a_Texte = new Array();
a_Texte['ai'] = "Adobe® Illustrator®";
a_Texte['air'] = "Adobe® AIR™";
a_Texte['flash'] = "Adobe® Flash®";
a_Texte['flex'] = "Adobe® Flex®";
a_Texte['php'] = "PHP";
a_Texte['ps'] = "Adobe® Photoshop®";

// ### Initialisieren
$(document).ready(function()
{
	// ### Boxen
	iBoxGes = aC.length;
	
	// ### Showroom aufbauen
	buildShowroom();
	
	// ##Hover
	$('#switch_site').hover(function () { $('#switch_site .back').css("display", "block"); }, function () { $('#switch_site .back').css("display", "none");  });
	$('#switch_showroom').hover(function () { $('#switch_showroom .back').css("display", "block");  }, function () { $('#switch_showroom .back').css("display", "none"); });
	
	// ### Click-Effekte
	$('#switch_site').click(function () { closeShowroom(); return false; });
	$('#switch_showroom').click(function () { displayShowroom(); return false; });
	
	// ### Ausblenden
	$('#show_content').css("display", "none");
	// $('#show_content_bot').css("display", "none");
	// $('#show_content_nav').css("display", "none");
	
	// ## Navigation
	$('#show_content_nav .prev').click(function () { checkNextPage('prev'); return false; });
	$('#show_content_nav .next').click(function () { checkNextPage('next'); return false; });
	
	// ### Preloaden des Showroom-Faders
	showRoomImage = new Image();
	showRoomImage.src = '/images/fade.png';
	
	// ### Preloaden des Showroom-Box
	showRoomBox = new Image();
	showRoomBox.src = '/images/showroom_box.png';
	
	// ### Preloaden des Showroom-Box
	showRoomContent = new Image();
	showRoomContent.src = '/images/showroom_content_02.png';
	
	// ### Preloaden des Showroom-Box
	showRoomDetail = new Image();
	showRoomDetail.src = '/images/showroom_detail.png';
	
	// ### Berechnung der Seiten
	iPsMax = Math.ceil(iBoxGes / iBoxesPerPage);
});

// ### Showroom aufbauen
function buildShowroom ()
{
	// ### File EXT
	var sFileExt = 'png';
	if ($.browser.msie())
		sFileExt = 'jpg';
	
	// ### Showroom aufbauen
	var content = '';
	content = '<div id="page_sim_head">';
		content += '<div id=""><img id="thumb" src="/images/fade.png" /></div>';
		content += '<div id="page_pers"><img id="thumb_pers" src="/images/fade_small_pers.'+sFileExt+'" style="display: none; cursor: pointer;" onclick="closeShowroom(); return false;" /></div>';
	content += '</div>';
	content += '<div id="show_content">';
		content += '<div id="show_content_bot" class="show_content_bot">';
			content += '<div id="show_items"></div>';
			content += '<div id="show_popup" class="show_item_content"></div>';
			content += '<div id="show_contents" style="display: none;"></div>';
		content += '</div>';
		content += '<div id="show_content_nav">';
			content += '<div class="prev"></div>';
			content += '<div class="next"></div>';
		content += '</div>';
	content += '</div>';
	
	// ### Hinzufügen
	$(content).appendTo('#showroom');
}

// ### Status: Showroom
var fShowroom = false;
var aniActive = false;

// ### Showroom einblenden
function displayShowroom ()
{
	// ### Bereits eingblendet?
	if (fShowroom || aniActive == true)
		return false;
	
	// ### Eingeblendet!
	fShowroom = true;
	aniActive = true;
	
	// ### Body-Background
	$('body').css("background-attachment", "scroll");
	
	// ### Showroom einfaden
	$('#showroom').fadeIn(500, function () {
		$('#page').hide();
		$('#showroom #thumb').animate({ width: "130px", height: "164px", marginLeft: "79px", marginTop: "23px" }, 250, "linear", function ()
		{
			// ### Ausblenden
			$('#showroom #show_content').show();
			$('#showroom #show_items').show();
			$('#showroom #show_popup').hide();
			$('#showroom #show_contents').hide();
			// $('#showroom #show_content_bot').show();
			// $('#showroom #show_content_nav').show();
			$('#showroom #thumb').fadeOut(200);
			$('#showroom #thumb_pers').fadeIn(200, function ()
			{
				$('#switch #control').animate ({ left: "404px" }, 100, "linear", function ()
				{
					// ### Boxen anzeigen
					iP = 0;
					iPLoaded = 0;
					buildBoxes();
					nextPage();
					
					// ### Animation abgeschlossen
					aniActive = false;
				});
			});
		});
	});
}

function closeShowroom ()
{
	// ### Bereits ausgblendet?
	if (!fShowroom || aniActive)
		return false;
	
	// ### Ausgeblendet!
	fShowroom = false;
	aniActive = true;
	
	// ### Content ausblenden
	$('#showroom #show_content').hide();
	// $('#showroom #show_content_bot').hide();
	// $('#showroom #show_content_nav').hide();
	// $('#show_content_popup').hide();
	
	// ### Animationen rückgängig machen
	$('#switch #control').animate ({ left: "36px" }, 100, "linear", function ()
	{
		$('#showroom #thumb_pers').fadeOut(200);
		$('#showroom #thumb').fadeIn(200, function ()
		{
			// ### Wieder großwerden lassen
			$('#showroom #thumb').animate({ width: "887px", height: "1105px", marginLeft: "0px", marginTop: "0px" }, 250, "linear", function ()
			{
				// ### Page anzeigen
				$('#page').show();
				$('#showroom').fadeOut(500);
				
				// ### Content leeren
				// $('#showroom #show_content').empty();
				$('#showroom #show_items').empty();
				$('#show_popup').empty();
				
				// ### Body-Background
				$('body').css("background-attachment", "fixed");
				
				// ### Animation abgeschlossen
				aniActive = false;
			});
		});
	});
}

// ### Box anzeigen
var iAPop = 0;
var iAPopMax = 0;
var fPageBuildComplete = true;
function showBox () {
	
	// ### Welche Box?
	iA = a_BoxesPop[iAPop];
	
	a_Positions = getBoxPosition(iA);
	iX = a_Positions['iX'];
	iY = a_Positions['iY'];
	iR = a_Positions['iR'];
	//  onclick="tb_remove()"
	
	// ### Welcher Link?
	sLink = aC[iA]['UR'];
	
	// ### 1. Reihe?
	var sBoxImage = '/images/showroom_box.png';
	if ($.browser.msie())
	{
		// ### 1. Reihe oder 2.?
		if (iR == 1)
			sBoxImage = '/images/showroom_box_r1.jpg';
		else
			sBoxImage = '/images/showroom_box_r2.jpg';
	}
	
	// ### Content aufbauen
	var content = '<div id="box_'+iA+'" style="position: absolute; top: '+iY+'px; left: '+iX+'px;">';
		content += '<div style="position: absolute; left: 0px; top: 0px; z-index: 1;"><img class="box_image" src="'+sBoxImage+'"  /></div>';
		content += '<div class="show" style="background: url(\'/images/showroom/'+aC[iA]['Fo']+'/ref.png\') no-repeat;">';
			content += '<h4><a href="' + sLink + '" onclick="openDetailWindow('+iA+'); return false;">'+aC[iA]['Ti']+'</a></h4>';
		content += '</div>';
	content += '</div>';
	
	// ### Box einblenden
	$(content).appendTo('#showroom #show_items');
	
	// ### Init nachträglich?
	// if (aC[iA]['Tb'] != '')
	// tb_init('a.thickbox, area.thickbox, input.thickbox');
	
	// ### Delete
	delete content;
	
	// ### FadeIn
	$('#box_'+iA+' .box_image').animate({ width: "234px", height: "163px", marginLeft: "-10px", marginTop: "-7px", opacity: 1 }, 100, "linear", function () {
		// ### Auf 100%
		$('#box_'+iA+' .box_image').animate({ width: "213px", height: "149px", marginLeft: "0px", marginTop: "0px" }, 100, "linear", function ()
		{
			// ### Inhalt einblenden
			$('#box_'+iA+' .show').show();
			
			// ### Animation abgeschlossen
			if (iAPop < iAPopMax)
			{
				iAPop++;
				showBox();
			}
			else
				fPageBuildComplete = true;
		});
	});
}

// ### Baut alle Boxen auf
function buildBoxes ()
{
	// ### Alle Boxen aufbauen
	for (y = 0; y < iBoxGes; y++)
	{
		// ### Box erstellen
		var iA = y;
		var content = '<div id="box_'+iA+'_content" class="show_item_content">';
			content += '<div id="showroom_detail">';
				content += '<div class="showroom_detail_box">';
					content += '<div class="headline"><h1 class="'+ aC[iA]['He'] +'">' + aC[iA]['Ti'] + '</h1></div>';
					content += '<div class="detail_close"><a href="/showroom/" onclick="closeDetailWindow(); return false;">zurück</a></div>';
					content += '<div class="clear"></div>';
				content += '</div>';
				content += '<div class="teaser" style="background-image: url(/images/showroom/'+aC[iA]['Fo']+'/teaser.png)"></div>';
				
				// ### Informationen zu den Projekten
				content += '<div class="projects" style="margin-top: 31px; padding-bottom: 30px;">';
				
					// ### Wieviele Projekte gibt es?
					var sAddClasses = "";
					var iLength = aP[iA].length;
					if (iLength > 1)
						sAddClasses = " withBg";
					
					// ### Spalte beginnen
					content += '<div class="plist'+sAddClasses+'">';
						
						// ### Ausgabe?
						if (iLength > 1)
						{
							// ### Liste
							content += '<ul id="subprojects">';
							
							// ### Alle durchlaufen
							for (i = 0; i < iLength; i++)
							{
								// ### 1.?
								var sAddClasses = '';
								if (i == 0)
									sAddClasses = ' active';
								
								// ### Hinzufügen
								content += '<li id="link_' +iA+ '_' +i+ '"><a class="'+sAddClasses+'" href="/showcase/'+aC[iA]['UR']+'/'+aP[iA][i]['UR']+'/" onclick="switchProject('+iA+', '+i+'); return false;">'+aP[iA][i]['Ti']+'</a></li>';
							}
							
							// ### Ende
							content += '</ul>';
						}
						
						content += '<div class="logo"><img src="/images/showroom/'+aC[iA]['Fo']+'/logo.png" class="png" style="width: 145px; height: 100px" /></div>';
						
					content += '</div>';
					content += '<div class="pcontent" style="float: left; margin-left: 20px; margin-top: -5px; width: 474px;">';
						
						// ### Projekte durchlaufen
						for (i = 0; i < iLength; i++)
						{
							// ### 1. Projekt, anzeigen
							var sStyle = "none";
							if (i == 0)
								sStyle = "block";
							
							// ### Alle Projekte
							content += '<div id="content_' +iA+ '_' +i+ '" style="display: '+sStyle+'">';
							
								// ### Beschreibungstext
								content += '<h2>'+aP[iA][i]['Ti']+'</h2>';
								content += '<p>'+aP[iA][i]['De']+'</p>';
									
									// ### Informationen
								content += '<div class="informations">';
									content += '<div class="links">';
									
										// ### Detail-Link
										if (aP[iA][i]['LiD'] != '')
											content += '<a href="'+aP[iA][i]['LiD']+'">zur Detailseite</a>';
										
										// ### Thickbox?
										if (aP[iA][i]['Tb'] != "" && aP[iA][i]['Li'] != "")
											content += '<a href="#" class="thickbox" onclick="tb_show(\''+aP[iA][i]['Ti']+'\', \''+aP[iA][i]['Li']+'\', false)">Projekt-Demonstration ansehen</a>';
										else if (aP[iA][i]['Li'] != '')
											content += '<a href="'+aP[iA][i]['Li']+'" target="_blank">Projekt öffnen</a>';
									
									content += '&nbsp;</div>';
									content += '<div class="add_infos text_content">';
										content += '<span>Umgesetzt mit:</span>';
										content += '<ul>';
										
										// ### Exploden
										var a_Created = aP[iA][i]['Te'].split("|");
										for (j = 0; j < a_Created.length; j++)
											content += '<li><img src="/images/icons/'+a_Created[j]+'.png" alt="'+a_Texte[a_Created[j]]+'" title="'+a_Texte[a_Created[j]]+'" /></li>';
										
										content += '</ul>';
										content += '<span>Erstellt am: '+aP[iA][i]['Cr']+'<br />';
										content += 'Client: '+aP[iA][i]['Cu']+'</span>';
									content += '</div>';
								content += '</div>';
							content += '</div>';
							
							// ### Thickbox-Content
							if (aP[iA][i]['Tb'] != "")
								content += '<div id="thickbox_div_'+aC[iA]['ID']+'_'+aP[iA][i]['ID']+'" style="display: none;">'+aP[iA][i]['Tb']+'</div>';
						}
						
					content += '</div>';
					content += '<div class="clear"></div>';
				content += '</div>';
				
			content += '</div>';
		content += '</div>';
		
		// ### Hinzufügen
		$(content).appendTo('#show_contents');
	}
	
	// ### iA nullen
	iA = 0;
}

// ### Gibt die nächste Seite aus
var iP = 0;
var iPLoaded = 0;
var a_BoxesPop = new Array();
function nextPage (navType)
{
	// ### Noch eine Animation aktiv?
	if (fPageBuildComplete == false)
		return false;
	
	// ### Addieren
	if (navType == 'prev')
		iP--;
	else
		iP++;
	
	// ### Kleiner 0?
	if (iP < 1)
		iP = 1;
	if (iP > iPsMax)
		iP = iPsMax;
	
	// ### Ungleich aktueller Seite?
	if (iP == iPLoaded)
		return false;
	iPLoaded = iP;
	refreshPager();
	
	// ### Leeren
	fPageBuildComplete = false;
	$('#showroom #show_items').empty();
	
	// ### Welche Elemente werden angezeigt?
	iStart = (iP - 1) * iBoxesPerPage;
	iEnd = iP * iBoxesPerPage;
	if (iEnd > iBoxGes)
		iEnd = iBoxGes;
	
	// ### Array aufbauen, wie wann welche Boxen aufpoppen
	a_BoxesPop = new Array();
	iCount = 0;
	iAPop = 0;
	fPageBuildComplete = false;
	for (i = iStart; i < iEnd; i++)
	{
		// ### Element hinzufügen
		a_BoxesPop[iCount] = i;
		iAPopMax = iCount;
		iCount++;
	}
	
	// ### Sortieren
	a_BoxesPop.sort( randOrd );
	
	// ### Box anzeigen
	showBox();
}

// ### Pagenavigation
function checkNextPage (navType)
{
	// ### Detail?
	if (fDetailOpenend == true)
	{
		// ### Welches Projekt nun?
		if (navType == 'prev')
			iShowDetail = iDetailedOpened - 1;
		else
			iShowDetail = iDetailedOpened + 1;
		
		// ### Gültig?
		if (iShowDetail < 0)
			return false;
		if (iShowDetail >= iBoxGes)
			return false;
		
		// ### Box anzeigen
		closeDetailWindow(true);
		openDetailWindow(iShowDetail);
	}
	else
	{
		// ### Page laden
		nextPage(navType);
	}
}

function randOrd() {
	return (Math.round(Math.random())-0.5);
} 

// ### Gibt die Maße für eine Box zurück
function getBoxPosition (iA)
{
	// ### Abzuüglich der Seite
	if (iP > 1)
	{
		// ### Abziehen
		iA = iA - ((iP-1) * iBoxesPerPage);
	}
	
	// ### Berechnung
	iX = -1;
	iY = 59;
	iR = 1;
	
	// ### Schleife durchlaufen
	for (i = 0; i < (iA + 1); i++)
	{
		// ### Neue Zeile?
		if (i % 3 == 0)
		{
			// ### Werte switchen
			iX = -1;
			if (i > 0)
			{
				iR++;
				iY += 154;
			}
		}
		else
			iX += 218;
	}
	
	// ### Werte zurückgeben
	a_Values = new Array();
	a_Values['iX'] = iX;
	a_Values['iY'] = iY;
	a_Values['iR'] = iR;
	return (a_Values);
}

function openDetailWindow (iA)
{
	// ### Existiert das Element schon?
	// $('#showroom_detail').empty();
	
	var content = $('#box_'+iA+'_content').html();
	
	// ### Öffnen
	// tb_show('showroom', '#TB_inline?height=303&width=649&inlineId=box_'+iA+'_content&modal=true', false);
	$('#show_items').hide();
	$('#show_popup').empty();
	$(content).appendTo('#show_popup');
	$('#show_popup').show();
	iDetailedOpened = iA;
	fDetailOpenend = true;
	iProjectOpened = 0;
	refreshPager();
}

function closeDetailWindow (fNoFadeOut)
{
	// ### Schließen
	// tb_remove(fNoFadeOut);
	$('#show_items').show();
	$('#show_popup').hide();
	fDetailOpenend = false;
	refreshPager();
}

function switchProject (iA, iP)
{
	// ### Aktuelles schließen
	$('#show_popup #content_' +iA+ '_' + iProjectOpened).hide();
	$('#link_' +iA+ '_' + iProjectOpened + ' a').removeClass("active");
	
	// ### Öffnen
	$('#show_popup #content_' +iA+ '_' + iP).show();
	$('#link_' +iA+ '_' + iP + ' a').addClass("active");
	
	// ### Setzen
	iProjectOpened = iP;
}

// ### Aktualisiert den Pager
function refreshPager ()
{
	// ### Detailansicht offen?
	if (fDetailOpenend == true)
	{
		// ### Welches Projekt geöffnet?
		if (iDetailedOpened == 0)
			$('#show_content_nav .prev').addClass("inactive");
		else
			$('#show_content_nav .prev').removeClass("inactive");
		
		// ### Letzte Seite?
		if (iDetailedOpened == (iBoxGes-1))
			$('#show_content_nav .next').addClass("inactive");
		else
			$('#show_content_nav .next').removeClass("inactive");
	}
	else
	{
		// ### Auf welcher Seite?
		if (iPLoaded == 1)
			$('#show_content_nav .prev').addClass("inactive");
		else
			$('#show_content_nav .prev').removeClass("inactive");
		
		// ### Letzte Seite?
		if (iPLoaded == iPsMax)
			$('#show_content_nav .next').addClass("inactive");
		else
			$('#show_content_nav .next').removeClass("inactive");
	}
}