function Projecten() { // Projecten Object
	// Properties
	this.element = null;
	this.aantalPP = 5;
	this.pagina = 0;
	this.start = 0;
	this.eind = 0;
	this.type = "afbeeldingen";
	this.map = null;
	this.sorteer = "datum";
	this.length = 0;
	this.lengthD = 0;
	
    // Arrays
	this.alias = new Array();
	this.titel = new Array();
	this.locatie = new Array();
	this.opdrachtgever = new Array();
	this.lengtegraad = new Array();
	this.breedtegraad = new Array();
	this.fotoliggend = new Array();
	this.fotostaand = new Array();
	this.marker = new Array();
	// Arrays, op datum gesorteerd
	this.aliasD = new Array();
	this.titelD = new Array();
	this.locatieD = new Array();
	this.opdrachtgeverD = new Array();
	this.lengtegraadD = new Array();
	this.breedtegraadD = new Array();
	this.fotoliggendD = new Array();
	this.fotostaandD = new Array();
	this.markerD = new Array();

	// Methods
	this.Onload = Onload;
	this.Add = Add;
	this.AddD = AddD;
	this.Get = Get;
	this.Show = Show;
	this.ShowItem = ShowItem;
	this.Toolbar = Toolbar;
	this.Vorige = Vorige;
	this.Volgende = Volgende;
	this.SetType = SetType;
	this.Sorteer = SetSorteer;
	this.ShowGMLoad = ShowGMLoad;
	this.AddGMIcon = AddGMIcon;
	this.GetGMInfo = GetGMInfo;
	this.Blokover = Blokover;
	this.Blokout = Blokout;
}

function Add(alias, titel, locatie, opdrachtgever, lengtegraad, breedtegraad, fotoliggend, fotostaand) { // add item
	this.alias[this.length] = alias;
	this.titel[this.length] = titel;
	this.locatie[this.length] = locatie;
	this.opdrachtgever[this.length] = opdrachtgever;
	this.lengtegraad[this.length] = lengtegraad;
	this.breedtegraad[this.length] = breedtegraad;
    this.fotoliggend[this.length] = getUrl(fotoliggend);
    this.fotostaand[this.length] = getUrl(fotostaand);
    this.marker[this.length] = null;
	this.length++;
}

function AddD(alias, titel, locatie, opdrachtgever, lengtegraad, breedtegraad, fotoliggend, fotostaand) { // add sorted item
	this.aliasD[this.lengthD] = alias;
	this.titelD[this.lengthD] = titel;
	this.locatieD[this.lengthD] = locatie;
	this.opdrachtgeverD[this.lengthD] = opdrachtgever;
	this.lengtegraadD[this.lengthD] = lengtegraad;
	this.breedtegraadD[this.lengthD] = breedtegraad;
    this.fotoliggendD[this.lengthD] = getUrl(fotoliggend);
    this.fotostaandD[this.lengthD] = getUrl(fotostaand);
    this.markerD[this.lengthD] = null;
	this.lengthD++;
}

function Get(veld, i) {
    if (this.sorteer == 'alfabetisch') {
        return eval('this.' + veld + '[' + i + ']');
    } else {
        return eval('this.' + veld + 'D[' + i + ']');
    }
}

function Onload(elementName) {
    if (Cookies["sorteer"]) this.sorteer = Cookies["sorteer"];
    var args = getArgs();
    this.element = document.getElementById(elementName);
    if (args.type) {
        if (args.type == 'afbeeldingen') {
            this.SetType('afbeeldingen');
        } else {
            this.SetType('lijst');
        }
    } else {
        if (Cookies["type"]) {
            this.SetType(Cookies["type"]);
        } else {
            this.Show();
        }
    }
    CorrectTags();
}

function Show() {
    var html = '';
    this.start = this.pagina * this.aantalPP;
    this.eind = (this.pagina + 1) * this.aantalPP - 1;
    if (this.eind > this.length-1) this.eind = this.length-1;
    
    html += this.Toolbar();
    for(var i=this.start;i<=this.eind;i++) {
		html += this.ShowItem(i);
	}
    this.element.innerHTML = html;
	if (isIE6) {
        for(var i=this.start;i<=this.eind;i++) {
		    this.Blokover(i);
		    this.Blokout(i);
	    }
	}
}

