window.addEvent('domready', function() {
    images = new Array();
    var verso = false;
    var thumbs = $$('div.thumb');
    thumbs.each(function (el) {
            el = el.getElement('img');
            images.push(base_url + 'images/portfolio/' + type + '/' + el.getProperty('alt')); 
	});
    
    new Asset.images(images, {
                onComplete: function(){
                    //console.log('loaded');
                }
            });
    
    
    thumbs.addEvent('click', imageShow);
    thumbs[0].fireEvent('click');

    function imageShow(event) {
        
        element = this.getElement('img');
	
        src = base_url + 'images/portfolio/' + type + '/' + element.getProperty('alt');
        src2 = base_url + 'images/portfolio/' + type + '/Verso/' + element.getProperty('alt');
        
        var img = new Asset.image(src2, {
                    onload: function() {
                        if (this.getProperty('width') != 0) showNav();
                        else hideNav();
                    },
                    onerror: function() {hideNav();}
                });
            
        $('previewImg').setProperty('src', src);  
	var jsonRequest = new Request.JSON({
	    url: base_url + "index.php/Portfolio/getParams/" + type + '/' + element.getProperty('title'),
	    onComplete: function(infos){
		var link = "javascript:void(0);";
		var description = "";
		if (infos) {
		    link = typeof(infos.link) == 'object'?'':infos.link;
		    description = typeof(infos.description) == 'object'?'':infos.description;
		   
		}
		$('linkUrl').href = link;
		if (infos && infos.link) $('linkUrl').title = 'Aller sur "' + link + '"';
		else $('linkUrl').title = "";
		
		$('description').destroy();
		var div = new Element('div', {id: 'description'});
		div.addClass('description');
		div.set('html', description);
		div.inject('thumbsTitle', 'after');
	    }
	}).get();
	if (Browser.Engine.trident && Browser.Engine.version < 7) PngFixImg();
    }
   
    function showNav(){
        if (!$('left')) {
            var tdLeft = new Element('td', {
                'id': 'tdLeft'
            }).inject($('previewImg').getParent('tr'), 'top');
            var myAnchorLeft = new Element('a', {
                'href': '#',
                'id': 'left',
                'class': 'myClass',
                'html': '<img src="' + base_url + 'images/portfolio/left.gif" />',
                'events': {
                    'click': function() {showVerso();}
                }
            }).inject($('tdLeft'));
        }
        if (!$('right')) {
            var tdRight = new Element('td', {
                'id': 'tdRight'
            }).inject($('previewImg').getParent('tr'), 'bottom');
            var myAnchorRight = new Element('a', {
                'href': '#',
                'id': 'right',
                'class': 'myClass',
                'html': '<img src="' + base_url + 'images/portfolio/right.gif" />',
                'events': {
                    'click': function() {showVerso();}
                }
            }).inject($('tdRight'));
        }
    }
    
    function hideNav() {
        if ($('tdLeft')) {
            $('tdLeft').destroy();
        }
        if ($('tdRight')) {
            $('tdRight').destroy();
        }
    }
    
    function showVerso(){
        if(!verso) {
            $('previewImg').setProperty('src', src2);
            verso = true;
        } else {
            $('previewImg').setProperty('src', src);
            verso = false;
        }
    }
});