window.onload = init;

function init(){
    tooltipobj = document.getElementById("tooltip");
    initquotes()
    initArchives()
    
}

function initquotes(){
    var colImages = document.getElementsByTagName("img");
    for(var i=colImages.length-1;i>-1;i--){
        if(colImages[i].parentNode.tagName=="A"){
            var extension = colImages[i].parentNode.href.substr(colImages[i].parentNode.href.length-4);
            if(extension==".jpg" || extension=="jpeg" || extension==".gif" || extension==".png") {
                var quote = colImages[i].getAttribute("data-quote");
                var schilderproces = colImages[i].getAttribute("data-schilderproces");
                var objImage = colImages[i];
                var objWrapper = document.createElement("div");
                var strFloat = objImage.style.cssFloat?objImage.style.cssFloat:objImage.style.styleFloat;
                var numberOfButtons = 1
                if(quote!=null) numberOfButtons++;
                if(schilderproces!=null) numberOfButtons++;
                objWrapper.className = "wrapper-imagetools wrapper-imagetools-float-"+strFloat;
                var strHTML = '';
                if(quote!=null) strHTML+='<div class="comment"><div class="comment-close" onclick="imagetoolsCloseComment(this)">x</div>'+quote+'</div>';
                strHTML+= '<div class="wrapper-buttons tools'+numberOfButtons+'"><img src="http://files.portretschilderkunst.nl/img/magnifier.gif" onclick="imagetoolsOpenUrl(this)" alt="Uitvergroting foto" onmouseover="showTooltip(this,event)" onmouseout="hideTooltip()"/>';
                if(schilderproces!=null) strHTML+= '<img src="/img/paintbrush.gif" onclick="window.open(\'/'+schilderproces+'\',\'_blank\')" alt="Het schilderproces" onmouseover="showTooltip(this,event)" onmouseout="hideTooltip()"/>';
                if(quote!=null) strHTML+= '<img src="/img/comment.gif" onclick="imagetoolsToggleComment(this.parentNode.parentNode.firstChild)" alt="Quote van de opdrachtgever" onmouseover="showTooltip(this,event)" onmouseout="hideTooltip()"/>';
                strHTML+= '</div>';
                objWrapper.innerHTML = strHTML;
                objWrapper.lastChild.style.top = objImage.offsetHeight + 5 + "px";
                objWrapper.firstChild.style.bottom = -objImage.offsetHeight + 5 + "px";
                if(parseInt(objImage.style.marginBottom,10)<20)objImage.style.marginBottom = "20px"
                var objWrapper = objImage.parentNode.parentNode.insertBefore(objWrapper,objImage.parentNode);
                if(strFloat=="left"){
                    objWrapper.lastChild.style.left = objImage.offsetWidth - (-2+numberOfButtons*20) + "px";
                    if(quote!=null) objWrapper.firstChild.style.left = objImage.offsetWidth - 15 + "px";
                }
                objWrapper.relatedImage = objImage;
            }
        }
    }
}


var tooltiptimer
var tooltipobj

function showTooltip(img,event){
    clearTimeout(tooltiptimer);
    var strHTML =  img.getAttribute("alt");
    var X = event.pageX?5 + event.pageX+"px":10 + event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft+"px";
    var Y = event.pageY?-30 + event.pageY+"px":-40 + event.clientY + document.body.scrollTop + document.documentElement.scrollTop+"px";
    tooltiptimer = setTimeout(function(){
        tooltipobj.innerHTML = strHTML; 
        tooltipobj.style.left = X;
        tooltipobj.style.top = Y;
        tooltipobj.style.display = 'block';
    },500)
    
}

function hideTooltip(){
    clearTimeout(tooltiptimer);
    tooltipobj.style.display = 'none';
}

