var json = {
	"id": "0",
	"name": "Referenzen",
	"children": [],
	"data": []
};
var resGlob;
var tree = false;

window.addEvent('domready', function() {
	
	
	
	
	if (tags.tabs == 1) {
		new startseite();
		
		$('toolTip').setStyles({'opacity':0.8,'visibility':'hidden'});
		
	}
	
})

var tmp;
var activeTab;

var startseite = new Class({
	options:{
	}
	,initialize: function(options){
		
		//Direktlink auf Tab ermöglichen durch URL-Split (&tab=xx)
		activeTab = window.location.href.split('tab=');
		activeTab = $defined(activeTab[1]) ? activeTab[1] : 0;
		
		$$('#btnRW, #btnFF').addEvents({
			'mouseover': function(){
				tmp = this.src;
				var n = this.src.replace('.png','_o.png');

				this.src = n;

			},
			'mouseleave': function(){

				this.src = tmp;
			}
		})
		
		
		if (Browser.Platform.mac  != true ){
			$('tabs').setStyle('padding-top',3);
		}
		
		
		var toolTip = new Tips($$('.toolTip'), {
			showDelay: 100,
			hideDelay: 1000,
			fixed: true
		});
		// Tabchanging
		var tabs = new MGFX.Tabs('.tab', '.content', {
			transitionDuration: 1000
			
		});
		
		//aktiverTab hervorheben
		
		$$('.cTab').setStyle('z-index',90);
		$$('.cTab')[activeTab].setStyle('z-index',96);
		
			
		
		
		var tabContainer = $$('.tab');
		
		//erster Tab-Content anzeigen
		this.tabFunction($$('.tab')[activeTab]);
		tabs.showSlide(activeTab);

		
		tabContainer.addEvents({
			//rufe bei click auf den Tab function getContent() auf
			'click': function(e){
				
				this.tabFunction(e.target);
				
			}.bind(this)
		});
	},
	
	//Funktion zur Tab-Aktivierung
	tabFunction: function(tab){
		
		
		$$('.cTab').setStyle('z-index',90);
		tab.getParent('div').setStyle('z-index',96);
		var pageID = tab.id.split('_')[1];
		var targetID = 'tabContent' + pageID;
		
		if(tab.id != 'tab_1'){

			$$('.cTab').setStyle('z-index',90);
			tab.getParent('div').setStyle('z-index',96);
			
			
	
			if(pageID == 241){
				if ($(targetID).innerHTML == '' && tree == false){
					this.getContent(pageID, targetID);
				}else{
					
					try{
						ht.move({ x: 0.2, y: 0.2 }, {  
							hideLabels: false ,
							onComplete: function(){
								
								ht.move({ x: -0.2, y:-0.2 }, {  
									hideLabels: false  
								});
							}
						});	
					}catch(e){}
					
					
					
				} 
			}else{
				if ($(targetID).innerHTML == '') this.getContent(pageID, targetID);
			}	
		}else{

			new deskJS();
		}
		
		
		
	}
	
	//hole per AJAX request den Seiteninhalt für die Tabs
	,getContent: function(pageID,contentDiv){
		new Request({
			url: 'index.php',
			method: 'post',
			data: 'mode=ajax&id=' + pageID + '&reqCol=text',
			onComplete: function(response){
				

				cont = JSON.decode(response);
				if(cont.text.contains('[hyperTree]')){
					var txt = cont.text.replace(
						'[hyperTree]',
						'<div id="tree"></div>'
					);
				}
				else{
					var txt = cont.text
				}
				
				$(contentDiv).innerHTML = txt;
				
				
				if ($defined($('tree'))&&!$defined($('tree-canvaswidget')) && pageID == 241) {
					var loader = '<div style="position:absolute;top:80px;left:40px;"><div style="padding-left:180px;"><img src="'+root+'images/loader.gif" /></div><div style="text-align:center;margin-top: 40px; padding-left: 0px;padding:10px;">Bitte haben Sie einen Moment Geduld<br/><br/>Klicken Sie sich durch unsere <b>Referenzen</b>, Sie werden begeistert sein</div></div>'
					loader = loader.toDOM();
					loader.inject($('tree'));
					(function(){
						loader.destroy();
						new hyperTreeBuild();
					}).delay(6000,this)
				}
			},			
			onRequest: function(){

				if(pageID == 241){
					tree = true;
				}
			}
		}).send();
	}.bind(this)
});

 /**
 * deskJS-Functions
 *  
 *  Parameters:
 *    verzDebug: Debugstatus für den JSON-Output (bolean)
 *    verzLocal: Request auf lokale/externe Daten (bolean)
 *    verzUser: DBName des Benutzer (string)
 *    
 *  Methods:
 *    _loadStatus: Aufruf bei jeder Interaktion - Load, Request, usw (bereich, json-aktion)
 *    _directLink: Aufruf durch direktlink Verz-Verz und Internen Seiten (mode = verz/site)
 *    _afterRendering: Aufruf nach Einbindung der Plugins und Rendering des Templates
 */
