/*********************************************************
 * Ajax.Portfolio class v0.1
 *
 * Deze class, bouwd van uit de database een thumnail
 * pagina, met thumbs en een leuke animatie, met links
 * Deze klas KAN gekoppeld worden met Ajax.URL
 *
 * Alles is IE/FF/Safari proof (IE6+ niet getest..)
 *
 * (c) 2008 Joey
 ********************************************************/

var pBlock = 'portfolioMiddle';
var Json;
var Type;

Ajax.Portfolio = Class.create();

Ajax.Portfolio.prototype = {
    initialize: function(t, type) {
        Json = t.responseText.evalJSON(true);
        Type = type;
        
        // Top
        this.portTop = document.createElement('div');
        this.portTop.setAttribute('id', 'portfolioTop');
        this.portTop.className = 'mcTop';
        
        this.portTopTitle = document.createElement('span');
        this.portTopTitle.setAttribute('id', 'portfolioTitle');
        
        this.portTop.appendChild(this.portTopTitle);
        
        // Midden
        this.portMiddle = document.createElement('div');
        this.portMiddle.setAttribute('id', 'portfolioMiddle');
        this.portMiddle.className = 'mcPortMiddle';
        
        // Bottom
        this.portBottom = document.createElement('div');
        this.portBottom.setAttribute('id', 'portfolioBottom');
        this.portBottom.className = 'mcPortBottom';
        
        this.portBottomPages = document.createElement('span');
        this.portBottomPages.setAttribute('id', 'portfolioPages');
        
        this.portBottom.appendChild(this.portBottomPages);
        
        this.portNewBut = document.createElement('div');
        this.portNewBut.setAttribute('id', 'mcNewBut');
        
        // Appenden
        $(cBlock).appendChild(this.portTop);
        $(cBlock).appendChild(this.portMiddle);
        $(cBlock).appendChild(this.portBottom);
        $(cBlock).appendChild(this.portNewBut);
        
        this.parseJSON();
    },
    
    parseJSON: function() {
        this.pBlock = $(pBlock);
        
        if(Json != null) {
            if(Type == 'thumbs') {
                thumbArray = [];
                
                for (var i = 0; i < Json.length; i++) {
                    thumbArray.push(new Array(Json[i].id, Json[i].cat, Json[i].title, Json[i].thumb, Json[i].pageTitle, Json[i].pageCat));
                }
                
                if(thumbArray[0][5] == '3d') {
                    $('portfolioTitle').innerHTML = thumbArray[0][4] + ' :: 3D';
                } else {
                    $('portfolioTitle').innerHTML = thumbArray[0][4] + ' :: ' + thumbArray[0][5].ucFirst();
                }
                
                this.parseList(thumbArray).bind(this);
            } else if(Type == 'entry') {
                entryArray = [];
                
                for(var i = 0;i < Json.length; i++) {
                    entryArray.push(Json[i].id, Json[i].cat, Json[i].title, Json[i].images, Json[i].desc);
                }
                
                if(entryArray[1] == '3d') {
                    $('portfolioTitle').innerHTML = '3D :: ' + entryArray[2].ucFirst();
                } else {
                    $('portfolioTitle').innerHTML = entryArray[1] + ' :: ' + entryArray[2].ucFirst();
                }
                
                this.parseEntry(entryArray).bind(this);
            }
        } else {
            this.pBlock.innerHTML = '<p>Er staat nog niet in het portfolio</p>';
            setTimeout("Element.hide('mLoading');", 500);
        }
    },
    
    parseList: function(array) {
        this.pBlock = $(pBlock);
        this.thumbList = array;
        
        
        for (var i = 0; i < this.thumbList.length; i++) {            
            this.thumbsList = document.createElement('div');
            this.thumbsList.setAttribute('id', 'portfEntry_' + i);
            this.thumbsList.style.cssText = 'display:none;';
            this.thumbsList.className = 'mcPortThumbs';
            
            this.thumbsListTitle = document.createElement('span');
            this.thumbsListTitle.innerHTML = '<b>Titel:</b> <a link="/' + this.thumbList[i][1].toLowerCase() + '/' + this.thumbList[i][0] + '">' + this.thumbList[i][2] + '</a>';
                                                               
            this.thumbsListThumb = document.createElement('img');
            if(this.thumbList[i][3] == '') {
                this.thumbsListThumb.setAttribute('src', 'backbase/images/content/no_pic.png');
                this.thumbsListThumb.setAttribute('alt', '');
            } else {
                this.thumbsListThumb.setAttribute('src', this.thumbList[i][3]);
                this.thumbsListThumb.setAttribute('alt', '');
            }

            this.thumbsListCat = document.createElement('span');
            this.thumbsListCat.innerHTML = '<b>Category:</b> <a link=/' + this.thumbList[i][1].toLowerCase() + '>' + this.thumbList[i][1] + '</a>';

            this.thumbsList.appendChild(this.thumbsListTitle);  
            this.thumbsList.appendChild(this.thumbsListThumb);
            this.thumbsList.appendChild(this.thumbsListCat);     
            
            this.pBlock.appendChild(this.thumbsList);
            
            new Effect.Appear($('portfEntry_' + i), {queue: 'end', duration: 0.5});
        };
        
        setTimeout("Element.hide('mLoading');", 500);
    },
    
    parseEntry: function(array) {
        this.pBlock = $(pBlock);
        this.entryArr = array;
        this.pEntryImages = this.entryArr[3].split(",");
        
        this.imageDivCont = document.createElement('div');
        this.imageDivCont.className = 'portfImg';
        
        this.imageContainer = document.createElement('img');
        this.imageContainer.setAttribute('alt', 'Klik voor vergroting'); // FF
        this.imageContainer.setAttribute('title', 'Klik voor vergroting'); // IE
        
        this.thumbContainer = document.createElement('div');
        this.thumbContainer.className = 'portfThumbs';
        this.thumbContainer.setAttribute('id','portfThumbs');
        
        this.pImagesDesc = document.createElement('div');
        this.pImagesDesc.setAttribute('id', 'pDescription');
        this.pImagesDesc.style.cssText = 'display:none;'
        this.pImagesDesc.className = 'portfDesc';
        
        this.pImagesDescP = document.createElement('p');
        this.pImagesDescP.innerHTML = this.entryArr[4];
        
        this.pImagesDesc.appendChild(this.pImagesDescP);
        
        this.pImagesInfo = document.createElement('img');
        this.pImagesInfo.setAttribute('id', 'pInformation');
        this.pImagesInfo.setAttribute('alt', 'Klik voor informatie');
        this.pImagesInfo.setAttribute('title', 'Klik voor informatie');
        this.pImagesInfo.className = 'pImagesInfo';
        this.pImagesInfo.setAttribute('src', 'backbase/images/layout/temp_information_icon.png');
        
        this.imageDivCont.appendChild(this.imageContainer);
        this.imageDivCont.appendChild(this.pImagesDesc);
        this.pBlock.appendChild(this.imageDivCont);
        this.pBlock.appendChild(this.pImagesInfo);
        this.pBlock.appendChild(this.thumbContainer);
        
        if(this.pEntryImages.length >= 1) {
            for(var i = 0; i < this.pEntryImages.length; i++) {
                this.imageContainer.setAttribute('src', this.pEntryImages[0]);
            }  
            
            for(var i = 0; i < this.pEntryImages.length; i++) {
                if(this.pEntryImages[i] != "") {
                    this.imageThumbs = document.createElement('img');
                    this.imageThumbs.setAttribute('id', 'pEntryThumb_' + i);
                    this.imageThumbs.className = 'pEntryThumbs';
                    this.imageThumbs.setAttribute('src', this.pEntryImages[i]);   
                    
                    this.thumbContainer.appendChild(this.imageThumbs);
                }
            }
        }
        
        this.imageDivCont.style.cssText = 'height:' + this.imageContainer.getHeight() + 'px;';
        
        setTimeout("Element.hide('mLoading');", 500);
        
        Event.observe(this.pImagesInfo, 'click', this.showInfo.bind(this), false);
        this.observeImages();
    },
    
    showInfo: function() {
        this.evnt = this.pImagesDesc;
        if (this.evnt.style.display == 'none') {
            new Effect.BlindDown(this.evnt, {duration: 0.5});
        } else {
            new Effect.BlindUp(this.evnt, {duration: 0.5});
        }
    },
    
    observeImages: function() {
        this.pBlock = $('portfThumbs');
                                                                               
        if(this.pBlock.hasChildNodes()) {
            for (var i = 0; i < this.pBlock.childNodes.length; i++) {               
                if(this.pBlock.childNodes[i].tagName == 'IMG') {
                    if(this.pBlock.childNodes[i].className == 'pEntryThumbs') {
                        Event.observe(this.pBlock.childNodes[i], 'click', this.changeImage.bind(this), false);
                    }
                } 
            }
        }
    },
    
    changeImage: function(evnt) {
        this.evnt = evnt
        this.pImage = Event.element(this.evnt).src;
        
        if(this.pImage != this.imageContainer.src) {
            this.imageDivCont.style.cssText = 'height:' + this.imageContainer.getHeight() + 'px;';
                    
            new Effect.Fade(this.imageContainer, 
                { duration: 0.5, 
                  afterFinish: function() {
                    this.imageContainer.src = this.pImage;
                    new Effect.Appear(this.imageContainer, {duration: 0.5});
                  }.bind(this)
                });
        }
    }
}