function imagetoolsToggleComment(comment){
    var commentComputedStyle = crossBrowserGetComputedStyle(comment);
    if(commentComputedStyle.visibility!="visible"){
        comment.style.height = "auto";
        var endHeight = comment.offsetHeight - parseInt(commentComputedStyle.borderTopWidth,10) - parseInt(commentComputedStyle.borderBottomWidth,10) - parseInt(commentComputedStyle.paddingTop,10) - parseInt(commentComputedStyle.paddingBottom,10);
        var endWidth = parseInt(commentComputedStyle.width,10); 
        var startHeight = 0;
        var startWidth = 0;
        comment.style.height = startHeight+"px";
        comment.style.width = startWidth + "px";
        comment.style.visibility = 'visible';
    }
    else{
        var endHeight = 0;
        var endWidth = 0; 
        var startHeight = parseInt(commentComputedStyle.height,10);
        var startWidth = parseInt(commentComputedStyle.width,10);
    }
    var animationstepHeight = Math.round((endHeight-startHeight)/5);
    var animationstepWidth = Math.round((endWidth-startWidth)/5);
    var animationHeight = startHeight;
    var animationWidth = startWidth;
    
    var interval = window.setInterval(function(){
        animationHeight = animationstepHeight>0?Math.min(animationHeight + animationstepHeight,endHeight):Math.max(animationHeight + animationstepHeight,endHeight);
        animationWidth = animationstepWidth>0?Math.min(animationWidth + animationstepWidth,endWidth):Math.max(animationWidth + animationstepWidth,endWidth);
        comment.style.height = animationHeight+"px";
        comment.style.width = animationWidth+"px";
        if(animationHeight==endHeight && animationWidth==endWidth){
            window.clearInterval(interval)
            if(animationstepWidth<0){
                comment.style.visibility="hidden";
                comment.style.width=startWidth+"px";
            }
        }
    },40)
    
    hideTooltip();
    
}

function crossBrowserGetComputedStyle(obj){
    return obj.currentStyle?obj.currentStyle:document.defaultView.getComputedStyle(obj, "")
}

function imagetoolsOpenUrl(obj){
    window.open(obj.parentNode.parentNode.relatedImage.parentNode.href,'_blank')
}    
function imagetoolsCloseComment(obj){
    imagetoolsToggleComment(obj.parentNode);
}


  function initArchives(){
    var currYear=0;
    var objList = null;
    for (var i=archives.length-1;i>=0;i--){
        var regExprYear = /[0-9]+/ig;
        var year = parseInt(archives[i][1].match(regExprYear)[0],10);
        if(year && year>=2007){//year found
            if(currYear!=year){
                if(objList!=null){document.getElementById("archivelist").appendChild(objList)}
                objList = document.createElement("li");
                objList.className = "listmonthsperyear";
                objList.innerHTML = '<a href="javascript:void(0)" onclick="this.nextSibling.style.display=this.nextSibling.style.display==\'block\'?\'none\':\'block\';return false">'+year+'</a><ul class="listmonthsperyear"></ul>';
                currYear=year;
            }
            var objListItem = document.createElement("li");
            objListItem.innerHTML = '<a href=\"' + archives[i][0] + '\">' + archives[i][1] + '</a>'; 
            objList.lastChild.appendChild(objListItem);
        }
  }
  if(objList!=null){document.getElementById("archivelist").appendChild(objList)}
}

function loadTranslation(link,lang){
    //var arrNodes = link.parentNode.childNodes;
	var text = link.parentNode.innerText || link.parentNode.textContent;
	var strOReference = "oTranslations.translation"+oTranslations.counter;
    eval(strOReference+" = new processResponse();"+strOReference+".source= link.parentNode");
    oTranslations.counter++;
    loadJSON(encodeURI("http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q="+text.replace(/\&/g,"en")+"&langpair=nl|en&callback="+strOReference+".run"))
    eval(strOReference+".lastEl = true;")
    link.parentNode.removeChild(link,true);
}

var oTranslations = {counter:0}

function processResponse(){
    this.lastEl = false;
}

processResponse.prototype.run = function(response){
	var newel = document.createElement("div")
	newel.style.padding = "10px";
	newel.style.border = "1px solid #fff";
	var text = response.responseData.translatedText
	text = text.replace(/Labels\:[\s\S]*/g,"").replace(/Tags\:[\s\S]*/g,"")
	newel.innerHTML = text + (this.lastEl?"<br/><br/>(this text was translated automaticaly to english using <a href='http://translate.google.com' target=' _blank'>google translate</a>)":"");
	this.source.appendChild(newel) 
}

function showTranslation(oResponse){
    alert(oResponse.responseData.translatedText)
}

function loadJSON(url) {
  var headID = document.getElementsByTagName("head")[0];         
  var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      newScript.src = url;
  headID.appendChild(newScript);
}