deskJS = new Class({
	// Implements
	Implements: addDeskJS	// options
	,options: {
		verzDebug: 1,
		verzLocal: 0,
		verzUser: 'go4web'
	
	/**
	
	 * User-Parameters
	
	 *
	
	 */
	
	}
	// initialization
	,initialize: function(options){
		//set options
		this.setOptions(options);
		
		// pluginload
		this._jsPreload({
			templating: 0,
			slider: 0,
			scrollspy: 0,
			popup: 0,
			sortOn: 0,
			scroller:1
		});
		this._verzReqStr = {
			type: 'all'
			,user: this.options.verzUser
			,table: {
				listingdatas_referenzen: 'ld'
				,listingrows_referenzen: 'lr'
				,listings_referenzen: 'l'
			}
			,condition: {
				
			}
			,fields: 'lr.*,ld.*'
			,order: ''
			,language: 'de'
		}
		this._verzReq('createSlideThumbs');
	}
	
	// Ladestatus der Plugins oder des Request
	,_loadStatus: function(part, action){
		
	}
	
	// Aufruf durch Verzeichnisverlinkung
	,_directLink: function(mode, DBstr, lrID, ldID){
		
	}
	
	,_afterRendering: function(){
		
	}
	
	/**
	 * User-Functions
	 *  
	 *  Methods:
	 *    
	 */
	//JSON Array für Hypertree erstellen
	,makeTree: function(res){
		var parentID;
		resGlob=res
		res.result.each(function(item,key){
			if(item.lr.parentrID!=0){
				json.children.push({
					'id':item.lr.id,
					'name':item.lr.rubrikname,
					'data': {
						'band': 'GO4WEB',
						'relation': ''
					},
					'children': [{
						'id':item.ld.id,
						'name':item.ld.firma,
						'data': {
							'band': 'GO4WEB',
							'relation': ''
						},
						'children': []
					}]
				});
			}
		})
	}
	//slider aufbau durch verzeichnis request
	,createSlideThumbs:function(res){
		
		
		
		this.makeTree(res);
		var ind = 0;
		if ($$('#tMask ul')[0].getChildren().length == 0) {
			res.result.each(function(item, key){
				if (key % 3 == 0) {
					ind++;
					if (ind == 1) var pState = 'Act';
					else var pState = 'Pas';
					var pageInd = '<li id="page_' + ind + '"><a href="#"></a></li>';
					pageInd = pageInd.toDOM();
					pageInd.inject($$('.paging ul')[0]);
					
					var li = '<li id="container_' + ind + '" class="pages"></li>';
					li = li.toDOM();
					li.inject($$('#tMask ul')[0]);
				}
				//wenn projektbeschreibung nicht leer nimm diese, sonst projekttitel
				if(item.ld.projektbeschreibung!='')var titleIMG = item.ld.projektbeschreibung;
				else var titleIMG = item.ld.firma;
				
				var img = '<div style="height:110px;background-image:url(\''+root+'images/slider/shadow.png\');float:left;"><a href="http://' + item.ld.url + '" target="_blank"><img src="http://www.go4web.ch/upload/137x100_verz_' + item.ld.bild.media[0].name + '" alt="' + item.ld.url + '" title="' + titleIMG + '" id="refIMG_' + key + '" class="refImages" /></a></div>';
				img = img.toDOM();
				img.inject($('container_' + ind));
				
				var eint = {
					'id': key,
					'name': item.ld.firma,
					'data': {
						'band': item.ld.beschreibung,
						'relation': item.lr.rubrikname
					}
				}
			}, this);
			var pages = $$('.paging ul li');
			//initialisierung des Sliders
			carousel = new slideGallery($$('.gallery'), {
				steps: 1,
				//mode Circle für Karussel effekt einbauen, "paging" funktioniert dann nicht
//				mode: 'circle',
				duration: 6000,
				autoplay: true,
				speed: 1000,
				onStart: function() {
					pages.removeClass('pagingActive');
					pages[this.current].addClass('pagingActive');
				},
				onPlay: function() { this.fireEvent("start");	}
			});
			//page Thumps funktionalität zuweisung
			pages.each(function(el, i){
				el.addEvent('click', function(){
					if (this.getAttribute('class') != 'pagingActive') {
						pages.removeClass('pagingActive');
						this.addClass('pagingActive');
						carousel.current = i;
						carousel.play(true);
						return false;
					}
				});
			});
			//einmitten der Page Thumbs
			var size = ($('page_1').getStyle('margin-right').toInt() + $('page_1').getWidth());
			$$('.paging')[0].setStyles({
				'margin-left': -((size * pages.length) / 2)
			});
			//positionierung des Tooltips
			var corection = $('container').getPosition().x+255;
			$$('.refImages').addEvents({
				'mouseover': function(e){
					$('toolTip').setStyles({
						'left': e.target.getPosition().x - corection,
						'visibility': 'visible'
					});
					$('toolTip').innerHTML = '<div><a style="font-size:11px;" href="http://' + e.target.get('alt')+'" target="_blank">'+e.target.get('title') + '</a></div><div><a style="font-size:11px;" href="http://' + e.target.get('alt')+'" target="_blank">' + e.target.get('alt')+'</a></div>';
				},
				'mouseleave': function(e){
					this.hydeTip();
				}.bind(this)
			}, this);
			$('toolTip').addEvents({
				'mouseover': function(e){
					$('toolTip').setStyles({
						'visibility': 'visible'
					});
				},
				'mouseleave': function(e){
					this.hydeTip();
				}.bind(this)
			}, this)
		}
	},
	//Tooltip verstecken
	hydeTip: function(){
		$('toolTip').setStyles({
			'visibility': 'hidden'
		});
	}.bind(this),
	//popup im Hypertree
	showReferenz: function(node, domelement){
		resGlob.result.each(function(item, key){
			if (item.ld.id == node.id &&!$defined($('framePop'))) {
				if (item.ld.beschreibung != '') 
					var txt = item.ld.beschreibung.text[0];
				else 
					var txt = '';
				var popup = (
				'<div id="overlay"></div>' +
				'<div id="framePop">' +
					'<div id="popUp">' +
						'<div id="mTrack"><div id="mThumb"></div></div>' +
						'<div id="closeOverlay">' +
							'<img src="'+root +'images/popup/closebox.png" title="schliessen" alt="schliessen" />' +
						'</div>' +
						'<div id="popTitle">' +
							'<b>' +
							item.ld.firma +
							'</b>' +
							'<br/>' +
							'<a target="_blank" href="http://' +
							item.ld.url +
							'">' +
							item.ld.url +
							'</a>' +
						'</div>' +
						'<div id="popCont">' +
							'<div style="position:relative;">' +
								'<img src="http://www.go4web.ch/upload/137x100_verz_' +item.ld.bild.media[0].name +'" alt="' +item.ld.url +'" class="popImage" /><div style="display:inline; position: absolute;">' +
								txt +
							'</div></div>' +
						'</div>' +
					'</div>' +
				'</div>');
				popup = popup.toDOM();
				popup.inject(document.body);
							
				$$('#closeOverlay, #overlay, #popUp').addEvents({
					'click': function(e){
						var moClose = new Fx.Morph($('overlay'), {
							duration: 50,
							onComplete: function(){
								
								try{
									$('overlay').destroy();
								}catch(e){}
							}
						});
						moClose.start({
							'opacity': 0
						});
						var moPopClose = new Fx.Morph($('framePop'), {
							duration: 50,
							onComplete: function(){
								try{
									$('framePop').destroy();
								}catch(e){}
								
								
							}
						});
						moPopClose.start({
							'opacity': 0
						});
					}
				});
				
				$('overlay').setStyles({
					'opacity': 0,
					'background': '#fff'
				})
				$('framePop').setStyles({
					'opacity': 0
				})
				var mo = new Fx.Morph($('overlay'), {
					duration: 50
				});
				mo.start({
					'opacity': 0.7
				});
				var moPop = new Fx.Morph($('framePop'), {
					duration: 50
				});
				moPop.start({
					'opacity': 1
				});
				mainScroller = new scroller({
					content: $('popCont'),
					scrollbar: $('mTrack'),
					handle: $('mThumb')
				});
			}
		});
	}.bind(this)
});

