var domain = "http://www.maikelkersbergen.nl/"
var divider;
var activeItem=-1;
var totalItems=0;
var loadedItems = [];
var transitioning = 0; 

function loadRandomGraphic(item){
	if (item.substring(item.lastIndexOf('.') + 1) == 'swf') {
        new Swiff(
			domain+'images/'+item, 
			{
				id:'dividerGraphic', 
				container:$('randomgraphic'), 
				width:820, 
				height:165,
				events: {
	        		onLoad: function() {

	        		}
	    		}				 
			}
		);		
	} else {
		divider = new Asset.image(domain+'images/'+item, { id:'dividerGraphic' });
		divider.inject('randomgraphic')		
	}
}

function preloadItems(dir, items){
    if(items.length == 0) return;
	
	var gallery = $('gallery');       
    var loadedItem = '', index=loadedItems.length, item=items[index];
	
	totalItems=items.length;
                     
    if(item[0].substring(item[0].lastIndexOf('.')+1) != 'swf') {
		new Asset.image(
			dir+item[0], 
			{
				id:'imageItem',
				title: 'image '+index, 
				width:item[1], 
				height:item[2], 
				onload: function(){
					addItem(this, dir, items);
				} 
			}
		);
    } else {
        gallery.setHTML(gallery.innerHTML + '<div class="hide" id="flashContainer'+index+'"></div>');
        var flashItem = new Swiff(
			dir+item[0], 
			{
				id:'flashItem'+index, 
				container:$('flashContainer'+index), 
				width:item[1], 
				height:item[2],
				events: {
	        		onLoad: function() {
						alert('x');
	        		}
	    		}				 
			}
		);
		addItem(flashItem, dir, items);		
    }	
}

function addItem(item, dir, items){
	loadedItems.push(item);
	updateProgress();						
	
	if (loadedItems.length < totalItems) {
		preloadItems(dir, items)
	}
	else {
	    $('progress').setStyle('display', 'none');
	    resize(0);					
	}	
}

function updateProgress(){
	var progress = $('progress');
	var bar = $E('#progress .bar');
	var index=loadedItems.length-1;    	
	var percent = ((index+1) * progress.getStyle('width').toInt()) / totalItems;
		
	bar.setStyle('width', percent).setHTML('&nbsp;&nbsp;' + (index+1) + ' of ' + totalItems + ' items loaded');
	
	itemlink = new Element('a', {
	    'id': 'itemLink'+parseInt(index),
	    'events': {
	        'click': function(){
	            resize(index);
	            return false;
	        }
	    },
	    'href': '#'
	});
	
	itemlink.setText(index+1);
	itemlink.injectInside('picturelinks');		
}


function resize(itemid){
    if(transitioning || activeItem == itemid) return false;      
    
    if(activeItem!=-1) $('itemLink'+activeItem).removeClass('active');
    $('itemLink'+itemid).addClass('active');
    
    var divResize = new Fx.Morph('projectpic', {duration: 500, transition: Fx.Transitions.Quad.easeOut});
    var innerDivResize = new Fx.Morph('inner', {duration: 500, transition: Fx.Transitions.Quad.easeOut});
    transitioning = 1;
          
    if($('imageItem') != null) {
        $('imageItem').remove();
    } else if(activeItem!=-1 && loadedItems[activeItem].type != undefined) {
        $('flashContainer'+activeItem).toggleClass('hide');
    }
	
	if(activeItem!=-1 && loadedItems[itemid].width == loadedItems[activeItem].width && loadedItems[itemid].height == loadedItems[activeItem].height){
		replaceActiveItem(itemid);
		return;
	} else if(activeItem!=-1 && (loadedItems[itemid].width == loadedItems[activeItem].width || loadedItems[itemid].height == loadedItems[activeItem].height)){
		if(loadedItems[itemid].width == loadedItems[activeItem].width) {
		    innerDivResize.start({'height': parseInt(loadedItems[itemid].height)+18}).chain(
				function(){
					replaceActiveItem(itemid);					
				}
            );			
		} else {
	        divResize.start({'width': parseInt(loadedItems[itemid].width)+18}).chain(
				function(){
					replaceActiveItem(itemid);					
				}
	        );				
		}
	} else {
	    innerDivResize.start({'height': parseInt(loadedItems[itemid].height)+18}).chain(
	        function(){
	            divResize.start({'width': parseInt(loadedItems[itemid].width)+18}).chain(
					function(){
						replaceActiveItem(itemid);					
					}
	            );
	        }
	    );		
	}
   
}

function replaceActiveItem(itemid){
    if(loadedItems[itemid].type != undefined){
        $('flashContainer'+itemid).toggleClass('hide');
    } else {
        loadedItems[itemid].inject('gallery');                    
    }
    activeItem = itemid;
    transitioning = 0;  	
}