function ShowItem(nr) {
    var html = '';
    if (this.type == 'lijst') {
        html += '<div id="blok' + nr + '" class="blokl" onclick="document.location = \'/' + this.Get('alias', nr) + '\'" style="background-image: url(http://www.copijn.nl/img.ashx?path=' + escape(this.Get('fotoliggend', nr)) + ')" onmouseover="projecten.Blokover(' + nr + ');" onmouseout="projecten.Blokout(' + nr + ');">';
        if (this.Get('fotoliggend', nr) == '') {
            html += '<div id="blokh' + nr + '" class="tekstblok" style="max-width: 100%; width: 100%;">';
        } else {
            if (isIE6) {
                html += '<div id="blokh' + nr + '" class="tekstblok" style="margin-right: 60px;">';
            } else {
                html += '<div id="blokh' + nr + '" class="tekstblok">';
            }
        }
        html += '<h2 id="blokhh' + nr + '" class="tekst">' + this.Get('titel', nr) + '</h2><br />';
        html += '<div id="blokhs' + nr + '" class="locatie">' + this.Get('locatie', nr) + '</div></div>';
        html += '</div>';
        html += '\r\n';
    } else {
        html += '<div id="blok' + nr + '" class="bloka" onclick="document.location = \'/' + this.Get('alias', nr) + '\'" onmouseover="projecten.Blokover(' + nr + ');" onmouseout="projecten.Blokout(' + nr + ');" ';
        if (this.Get('fotostaand', nr) != '') {
            html += ' style=" background-image: url(http://www.copijn.nl/img.ashx?height=278&path=' + escape(this.Get('fotostaand', nr)) + '); background-repeat: none; background-position: center top;" ';
        }
        html += '>';
        html += '<div id="blokh' + nr + '" class="tekstblok">';
        html += '<h2 id="blokhh' + nr + '" class="tekst">' + this.Get('titel', nr) + '</h2><br />';
        html += '<div id="blokhs' + nr + '" class="locatie">' + this.Get('opdrachtgever', nr) + '<br />';
        html += '' + this.Get('locatie', nr) + '</div></div>';
        html += '</div>';
        html += '\r\n';
    }
	return html;
}

function Toolbar() {
    var html = '';
    html += '<div id="tools">';
    html += '<div id="nextprev">';
    if (this.pagina > 0) {
        html += '<a href="javascript:projecten.Vorige()" class="prev">vorige</a>';
    } else {
        html += '<span class="prev">vorige</span>';
    }
    if (this.length > 0) {
        html += '<span>' + (this.start+1) + ' - ' + (this.eind+1) + ' van ' + this.length + '</span>';
    } else {
        html += '<span>0 - 0 van 0</span>';
    }
    if (this.eind+1 < this.length) {
    html += '<a href="javascript:projecten.Volgende()" class="next">volgende</a>';
    } else {
        html += '<span class="next">volgende</span>';
    }
    html += '</div>';
    // sorteer
    html += '<div id="sorteer">';
    if (this.sorteer == "alfabetisch") {
        html += '<a href="javascript:projecten.Sorteer(\'datum\')">datum</a>';
    } else {
        html += '<span>datum</span>';
    }
    html += ' | ';
    if (this.sorteer != "alfabetisch") {
        html += '<a href="javascript:projecten.Sorteer(\'alfabetisch\')">alfabetisch</a>';
    } else {
        html += '<span>alfabetisch</span>';
    }
    html += '</div>';
    // type
    html += '<div id="type">';
    if (this.type == "lijst") {
        html += '<a href="javascript:projecten.SetType(\'afbeeldingen\')">afbeeldingen</a>';
    } else {
        html += '<span>afbeeldingen</span>';
    }
    html += ' | ';
    if (this.type != "lijst") {
        html += '<a href="javascript:projecten.SetType(\'lijst\')">lijst</a>';
    } else {
        html += '<span>lijst</span>';
    }
    html += ' | ';
    var args = getArgs();
    if (args.page) {
        html += '<a href="/kaart&referer=' + args.page + '">kaart</a>';
    } else {
        html += '<a href="/kaart">kaart</a>';
    }
    html += '</div>';
    html += '</div>';
    return html;
}

function SetType(type) {
    if (type == 'lijst') {
        this.aantalPP = 18;
    } else {
        this.aantalPP = 5;
    }
    this.pagina = 0;
    this.type = type;
    this.Show();
    Cookies.create("type", type, 1);
}

function SetSorteer(sorteer) {
    this.pagina = 0;
    this.sorteer = sorteer;
    this.Show();
    Cookies.create("sorteer", sorteer, 1);
}

function Vorige() {
    if (this.pagina > 0) this.pagina--;
    this.Show();
}

function Volgende() {
    if (this.pagina+1 < this.length/this.aantalPP) this.pagina++;
    this.Show();
}

function ShowGMLoad(map) {
    this.map = map;
    
    for(var i = 0; i <= this.length - 1; i++) {
        if (this.breedtegraad[i] != '' && this.lengtegraad[i]) {
            this.AddGMIcon(i);
	    }
	}
    var args = getArgs();
    if (args.lengtegraad && args.breedtegraad) {
        map.setCenter(new GLatLng(args.breedtegraad, args.lengtegraad), 16);
        for(var i = 0; i <= projecten.length - 1; i++) {
            if (args.lengtegraad == projecten.lengtegraad[i] && args.breedtegraad == projecten.breedtegraad[i]) {
                projecten.marker[i].openInfoWindowHtml(projecten.GetGMInfo(i));
            }
        }
    }
}