/**
 * create a hyperTree from a json data array
 */

var ht;
hyperTreeBuild = new Class({
	initialize: function(){
		
		
		
	
		
		var labelType, useGradients, nativeTextSupport, animate;
		(function(){
			var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport &&
			(typeof document.createElement('canvas').getContext('2d').fillText == 'function');
			//I'm setting this based on the fact that ExCanvas provides text support for IE
			//and that as of today iPhone/iPad current text support is lame
			labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
			nativeTextSupport = labelType == 'Native';
			useGradients = nativeCanvasSupport;
			animate = !(iStuff || !nativeCanvasSupport);
		})();
		this.init(json)
	},
	init: function(json){
		var treeContainer = $('tree');
		var w = 465, h = 270;
		//init Hypertree
		ht = new $jit.Hypertree({
			//id of the visualization container
			injectInto: treeContainer,
			//canvas width and height
			width: w,
			height: h,
			//Change node and edge styles such as
			//color, width and dimensions.
			Node: {
				dim: 6,
				color: "#67726A"
			},
			Edge: {
				lineWidth: 1,
				color: "#ABA298"
			},
			onBeforeCompute: function(node){
			},
			//Attach event handlers and add text to the
			//labels. This method is only triggered on label
			//creation
			onCreateLabel: function(domElement, node){
			
				domElement.innerHTML = node.name;
			
				if (node._depth == 2)
					$jit.util.addEvent(domElement, 'click', function(){
						x = new deskJS();
						if($defined($('framePop'))==false) x.showReferenz(node, domElement);
					});
				else {
					$jit.util.addEvent(domElement, 'click', function(){
						
						ht.onClick(node.id);
					});
					
					
				}
				
				
				
				$jit.util.addEvent(domElement, 'mouseover', function(){
					
					
					this.tmp = $(domElement).getStyle('color');

					$(domElement).setStyle('color','#67726A')
					
				
				},this);
				
				$jit.util.addEvent(domElement, 'mouseout', function(){

					if (node._depth != 0){
						$(domElement).setStyle('color',this.tmp)
					}
					
					
					
				
				},this);
				
				
				
			},
			//Change node styles when labels are placed
			//or moved.
			onPlaceLabel: function(domElement, node){
				var style = domElement.style;
				style.display = '';
				style.cursor = 'pointer';
				if (node._depth == 0) {
					style.fontSize = "14px";
					style.color = "#67726A";
					style.fontWeight ="bold";
					style.zIndex = 202;
				}
				else if (node._depth == 1) {
					style.fontSize = "12px";
					style.color = "#ABA298";
					style.fontWeight ="normal";
					
					style.zIndex = 201;
				}
				else {
					if (node._depth == 2) {
						style.fontSize = "11px";
						style.color = "#DCD9D4";
						style.fontWeight ="normal";
						style.zIndex = 200;
					}
					else {
						style.display = 'none';
					}
				}
				var left = parseInt(style.left);
				var w = domElement.offsetWidth;
				style.left = (left - w / 2) + 'px';
			},
			onAfterCompute: function(){
				//Build the right column relations list.
				//This is done by collecting the information (stored in the data property) 
				//for all the nodes adjacent to the centered node.
				
				var node = ht.graph.getClosestNodeToOrigin("current");
				var html = "<h4>" + node.name + "</h4><b>Connections:</b>";
				html += "<ul>";
				node.eachAdjacency(function(adj){
					var child = adj.nodeTo;
					if (child.data) {
						var rel = (child.data.band == node.name) ? child.data.relation : node.data.relation;
						html += "<li>" + child.name + " " + "<div class=\"relation\">(relation: " + rel + ")</div></li>";
					}
				});
				html += "</ul>";
			}
		});
		//load JSON data.
		ht.loadJSON(json);

		//compute positions and plot.
		ht.refresh();
		ht.move({ x: 0.2, y: 0.2 }, {  
			hideLabels: false ,
			onComplete: function(){
				
				ht.move({ x: -0.2, y:-0.2 }, {  
					hideLabels: false  
				});
			}
		});
		
		//end
		ht.controller.onAfterCompute();
	}.bind(this)
});


