/**
 *  Copyright notice 
 * 
 *  (c) 2006 Mikko Mensonen <mikko.mensonen@gmail.com>
 *
 *  This script is a part of my personal portfolio
 *
 *  All scripts part of the portfolio are considered as free software; 
 *  you can redistribute it and/or modify it under the terms of the GNU 
 *  General Public License as published by the Free Software Foundation; 
 *  either version 2 of the License, or (at your option) any later version.
 *
 *  See the GNU General Public License for more details, you can obtain 
 *  it from http://www.gnu.org/licenses/gpl.html
 *
 */
 
/**
 * This file contains the main class "portfolio".
 *
 * Most of it is pretty basic javascript (some XMLHttpRequests and 
 * heavy use of the basic four DOM methods), but someone might find 
 * it useful. If so, feel free to copy, paste and modify :-)
 * 
 * @author Mikko Mensonen <mikko.mensonen@gmail.com>
 */
 
 
var portfolio = { 

    boxDepth : Number,
    boxWidth : Number, 
    mainMargin : Number, 
    mainWidth : Number, 
    i : Number, 
    s : Number, 
    speed : Number, 
    boxes : Number, 
    moveBox : Number, 
    cType : String, 
    cPid : Number, 
    titleStack : null,
    busy : Boolean,
    
    init : function()
    {
        this.boxDepth = 0;
        this.boxWidth = 294;
        this.mainMargin = -97;
        this.mainWidth = 194;
        this.i = 1;
        this.s = 294;
        this.speed = 10;
        this.boxes = 0;
        this.moveBox = 0;
        this.titleStack = new Array();
        this.busy = false;
    }, 
    
    getProjects : function() 
    {
        this.cType = 'getprojects';
        this.req();
    },

    loadBox : function(type, pid) 
    {
        if (this.busy) { return true; }
        
        this.boxDepth++;
        this.boxes++;
        this.cType = type;
        this.cPid = pid;
        
        nB = document.createElement('div');
        nB.style.width = '1px';
        nB.style.height = '400px';
        nB.id = 'box' + this.boxDepth;
        nB.boxNo = this.boxDepth;
        nB.className = 'loadingBox';

        m = document.getElementById('main');
        m.insertBefore(nB, document.getElementById('startnotes'));
        
        this.busy = true;
        
        setTimeout('portfolio.expandBox()', 10);
        
    },
    
    removeBox: function(boxNo) 
    {
        if (this.busy) { return true; }
        
        boxid = 'box' + boxNo;
        
        this.moveBox = boxNo;
        this.boxDepth++;
        this.boxes--;

        nB = document.createElement('div');
        nB.style.width = this.boxWidth + 'px';
        nB.style.height = '400px';
        nB.id = 'box' + this.boxDepth;
        nB.className = 'loadingBox';

        m = document.getElementById('main');
        m.removeChild(document.getElementById(boxid));
        
        if (('box' + (this.boxDepth - 1)) != boxid) {
            m.insertBefore(nB, document.getElementById('box' + (boxNo + 1)));
        } else {
           m.insertBefore(nB, document.getElementById('startnotes'));
        }
        
        this.busy = true;
        
        setTimeout('portfolio.shrinkBox()', 10);
    },
    
    expandBox: function() 
    {
        nB = document.getElementById('box' + this.boxDepth);
        m = document.getElementById('main');
        d = document.getElementById('debug');
        if (this.i <= this.boxWidth) {
            this.i = this.i + this.speed;
            this.mainWidth = this.mainWidth + this.speed + 1;
            m.style.width = this.mainWidth + 'px';
            m.style.marginLeft = -(Math.ceil(m.offsetWidth / 2)) + 'px';            
            nB.style.width = this.i + 'px';
            setTimeout('portfolio.expandBox()', 10);
        } else {
            this.i = 0;
            m.style.width = 194 + (this.boxes * (this.boxWidth + 20)) + 'px';
            m.style.marginLeft = -(Math.ceil(m.offsetWidth / 2)) + 'px'; 
            this.req();
        }
    },
    
    shrinkBox : function() 
    {
        nB = document.getElementById('box' + this.boxDepth);
        m = document.getElementById('main');
        d = document.getElementById('debug');
        if (this.s >= 1) {

            this.s = this.s - this.speed;
            this.mainWidth = this.mainWidth - this.speed - 1;
            m.style.width = this.mainWidth + 20 + 'px';
            m.style.marginLeft = -(Math.ceil(m.offsetWidth / 2)) + 'px'; 
            nB.style.width = (this.s < 0 ? 0 : this.s) + 'px';
            setTimeout('portfolio.shrinkBox()', 10);
        } else {
            this.s = 294;
            m.style.width = 194 + (this.boxes * (this.boxWidth + 50)) + 'px';
            m.style.marginLeft = -(Math.ceil(m.offsetWidth / 2)) + 'px'; 
            m.removeChild(nB);
            this.titleStack.shift();
            this.update();
            this.busy = false;
        }
    },
    
    req : function(type, pid) 
    {

        var httpReq = false;
        
        if (window.XMLHttpRequest) {
            httpReq = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                httpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    httpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!httpReq) {
            promptIt('error', 'Sorry!', 'Giving up :( Cannot create an XMLHTTP instance!\n\nXMLHttpRequest works on\nMozilla 1.0\nInternet Explorer 5.0\nSafari 1.2\nOpera 8.0\nand above. Check that your browser is compatible.');
            return false;
        }
        url = this.cType + '.php?pid=' + this.cPid;
        httpReq.onreadystatechange = function() { portfolio.doReq(httpReq); }; 
        httpReq.open('GET', url, true);
        httpReq.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
        httpReq.send(null);
    },
    
    doReq : function(httpReq) 
    {

        if (httpReq.readyState == 4) {
            if (httpReq.status == 200) {
                r = httpReq.responseText;
                eval(r);
                this.busy = false;
            } else {
                promptIt('error', 'oops!', 'something went wrong with your request :-(');
            }
        }
    },
    
    drawS : function(projects)
    {
        if (projects == undefined) { return true; }
        
        sB = document.getElementById('start');
        p = document.getElementById('projects');
        sB.removeChild(p);
        
        ul = document.createElement('ul');
        for (el in projects) {
            li = document.createElement('li');
            a = document.createElement('a');
            a.appendChild(document.createTextNode(projects[el][0]));
            a.getId = projects[el][1];
            a.href = 'javascript:void(0)';
            a.onclick = function() { portfolio.loadBox('project', this.getId); this.blur(); }
            li.appendChild(a);
            ul.appendChild(li);
        }
        sB.appendChild(ul);
    },
    
    drawP : function(title, preface, list, links)
    {

        nB = document.getElementById('box' + this.boxDepth);
        nB.className = 'widebox';

        img = document.createElement('img');
        img.src = 'layout/x.gif';
        img.className = 'closeBtn';
        img.boxid = nB.boxNo; 
        img.alt = img.title = 'click to close';
        img.onclick = function () { portfolio.removeBox(this.boxid); }
        nB.appendChild(img);

        h2 = document.createElement('h2');
        h2.appendChild(document.createTextNode('> ' + title));
        nB.appendChild(h2);
        
        this.titleStack.unshift(title);
        this.update();
        
        if (preface != undefined) {
            
            lines = preface.split('\n');

            div = document.createElement('div');
            for (i=0; i<lines.length; i++) {
                div.appendChild(document.createTextNode(lines[i]));
                div.appendChild(document.createElement('br'));
            }

            div.className = 'preface';
            nB.appendChild(div);
        }
        if (list != undefined) {
            
            h3 = document.createElement('h3');
            h3.appendChild(document.createTextNode('Learn More'));
            nB.appendChild(h3);
            
            ul = document.createElement('ul');
            for (el in list) {
                li = document.createElement('li');
                a = document.createElement('a');
                a.appendChild(document.createTextNode(list[el][0]));
                a.getId = list[el][1];
                a.href = 'javascript:void(0)';
                a.onclick = function() { portfolio.loadBox('content', this.getId); this.blur(); }
                li.appendChild(a);
                ul.appendChild(li);
            }
            nB.appendChild(ul);
        }
        if (links != undefined) {
            
            div = document.createElement('div');
            div.className = 'links';
            for (el in links) {
                a = document.createElement('a');
                a.appendChild(document.createTextNode(links[el][1]));
                a.href = links[el][0];
                a.target = '_blank';
                div.appendChild(a);
                div.appendChild(document.createElement('br'));
            }
            nB.appendChild(div);
        }
    },
    
    drawC : function(contentType, title, content) {
        
        nB = document.getElementById('box' + this.boxDepth);
        nB.className = 'widebox';

        img = document.createElement('img');
        img.src = 'layout/x.gif';
        img.className = 'closeBtn';
        img.boxid = nB.boxNo; 
        img.alt = img.title = 'click to close';
        img.onclick = function () { portfolio.removeBox(this.boxid); }
        nB.appendChild(img);

        h2 = document.createElement('h2');
        h2.appendChild(document.createTextNode('> ' + title));
        nB.appendChild(h2);
        
        this.titleStack.unshift(title);
        this.update();
        
        if (content == undefined) { return true; }
        
        switch (contentType) {
            case 'text':
            
                lines = content.split('\n');
                
                div = document.createElement('div');
                for (i=0; i<lines.length; i++) {
                    div.appendChild(document.createTextNode(lines[i]));
                    div.appendChild(document.createElement('br'));
                }

                div.className = 'content';
                nB.appendChild(div);
            
                break;
                
            case 'image':
            
                t = document.createElement('div');
                t.className = 'thumbs';
                for (image in content) {
                    div = document.createElement('div');
                    img = document.createElement('img');
                    img.src = 'img.php?w=80&i=images/' + content[image][0];
                    img.image = content[image][0];
                    img.desc = content[image][1];
                    img.onclick = function() { portfolio.popupPic(this.image, this.desc); this.blur(); }
                    div.appendChild(img);
                    div.className = 'thumb';
                    t.appendChild(div);
                }
                nB.appendChild(t);
            
                break;
        }
        
    },
    
    popupPic : function(image, desc)
    {
        
        pp = document.createElement('div');
        pp.id = 'picBrowser';
        pp.className = 'picBrowser';
        
        document.body.appendChild(pp);
        
        pp = document.getElementById('picBrowser');
        
        pp.style.position = 'absolute';
        pp.style.left = '50%';
        pp.style.top = '50%';
        pp.style.marginTop = -(pp.offsetHeight / 2) + 'px';
        pp.style.marginLeft = -(pp.offsetWidth / 2) + 'px';
        
        div = document.createElement('div');
        div.className = 'picBrowserTop';
        
        x = document.createElement('div');
        x.className = 'picBrowserClose';
        x.onclick = function() { portfolio.removePP(); }
        x.appendChild(document.createTextNode('X'));
        
        div.appendChild(x);
        div.appendChild(document.createTextNode(image));
        
        pp.appendChild(div);
        
        img = document.createElement('img');
        img.src = 'img.php?w=780&i=images/' + image;
        img.border = '0';
        a = document.createElement('a');
        a.href = 'images/' + image;
        a.target = '_blank';
        a.appendChild(img);
        pp.appendChild(a);
        
        div = document.createElement('div');
        div.className = 'picBrowserDesc';
        div.appendChild(document.createTextNode(desc));
        pp.appendChild(div);
        
        document.getElementById('main').style.opacity = '.30';
        document.getElementById('main').style.filter = 'alpha(opacity = 30)';
    },
    
    removePP : function()
    {
        pp = document.getElementById('picBrowser');
        document.body.removeChild(pp);
        document.getElementById('main').style.opacity = '1';
        document.getElementById('main').style.filter = 'alpha(opacity = 100)';
    },
    
    update : function() 
    {
        document.title = (this.titleStack[0] != undefined ? 'portfolio > ' +  this.titleStack[0] : 'portfolio');
    }
    
}