var jsonObj     = {"images":[{"name":"FuckYou.png","type":"image","left":"631","top":"451","zindex":"157","width":879,"height":731},{"name":"Kirbyish.jpg","type":"image","left":"114","top":"415","zindex":"177","width":683,"height":870},{"name":"sludgenotes.png","type":"image","left":"526","top":"478","zindex":"172","width":623,"height":816},{"name":"GetDownRipeVessel.jpg","type":"image","left":"631","top":"366","zindex":"167","width":520,"height":480},{"name":"VISCERAL.png","type":"image","left":"229","top":"414","zindex":"75","width":752,"height":1273},{"name":"atlasflyer.jpg","type":"image","left":"98","top":"314","zindex":"auto","width":593,"height":589},{"name":"baderbeasts.png","type":"image","left":"637","top":"284","zindex":"auto","width":845,"height":489},{"name":"CardboardTrio.png","type":"image","left":"478","top":"117","zindex":"auto","width":706,"height":451},{"name":"CharcoalMe.jpg","type":"image","left":"211","top":"190","zindex":"auto","width":465,"height":650},{"name":"danielcraig.jpg","type":"image","left":"717","top":"365","zindex":"auto","width":318,"height":487},{"name":"DCraigCardboard.png","type":"image","left":"589","top":"130","zindex":"auto","width":617,"height":440},{"name":"FeatherGlider.png","type":"image","left":"514","top":"425","zindex":"auto","width":695,"height":289},{"name":"FeatherMaskWeb.jpg","type":"image","left":"723","top":"194","zindex":"auto","width":354,"height":633},{"name":"getburnt.jpg","type":"image","left":"115","top":"232","zindex":"auto","width":576,"height":454},{"name":"GharProg.jpg","type":"image","left":"366","top":"280","zindex":"131","width":860,"height":1276},{"name":"healthspa.jpg","type":"image","left":"583","top":"206","zindex":"auto","width":858,"height":450},{"name":"MaxGreene.jpg","type":"image","left":"296","top":"102","zindex":"65","width":663,"height":591},{"name":"nutking.jpg","type":"image","left":"360","top":"490","zindex":"auto","width":425,"height":640},{"name":"nutmenalone.jpg","type":"image","left":"437","top":"486","zindex":"85","width":537,"height":589},{"name":"PrismaTransitions.jpg","type":"image","left":"290","top":"200","zindex":"60","width":551,"height":478},{"name":"riotcontrol.png","type":"image","left":"773","top":"301","zindex":"auto","width":637,"height":811},{"name":"shoe-fish.jpg","type":"image","left":"402","top":"115","zindex":"auto","width":453,"height":540},{"name":"TgelDoodle.png","type":"image","left":"205","top":"295","zindex":"auto","width":1011,"height":710},{"name":"Transitions.png","type":"image","left":"509","top":"287","zindex":"auto","width":765,"height":823},{"name":"tribunalmen.jpg","type":"image","left":"381","top":"203","zindex":"auto","width":530,"height":465},{"name":"waveorgan.png","type":"image","left":"484","top":"193","zindex":"auto","width":567,"height":522},{"name":"newCOntact.png","type":"static ","left":"5","top":"2","zindex":"auto"},{"name":"newcopyright.png","type":"static ","left":"12","top":"593","zindex":"auto"},{"name":"newgmail2.png","type":"static ","left":"133","top":"1","zindex":"auto"},{"name":"newmyspace.png","type":"static ","left":"338","top":"1","zindex":"auto"}]};
var IMG_ROOT    = 'images/';
var STATIC_ROOT = 'static/';
var THUMB_ROOT  = 'thumbs/';

var A = false;



var backgroundOpacity = 0.7;

var bgFader = null;

var selectedObj = null;

var embiggening = false;
var debiggening = false;
var viewing     = false;
var dragging    = false;

var oldLeft = null;
var oldTop  = null;

var zindex = 0;

var loader;

window.addEvent('domready', function() 
{   	
	// make draggable
	
	var draggable = A ? '#images li' : '#images li.image' ;
	
	$$(draggable).makeDraggable({
        onStart: function() {
            dragging = false;
        },
        onDrag: function() {
            dragging = true;
        },
        onComplete: function () {
            dragging = false;
        }
    });


    bgFader = new Element('div', {
    'styles': {
        'background' : $E('body').getStyle('background-color'),
        'position'   : 'absolute',
        'width'      : window.getWidth(),
        'height'     : window.getHeight(),
        'top'        : 0,
        'left'       : 0,
        'opacity'    : 0,
        'display'    : 'none'
    }}).setProperty('id', 'bgFader').addEvent('click', 
        function () { 
            debiggen(selectedObj);
        }
    ).injectInside($E('body'));

    zindex = jsonObj.images.length;
    
    
    
    // enlarge selected from URL    
    var selImg = location+"";
    selImg = selImg.split("#");
    if(selImg[1]) {
		if($(selImg[1]).getProperty('class') == 'image')
    	{
        	init($(selImg[1]));
       		embiggen($(selImg[1]));
        }
    }
    
    
	loader = new Element('img');
	loader.src = "i/loader.gif";
	loader.setStyles({
		'position':'absolute',
		'display' : 'none',
		'z-index' : 6000,
		'left' : Number(window.getWidth() / 2),
		'top' : Number(window.getHeight() / 2)
	});
	//loader.inject($E('body'));




});