function googlemap() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallZoomControl());
		map.addControl(new GMapTypeControl());
		
		map.setMapType(G_PHYSICAL_MAP);

		map.setCenter(new GLatLng(47.04495089,8.31655651), 14);
		var point = new GLatLng(47.04495089,8.31655651,14);
		
		var blueIcon = new GIcon(G_DEFAULT_ICON);
		
    	blueIcon.image = "http://www.go4web.ch/images/gmap.gif";
    	blueIcon.iconSize = new GSize(46, 19);
    	markerOptions = { icon:blueIcon };

        marker = new GMarker(point);
		map.addOverlay(marker);
		var html = '<div style="float:left;padding-right:15px;"><img src="http://www.go4web.ch/images/gmap.gif" width="100" /></div><div style="float:left;width:143px;font-size:11px;color:#ACA399"><b>GO4WEB</b><br>Bürgenstrasse 21<br>6005 Luzern<br><table cellpadding="0" cellspacing="0" height="1" border="0"><tr><td style="font-size:11px;color:#ACA399">Telefon</td><td style="font-size:11px;color:#ACA399">&nbsp;&nbsp;</td><td style="font-size:11px;color:#ACA399">041 410 84 08</td></tr><tr><td style="font-size:11px;color:#ACA399">Fax</td><td style="font-size:11px;color:#ACA399">&nbsp;&nbsp;</td><td style="font-size:11px;color:#ACA399">041 410 84 09</td></tr><tr><td style="font-size:11px;color:#ACA399">Support</td><td style="font-size:11px;color:#ACA399">&nbsp;&nbsp;</td><td style="font-size:11px;color:#ACA399">041 410 84 11</td></tr></table><br/>&nbsp;&nbsp;&nbsp;</div>';
	
		marker.openInfoWindowHtml(html);
        	
        
		
	}
}