//--globals------------------------
var xdoc;
var backpicpath;
var them;
var thelist;
var current;
var curnum;

//--load xml-file-------------------
function init(){
	sendRequest('reflist4.xml',init2);
}

//--save response document and show listing------
function init2(req){
        xdoc =  req.responseXML;
        showlist();
}

//--show listing by constructing new elements
function showlist(){

    var cont = document.getElementById('content');
    
    //create inner container that can be replaced by single reference
    var innerc = document.createElement('div');
    innerc.id = 'box';
    cont.appendChild(innerc);
    
    them = xdoc.getElementsByTagName('ref');
    
    for(i=0;i<them.length;i++){
        
        var idname = them[i].getAttribute('id');
        
        var mdiv = document.createElement('div');
        mdiv.className = 'refitem';
	var blink = document.createElement('a');
        var pic = document.createElement('img');

        
        var picpath = 'img/portfolio/' +  idname + '/' + idname + '_small_a.jpg';
        pic.src = picpath;
        pic.style.width = '140px';
        pic.style.height = '90px';
	blink.appendChild(pic);
	blink.href = 'javascript:setcurnum('+i+');showref("'+ idname + '");';
        
        var tlink = document.createElement('a');
	tlink.className = 'reflink';
	tlink.href = 'javascript:setcurnum('+i+');showref("'+ idname + '");';
        var inhalt = document.createTextNode(them[i].getAttribute('title'));
        tlink.appendChild(inhalt);
        
        mdiv.appendChild(blink);
        mdiv.appendChild(tlink);
        
        innerc.appendChild(mdiv);   
    }
    thelist = innerc.cloneNode(true);
    current = 'box';
}

//--show single reference 
function showref(elid){
        
        //get ref, container and old box
        var ref = them[curnum]; //xdoc.getElementById(elid);
        var cont = document.getElementById('content');
        var old = document.getElementById(current);
        
        //create new box
        var thisref = document.createElement('div');
        thisref.id = elid;
        
        //folder for pics
        var picpath = 'img/portfolio/' + elid + '/';
        
        //create pics
        var bigp = document.createElement('img');
        bigp.src =  picpath + elid + '_a.jpg';
        backpicpath = bigp.src;
        bigp.id = 'grossbild';
        thisref.appendChild(bigp);
        
        var thumbs = document.createElement('div');
        
        var little1 = document.createElement('img');
        little1.src = picpath + elid + '_small_b.jpg';
        little1.className = 'thumb';
        little1.onmouseover = hoverit;
        little1.onmouseout = hoverit;
        var little2 = document.createElement('img');
        little2.src = picpath + elid + '_small_c.jpg';
        little2.className = 'thumb';
        little2.onmouseover = hoverit;
        little2.onmouseout = hoverit;
        var little3 = document.createElement('img');
        little3.src = picpath + elid + '_small_d.jpg';
        little3.className = 'thumb';
        little3.onmouseover = hoverit;
        little3.onmouseout = hoverit;
        
        thumbs.appendChild(little1);
        thumbs.appendChild(little2);
        thumbs.appendChild(little3);
        thisref.appendChild(thumbs);
        
        //create texts
        var textbox = document.createElement('div');
        textbox.className = 'texte';
        
        var headline = document.createElement('div');
        headline.id = 'hline';
        var aaa = document.createTextNode(ref.getAttribute('title'));
        headline.appendChild(aaa);
        textbox.appendChild(headline);
        
        var inhalte = ref.getElementsByTagName('text');
        
        for(var k=0;k<inhalte.length;k++){
                var kkk = document.createElement('div');
                if(inhalte[k].firstChild){
                        var thestr = inhalte[k].firstChild.nodeValue;
                        if(thestr.indexOf('*') >= 0){
                                var paras = thestr.split('*');
                                for(var jj=0;jj<paras.length;jj++){
                                        kkk.appendChild(document.createTextNode(paras[jj]));
                                        kkk.appendChild(document.createElement('br'));
                                }
                        }
                        else kkk.appendChild(document.createTextNode(thestr));
                        //var lll = document.createTextNode(inhalte[k].firstChild.nodeValue);
                        //kkk.appendChild(lll);
                }
                textbox.appendChild(kkk);
        }
        thisref.appendChild(textbox);
        
        //create buttons
        var buttons = document.createElement('div');
        buttons.id = 'pfbuttons';
        var btn1 = document.createElement('a');
        btn1.className = 'pfbutton';
        btn1.href = 'javascript:moveinlist(-1);';
        btn1.appendChild(document.createTextNode('Previous'));
        var btn2 = document.createElement('a');
        btn2.className = 'pfbutton';
        btn2.id = 'btn2';
        btn2.href = 'javascript:backtolist();';
        btn2.appendChild(document.createTextNode('Back to Portfolio'));
        var btn3 = document.createElement('a');
        btn3.className = 'pfbutton';
        btn3.id = 'btn3';
        btn3.href = 'javascript:moveinlist(1);';
        btn3.appendChild(document.createTextNode('Next'));
        
        buttons.appendChild(btn1);
        buttons.appendChild(btn2);
        buttons.appendChild(btn3);
        
        thisref.appendChild(buttons);
        
        cont.replaceChild(thisref, old);
        current = elid;
}

function setcurnum(num){
        curnum = num;
}

function hoverit(ev){
        ev = (ev) ? ev : ((window.event) ? window.event : null);
        if(ev){
                var elm = (ev.target) ? ev.target : ((ev.srcElement) ? ev.srcElement : null);
                if(elm){
                        var bigpic = document.getElementById('grossbild');
                        var newpath = elm.src.replace('_small', '');
                        switch (ev.type){
                                case 'mouseover': bigpic.src = newpath;
                                        break;
                                case 'mouseout': bigpic.src = backpicpath;
                                        break;
                        }
                }
        }
}



function backtolist(){
        var cont = document.getElementById('content');
        var old = document.getElementById(current);
        cont.replaceChild(thelist, old);
        current = 'box';
}


function moveinlist(dir){
        var nownum = curnum+dir;
        if(nownum > them.length-1) nownum = 0;
        if(nownum < 0) nownum = them.length-1;
        setcurnum(nownum);
        var newref = them[curnum];
        //alert(curnum);
        showref(newref.getAttribute('id'));
}