function AddGMIcon(nr) {
    var icon = new GIcon();
    icon.image = "/uploads/images/css/gm.png";
    icon.shadow = "";
    icon.iconSize = new GSize(33, 34);
    icon.shadowSize = new GSize(33, 34);
    icon.iconAnchor = new GPoint(33, 34);
    icon.infoWindowAnchor = new GPoint(5, 1);

    var point = new GLatLng(this.breedtegraad[nr], this.lengtegraad[nr]);
    projecten.marker[nr] = new GMarker(point, icon);
    this.map.addOverlay(projecten.marker[nr]);
    GEvent.addListener(projecten.marker[nr], "click", function() {
        projecten.marker[nr].openInfoWindowHtml(projecten.GetGMInfo(nr));
    });
}

function GetGMInfo(nr) {
    var html = '';
    html += '<div style="float: left; width: 230px; height: 100px; background-color: #CDEB24;">';
    html += '<a href="/' + projecten.alias[nr] + '" onclick="top.location=\'/' + projecten.alias[nr] + '\';" style="text-decoration: none; color: White; cursor: pointer;">';
    html += '<div style="float: left; width: 150px; height: 100px; color: #303030; padding: 10px 2px 5px 8px; overflow: hidden;">';
    html += '<h2 style=" font-size: 90%; margin: 0px; padding: 0px 0px 5px 0px;">' + projecten.titel[nr] + '</h2>';
    html += '<div style=" font-size: 80%;">' + projecten.opdrachtgever[nr] + '</div>';
    html += '<div style=" font-size: 80%;">' + projecten.locatie[nr] + '</div>';
    html += '</div>';
    html += '<div style="float: left; width: 48px; height: 80px; margin-top: 10px; overflow: hidden;">';
    if (projecten.fotostaand[nr] != '') {
        html += '<img src="http://www.copijn.nl/img.ashx?width=52&height=85&path=' + projecten.fotostaand[nr] + '" border="0">';
    }
    html += '</div>';
    html += '</a>';
    html += '</div>';
    return html;
}

function Blokover(nr) {
	var blok = document.getElementById("blok"+nr);
	var blokh = document.getElementById("blokh"+nr);
	var blokhh = document.getElementById("blokhh"+nr);
	var blokhs = document.getElementById("blokhs"+nr);
	blokh.style.backgroundColor = '#CDEB24';
	blokhh.style.color = '#fff';
	blokhs.style.color = '#fff';
	if (isIE) blok.style.cursor = 'hand';
	else blok.style.cursor = 'pointer';
	if (isIE) blokh.style.cursor = 'hand';
	else blokh.style.cursor = 'pointer';
}

function Blokout(nr) {
	var blok = document.getElementById("blok"+nr);
	var blokh = document.getElementById("blokh"+nr);
	var blokhh = document.getElementById("blokhh"+nr);
	var blokhs = document.getElementById("blokhs"+nr);
	blokh.style.backgroundColor = '#fff';
	blokhh.style.color = '#686868';
	blokhs.style.color = '#686868';
	if (isIE) blok.style.cursor = 'hand';
	else blok.style.cursor = 'pointer';
	if (isIE) blokh.style.cursor = 'hand';
	else blokh.style.cursor = 'pointer';
}

function getUrl(foto) {
    var start = foto.indexOf("src=&quot;");
    var eind = foto.indexOf("&quot; ", start);
    if (start > 0 && eind > 0 && eind > start) {
        return '/'+foto.substring(start+10, eind);
    } else {
        return '';
    }
}

function getArgs() {
    var args = new Object();
    var query = location.toString();
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
        var pos = pairs[i].indexOf('=');
        if (pos == -1) continue;
        var argname = pairs[i].substring(0,pos);
        var value = pairs[i].substring(pos+1);
        args[argname] = unescape(value);
    }
    return args;
}

var Cookies = {
	init: function () {
		var allCookies = document.cookie.split('; ');
		for (var i=0;i<allCookies.length;i++) {
			var cookiePair = allCookies[i].split('=');
			this[cookiePair[0]] = cookiePair[1];
		}
	},
	create: function (name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
		this[name] = value;
	},
	erase: function (name) {
		this.create(name,'',-1);
		this[name] = undefined;
	}
};
Cookies.init();

function CorrectTags() {
    var tgs = document.getElementById("tags");
    var first = false;
    if (tgs) {
        if(tgs.firstChild) {
           var oChild = tgs.firstChild;
           while(oChild&&!first) {
             if (CorrectTagsSub(oChild)) first = true;
             oChild = oChild.nextSibling;
           }
        }
    }
}
function CorrectTagsSub(chld) {
    var ret = false;
    if(chld.nodeName=="A") {
        oChild.className = "first";
        ret = true;
    } else {
       var oChild = chld.firstChild;
       while(oChild&&!ret) {
         if(oChild.nodeName=="A") {
            oChild.className = "first";
            ret=true;
         }
         oChild = oChild.nextSibling;
       }
    }
    return ret;
}

