"use strict";
function ma_naar(n,i,j){
  var nam= n + "@" + 'webonomic.nl';
    document.write("<\a href='mailto:" +nam +"?subject="+i+"'>" + nam +"<\/a>");
}

/* randomize dom children */
(function($) {

    $.fn.randomize = function(childElem) {
        return this.each(function() {
            var $this = $(this);
            var elems = $this.children(childElem);

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

            $this.remove(childElem);  

            for(var i=0; i < elems.length; i++)
                $this.append(elems[i]);      

        });    
    }
})(jQuery);

/* start after pageload */
$(document).ready(function(){
    /* support HTML5 history */    
    if (window.history && history.pushState) {
//        setupHistoryClicks();
        window.setTimeout(function() {
            window.addEventListener("popstate", function(e) {
                
                swapContent(location.pathname);
            }, false);
        }, 200);     
 
     var   his = {
            meta_title : document.getElementsByTagName("title")[0],
            title : document.getElementsByTagName("h1")[0],
            main : document.getElementById("main"),
            body : document.getElementsByTagName("body")[0],
            contentholder : document.getElementById("contentholder"),
            meta_descr : document.querySelectorAll("head meta[name='description']")[0],
            holder : document.getElementById("contentholder")
            
        }
 

    }
   
   
    function swapContent(href) {
        
        
        his.main.classList.toggle('slide');
        
        
        
        var req = new XMLHttpRequest();
        req.open("GET",
            href,
            false);
        req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        req.send(null);
        if (req.status == 200) {
            
        var    response= JSON.parse(req.responseText)
           
            his.meta_title.innerHTML = response.meta_title
            his.meta_descr.setAttribute('content', response.meta_descr) 
        var    items = document.querySelectorAll('nav li')
            
            // update active menu item
            for(var i=0; i<items.length; i++)
            {
                items[i].classList.remove('active');
                items[i].classList.remove('trail');
              
                var href = items[i].childNodes[1].getAttribute('href')
        //           console.log(href,menulink,response.slug,menulink.substr(menulink.lastIndexOf("/")))
                if(href.substr(href.lastIndexOf("/")+1)==response.slug){
                    items[i].classList.add('active');
                }
            }
            
            setTimeout(function(){
                his.body.setAttribute('class', '');
                document.documentElement.className += " js"
                his.contentholder.innerHTML = response.content;
                his.title.innerHTML=response.title;
                his.body.classList.add('p-'+response.slug )
                his.body.classList.add( 'pid-'+response.id )
                
                his.main.classList.remove('slide');
                
                
                initpage()
           
            },300)
            return true;
        }
 
        return false;
    }
 
    function addClicker(link) {
        link.addEventListener("click", function(e) {
            
            if (swapContent(link.href)) {
               history.pushState(null, null, link.href);
                e.preventDefault();
        //        console.log(link.href)
               
            }
        }, true);
    }

    var links = document.querySelectorAll("nav a");
 

    Array.prototype.forEach.call(links, function(a, index, nodeList)
    {
       addClicker(a);
    });
//    function setupHistoryClicks() {
//
//  
//    //addClicker(document.getElementByClass("photonext"));
// 
//    }
    // end history 
   
    initpage()
    
  
})


function spinner_right(){
    if (document.querySelector('#h_spinner .c1 a'))
    document.querySelector('#h_spinner .c1 a').click()
}
function spinner_left(){
    if (document.querySelector('#h_spinner .c1 a'))
    document.querySelector('#h_spinner .c3 a').click()
}
var spinnerto = window.setTimeout(spinner_right,4000) 


function initpage(){
    $(".random").randomize("li");
    
    // animation on portfolio
    $("#piclist img").click(function(){
        var src = $(this).attr('src')
      
        src ="cache/imagecache/post/"+ src.substring(src.lastIndexOf('/') + 1)
        var imgtmp = new Image();
        imgtmp.src = src;
        $("#text").addClass('hide')
        $("#pic").addClass('slide')
        setTimeout(function(){
            
            $("#pic").attr('src',src)
            $("#text").addClass('hide')
            $("#pic").removeClass('slide')
           
        },500)
                       
    })
    
    $("#info").click(function(){
         
        $("#text").toggleClass('hide')
        
                
    })
    // end animation on portfolio
      
    // animation home page   
    //elem = document.getElementById('spinner')
    var elems = $('#h_spinner li');
    var total = elems.length-1;
    elems.eq(0).addClass('c1')
    elems.eq(1).addClass('c2')
    elems.eq(2).addClass('c3')
    var start=0 ,index=1, left =0, right=0
    
    window.clearTimeout(spinnerto)
    spinnerto = window.setTimeout(spinner_right,4000) 
    
    $("#h_spinner li").click(function(event){
        
   //     console.log('test')
        window.clearTimeout(spinnerto)           
      
        
      var  el=$(this)
                        
        left = (index == 0) ? total : index - 1
        right = (index== total) ? 0 : index + 1  ; 
             
        if (el.hasClass('c2')){
            return true;
        }
                    
        if (el.hasClass('c1')){
            var left2 = (left >= 1) ? left-1 : total     
            elems.eq(right).removeClass('c3')
            elems.eq(index).addClass('c3')
            elems.eq(index).removeClass('c2')
            elems.eq(left).addClass('c2')
            elems.eq(left).removeClass('c1')
            elems.eq(left2).addClass('c1')
            index= (index==0) ? total :index-1;
            event.preventDefault()
            spinnerto=window.setTimeout(spinner_right,4000)
        }
                    
        if (el.hasClass('c3')){
            var right2 = (right <total ) ? right+1 : 0    
            elems.eq(left).removeClass('c1')
            elems.eq(index).addClass('c1')
            elems.eq(index).removeClass('c2')
            elems.eq(right).addClass('c2')
            elems.eq(right).removeClass('c3')
            elems.eq(right2).addClass('c3')
            index =  (index==total) ? 0 : index+1 ;
            event.preventDefault()
            spinnerto=window.setTimeout(spinner_left,4000)
        }
        event.preventDefault()
    })
   
   
   
    setTimeout(function(){
        document.documentElement.className = "js2"
    },200);
// end animation home page        
//console.log()
        

    
    
}