/*
*      Levens-kunst 
*       PORTFOLIO
*   Designed by MJJ Smeets
* Tri-M Software & Webdesign
*
*/

var Portfolio = Class({

    el: null,
    
    max: 8,
    
    pagenr: 0,
    
    album: '',
    
    database: '',
    
    recordamount: 0,
    
    xmldata: '',
    
    imagedir: '',
    
    thumbdir: '',
    
    albumlist: [
      "schilderijen",
      "sculpturen",
      "wandsculpturen",
      "tuinsculpturen"
    ],

    constructor: function(f) {
        var autoload = null;
        if (typeof(f) === "object") {
            if (typeof(f.album) !== "undefined") {
                autoload = f.album;
            }
            if (typeof(f.el) !== "undefined") {
                f = f.el;
            }
        }
        if (typeof(f) === "string") {
            if ($("body").find("#"+f).length > 0) {
                this.el = $("#"+f)[0];
            } else {
                if ($("body").find("#content").length > 0) {
                    this.el = $("#content")[0];
                } else if ($("body").find("#portfolio").length > 0) {
                    this.el = $("#portfolio")[0];
                }
            }
            if (this.el !== null) {
                var layout = "<div id='portfolio_outer' style='position:absolute;top:2%;left:25%;width:75%;height:98%;border-style:none;'>";
                layout    += "<div id='portfolio_inner' style='position:absolute;top:0px;left:0px;width:99.5%;height:80%;z-index:1;' align='center' valign='center'>";
                layout    += "</div>";
                layout    += "<div id='portfolio_caption' style='position:absolute;top:82%;left:0px;width:99.5%;height:8%;z-index:1;' align='center'>";
                layout    += "</div>";
                layout    += "<div id='portfolio_thumb' style='position:absolute;top:88%;left:0px;width:99.5%;height:10%;z-index:2;' align=\"center\">";
                layout    += "</div>";
                layout    += "</div>";
                $("body").append(layout);
            }
        }
        if (autoload !== null) {
            this.open(autoload);
        }
    },
    
    open: function(p) {
        p = p.toLowerCase();
        if (this.isAlbum(p)) {
            this.album = p;
            this.database = 'pages/'+this.album+'/images.xml';
            this.imagedir = 'pages/'+this.album+'/images/';
            this.thumbdir = 'pages/'+this.album+'/thumbs/';
            $.ajax({
                type: "GET",
                url: this.database,
                dataType: "xml",
                success: this.loadDatabase
            });
        }
    },

    loadDatabase: function(xml) {
        var reccount   = 0;
        var thumbcount = 0;
        portfolio.xmldata = xml;
        var fromrecord = portfolio.pagenr * portfolio.max;
        var torecord   = (portfolio.pagenr + 1) * portfolio.max;
        var thumbnails = '<table id="thumbpanel" border="0" width="70%" height="50"><tbody><tr>';
        if (portfolio.pagenr > 0) {
            thumbnails += "<td><img src=\"images/arrowl.gif\" style=\"width:30px;height:40px;cursor:pointer;border-style:none;\" onmousedown=\"this.style.borderStyle='inset';\" onmouseup=\"this.style.borderStyle='none';\" onclick=\"portfolio.loadPrev();\" alt=\"\" /></td><td width=\"5\"> </td>";
        } else {
            thumbnails += "<td><img src=\"images/arrowl.gif\" style=\"width:30px;height:40px;cursor:pointer;border-style:none;opacity:0.2;filter:alpha(opacity=20);\" alt=\"\" /></td><td width=\"5\"> </td>";
        }
        $(xml).find("img").each(function(i) {
            if (reccount >= fromrecord && reccount < torecord) {
                var thumb_image = portfolio.thumbdir + $(this).attr('src');
                var full_image  = portfolio.imagedir + $(this).attr('src');
                var caption = $(this).attr('caption');
                var thumb_style = "width:90%;height:45px;cursor:pointer;border-style:outset;";
                thumbnails += '<td><img src="'+thumb_image+'" onclick="portfolio.setImage(\''+full_image+'\',\''+caption.replace(/\'/g,"")+'\');" style="'+thumb_style+'" onmousedown="this.style.borderStyle=\'inset\';" onmouseup="this.style.borderStyle=\'outset\';" alt="'+caption+'" /></td>';
                thumbcount++;
            }
            if (reccount === 0) {
                var first_image = portfolio.imagedir + $(this).attr('src');
                var first_caption = $(this).attr('caption');
                portfolio.setImage(first_image,first_caption);
            }
            reccount++;
        });
        portfolio.recordamount = reccount;
        if (portfolio.pagenr < (portfolio.recordamount/portfolio.max)-1) {
            thumbnails += "<td><img src=\"images/arrowr.gif\" style=\"width:30px;height:40px;cursor:pointer;border-style:none;\" onmousedown=\"this.style.borderStyle='inset';\" onmouseup=\"this.style.borderStyle='none';\" onclick=\"portfolio.loadNext();\" alt=\"\" /></td><td width=\"5\"> </td>";
        } else {
            thumbnails += "<td><img src=\"images/arrowr.gif\" style=\"width:30px;height:40px;cursor:pointer;border-style:none;opacity:0.2;filter:alpha(opacity=20);\" alt=\"\" /></td><td width=\"5\"> </td>";
        }
        thumbnails += "</tr></tbody></table>";
        $("#portfolio_thumb").html(thumbnails);
        if (thumbcount < portfolio.max) {
            var rest = portfolio.max - thumbcount;
            $("#thumbpanel").attr('width',(70-(rest*5))+'%');
        }
    },
    
    loadNext: function() {
        this.pagenr++;
        if (this.pagenr >= (this.recordamount/this.max)) {
            this.pagenr = 0;
        }
        this.loadDatabase(portfolio.xmldata);
    },
    
    loadPrev: function() {
        if (this.pagenr > 0) {
            this.pagenr--;
            this.loadDatabase(portfolio.xmldata);
        }
    },
    
    setImage: function(img,caption) {
        $("#portfolio_inner").html("<img src=\""+img+"\" alt=\"\" height=\"98%\" style=\"border-style:solid;border-width:5px;border-color:#036D03;\" />");
        if (typeof(caption) !== "undefined") {
            $("#portfolio_caption").html("<b style='font-family:Verdana;font-size:14px;'>"+caption+"</b>");
        }
    },
    
    isAlbum: function(a) {
        if (typeof(a) === "string") {
            for (i=0; i<this.albumlist.length; i++) {
                if (this.albumlist[i] === a) {
                    return true;
                }
            }
        }
        return false;
    }

});