function init(obj)
{
    selectedObj = obj;
    zindex++;
    $(selectedObj).setStyle('z-index', zindex);
}


function select(obj)
{
    if (embiggening || debiggening) return;
    init(obj);
    if(dragging) return;
    if(viewing) {
        if(obj == enlargedObj) {
            debiggen(enlargedObj);
        }
        else {
            debiggen(enlargedObj);
            embiggen(obj);
        }
    }   
    else {
        embiggen(obj);
    }
}


function getObjFromJson(obj)
{

	var imageObj = null;
	for(var i = 0; i < jsonObj.images.length; i++)
	{
		if(jsonObj.images[i].name == obj.id) {
			imageObj = jsonObj.images[i];
			break;
		}
	}
	
	return imageObj;

}


function embiggen(obj) 
{       
    embiggening = true;
    viewing     = true;
    dragging    = false;
    enlargedObj = obj;
    enlargedID  = obj.id; 

    var o = $(obj);
    oldLeft    = o.getLeft();
    oldTop     = o.getTop();    

    var img = o.getElements('img');    
    img = $(img[0]);
    
   // img.setStyle('opacity', .4);
    
	var loaded = false;
    
    img.addEvent('load', function(){
		loader.setStyle('display' , 'none');
		loaded = true;

	});    
	
	
    // set source to actual image
    img.src = IMG_ROOT + obj.id;
    

	var imageObj = getObjFromJson(obj);
    

	

    o.effects({
        duration : 400,
        transition : Fx.Transitions.Cubic.easeOut
    }).start({
        'left':    [o.getLeft(), Number((window.getWidth() /  2) - imageObj.width/2).toInt()],
        'top':     [o.getTop(), ((window.getHeight() / 2) - imageObj.height/2 >= 0 ? Number((window.getHeight() / 2) - imageObj.height/2).toInt() : 30)],
        'width':   [o.getSize().size.x.toInt(),   imageObj.width],
        'height':  [o.getSize().size.y.toInt(),  imageObj.height]
    }).addEvent('onComplete', function() {
        embiggening = false;
        enlargedObj = obj;
        enlargedID  = obj.id;
        if(!loaded) {
		 loader.setStyle('display','block');
		}
    });

    zindex++;
    
    o.setStyle('z-index', zindex);
    
    bgFader.setStyle('display', 'block');
    bgFader.setStyle('z-index', zindex-1);
    
    
    bgFader.effects({
        duration : 400,
        transition : Fx.Transitions.Cubic.easeOut
    }).start({
        'opacity' : backgroundOpacity
    });

}


function debiggen(obj) 
{   
    debiggening = true;
    viewing     = false;
    dragging    = false;
    enlargedObj = null;
    
    var imageObj = getObjFromJson(obj);
    
    $(obj).effects({
        duration: 400,
        transition: Fx.Transitions.Cubic.easeOut
    }).start({
        'padding': [$(obj).getStyle('padding').toInt(), 0],         
        'left':    [$(obj).getStyle('left').toInt(),    oldLeft],
        'top':     [$(obj).getStyle('top').toInt(),     oldTop],
        'width':   [$(obj).getStyle('width').toInt(),   Number(imageObj.width * 0.15).toInt()],
        'height':  [$(obj).getStyle('height').toInt(),  Number(imageObj.height * 0.15).toInt()]
    }).addEvent('onComplete', function(){   
        debiggening = false;
    });
    
    bgFader.effects({
        duration : 400,
        transition : Fx.Transitions.Cubic.easeOut
    }).start({
        'opacity' : 0.0
    }); 
}


function setPositions()
{
    var urlStr = "i/functions.php?action=createJson";
    
    var count = 1;
    
    $$('#images li').each(function(li) {
    	var name = escape(li.getProperty('id'));
    	var type = li.getProperty('class');
    	var x    = li.getLeft();
    	var y    = li.getTop();
    	var z    = li.getStyle('z-index');
    	urlStr  += "&" + count + "=" + name + "," + type + "," + x + "," + y + "," + z;
    	count++;
    } );
    
//    console.log('sending: ' + urlStr);
    _do(urlStr);
}


function _do(url) 
{
    var jsel  = document.createElement('SCRIPT');
    jsel.type = 'text/javascript';
    jsel.src  = url;
    document.body.appendChild (jsel);
}