var c;
var extraLine;
var container = $(document.body);
var nummer=0;
var metas;
var date;
var paper


var data
var naam
var media
var images
var meta
var mediaGallery
		
var mouse = new Array();
var myTimer;
var offset;
var showLines = false;

var ie = 8;
		
window.onscroll = scrollEvent;
function scrollEvent() {
   updatePosition()
}

window.addEvent('domready', function() {
	$('notepad').setStyle('visibility', 'hidden');
	Hyphenator.config({
        		displaytogglebox : false,
        		minwordlength : 5
        	});
    
   
    
	BrowserDetect.init();
	var name = BrowserDetect.browser
	if (name=="Firefox"||name=="Explorer"){
		elems = $$('*[class$=firefox]');
		for (var i=0; i<elems.length; i++){
			el = elems[i]
			el.setStyle('z-index',100)
		}
		if (BrowserDetect.version<3.6){
		}
	}
	if (name=="Explorer"&&BrowserDetect.version<8){
		//alert ("ie7")
		ie = 7;
	}else{
		
		 //Hyphenator.run();
    	 Hyphenator.config({urlhyphenchar : '|'});
    	 
		
	}
	
	
	
        	
        	
        	
	$(document.body).addEvent('mousemove',function(e) { 
        var curtop=e.page.y;
		var curleft=e.page.x;
		mouse.push(new Array(curtop, curleft))
	});
	
	myTimer = saveMouse.delay(5000);
	
	paper = Raphael(document.getElementById("notepad"), 1800, 4000);
    child = $('notepad').getChildren()
    test  = paper.canvas
    test.setStyle('position','absolute');
    test.setStyle('overflow','visible');
    
    
    var pageSize = window.getSize();
    offset = pageSize.x
    //alert (offset)
    //test.setStyle('left',offset);
    
   	
});
function saveMouse(){
	myTimer = saveMouse.delay(5000);
	
	if(mouse.length>0){
	
		var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){
			//alert(json.content)
			//$('menuContents0').set('html',json.content)
			mouse.length = 0;			
		}}).get({'mouser':mouse, 'offset':offset});
	}
}


   
function detailClose(){
	$('detail').setStyle('visibility','hidden')
	
	$('blender').setStyle('visibility','hidden');
	//	$('detailImage').set('src','html/img/blank.jpg')
	//$('detailImage').setStyle('visibility','hidden')
	$('otherMedia').set('html','')
	$('mainImage').set('html','')
}
function updatePosition(){
	var topD = window.getSize();
	var scroll = window.getScroll();
	var offsetTop = scroll.y+(topD.y-600)/2;
	//alert(scroll.y);
	$('detail').setStyle('top',offsetTop)
}
function changeDetail(position, kind){
	if (kind=='img'){
		$('mainImage').set('html','<img id="detailImage" src="../cms/content/large/'+images[position]+'">')
		$('detailCap').set('html',meta[position][0][2])
	}else{
		bestand = position
		var video='<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="456" height="273" id="movie1" controller="false"> <PARAM controller="false" name="src" value="../html/video/'+bestand+'"> <EMBED controller="false" HEIGHT=273 WIDTH=456 SRC="../html/video/'+bestand+'"" TYPE="video/quicktime" PLUGINSPAGE="www.apple.com/quicktime/download" EnableJavaScript="true" NAME="movie1"/> </OBJECT>';
		//alert(video)
		$('mainImage').set('html',video)
		$('detailCap').set('html','screencast')

	}
	
}
function openProject(stamp){
	$('mainImage').set('html','')
	//$('detailImage').setStyle('visibility','hidden')
	updatePosition()
	$('detail').setStyle('visibility','visible')
	$('blender').setStyle('visibility','visible');
	var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){
		data = json.content
		naam = data[0]
		media = data[1][0][1]
		images = new Array();
		video = new Array();
		meta	= new Array()
		mediaGallery = Array()
		desc=''
		
		$('detailTitle').set('html',naam)
		
		for (var i=0; i<media.length; i++){
			if (media[i]=='image')images.push(data[1][0][4][i])
			if (media[i]=='video')video.push(data[1][0][4][i])
			if (media[i]=='link'){
			}
			else if (data[1][0][5][i]!=null)meta.push(data[1][0][5][i])
		}
		
		for (var i=0; i<meta.length; i++){
			primair = 0;
			for (var j=0; j<meta[i].length; j++){
				if(meta[i][j][2]=='primair')primair = 1;
			}
			if (primair==0)mediaGallery.push(i)
			
		}
		$('mainImage').set('html','<img id="detailImage" src="../cms/content/large/'+images[mediaGallery[0]]+'">')
		
		//$('detailImage').setStyle('visibility','visible')
		//POPULATE MEDIA GALLERY//
		var gContent = '';
		for (var i=0; i<mediaGallery.length; i++){
			imgPosition = mediaGallery[i];
			if (images[imgPosition]!=undefined)gContent+='<div class="mediaItem"><img onClick="changeDetail(\''+imgPosition+'\',\'img\')" src="../cms/content/thumb/'+images[imgPosition]+'"></div>';
			
		}
		if (video.length>0){
			gContent+='<div class="videoItem" onClick="changeDetail(\''+video[0]+'\',\'video\')"><div class="videoCap">video</div><img class="videoImage" src="../cms/content/thumb/'+images[mediaGallery[0]]+'"></div>';
					}
					
		//alert(gContent);
		desc = 	meta[mediaGallery[0]][0][2]	
		$('otherMedia').set('html',gContent)
		$('detailCap').set('html',desc)
		
	}}).get({'getSingleProject':stamp});
}
function projectOver(num){

if (ie>7){
	var previousSibling = $('more_'+num).getPrevious();
	imgHeight = previousSibling.getStyle('height').toInt();
	setLabelPos = 0-imgHeight;
	$('more_'+num).setStyle('margin-top',setLabelPos+'px');
	//alert(setLabelPos);
	$('more_'+num).setStyle('visibility','visible');
	}
}
function projectOut(num){
	$('more_'+num).setStyle('visibility','hidden');
}
function show(){
	if (showLines==false){
		showLines = true;
		drawLines()
	}
	$('notepad').setStyle('visibility','visible');	
	
}
function hide(){
	$('notepad').setStyle('visibility','hidden');
}
function drawLines(){
	
	var lineArray = new Array();
	var jsonRequest = new Request.JSON({url: "html/php/json.php", onSuccess: function(json){
				metas = json.meta;
				date = json.date;
				offsetData = json.offset
				
				for(var i =0; i<json.content.length; i++){
					trace = json.content[i];
					
					curOff = 0-((offset-offsetData[i])/2);
					//alert (curOff)
					//alert(trace[0])
					var startX = trace[0][1]-curOff;
					var startY = trace[0][0];
					/*
					var circle = paper.circle(startX, startY, 3);
					circle.attr("stroke-width",0);
					circle.attr("fill","#E2E2E2");
					circle.nummer = nummer
					*/
					var path='';
					path+="M"+startX+" "+startY;
					middle = Math.ceil(trace.length/2)
					middleCoord = new Array();
					for (var j=0; j<trace.length; j++){
						curCoord = trace[j];
						//curMeta = meta[j];
						//c = paper.path("M"+startX+" "+startY+"L"+curCoord[1]+" "+curCoord[0]);
						//curCoord[1]+=curOff
						var x = curCoord[1]-curOff;
						pad="L"+x+" "+curCoord[0];
						if (j==middle)middleCoord=Array(curCoord[1],curCoord[0])
						path+=pad;
						
						startX = x
						startY = curCoord[0]
						
							// Sets the fill attribute of the circle to red (#f00)
						
						//var thisObject = c.node
						
					}
					//extraLine = paperOverlay.path(path);
					c = paper.path(path);
					
					c.attr("stroke", "#D8D8D8");
					c.attr("stroke-width",0.4);
					c.attr("opacity",1);
					c.nummer=nummer;
					
					//lineArray.push(c);
					//extraLine.attr("stroke-width",4	);
					//extraLine.attr("opacity",0);
					//extraLine.nummer = nummer;
					if (nummer==0){
					//alert($('label'))
						//$('label').setStyle('visibility','visible');
						//c.attr("stroke", "#000000");
						//$('label').setStyle('left',middleCoord[0]+'px');
       					//$('label').setStyle('top',middleCoord[1]+'px');
       					//$('label').set('html',''+meta[nummer]+'<br/>'+date[nummer]);
					 //c.attr("stroke-width",10);
					}
					nummer++
					//c.attr("stroke-width",0.5);	
					
					
					/*
					circle.mouseover(function (event) {
						$('label').setStyle('visibility','visible');
   						this.attr("stroke", "#000000");
   						$('label').set('html',''+meta[this.nummer]+'<br/>'+date[this.nummer]);
   						
   						container.addEvent('mousemove',function(e) { 
       					 	$('label').setStyle('left',e.page.x);
       					 	$('label').setStyle('top',e.page.y);
 						});

					});
					*/
					
					
					c.mouseover(function (event) {
					
						$('label').setStyle('visibility','visible');
   						this.attr("stroke", "FF00FF");
   						$('label').set('html',''+metas[this.nummer]+'<br/>'+date[this.nummer]);
   						container = $(document.body);
   						//alert(container)
   						container.addEvent('mousemove',function(e) { 
   						
       					 	$('label').setStyle('left',e.page.x);
       					 	$('label').setStyle('top',e.page.y);
 						});

					});
					/*
					circle.mouseout(function (event) {
						$('label').setStyle('visibility','hidden');
   						this.attr("stroke", "#E2E2E2");
   						container.removeEvent('mousemove');
					});
					*/
					c.mouseout(function (event) {
						$('label').setStyle('visibility','hidden');
   						this.attr("stroke", "#E2E2E2");
   						container.removeEvent('mousemove');
					});
					
				}
				//alert (nummer)
				
	}}).get({'getMouse':'true'});
		

}


var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};