var jsonObj     = {"images":[{"name":"facebookbutton.png","type":"static ","left":"349","top":"6","zindex":"42"},{"name":"atlasflyer.jpg","type":"image","left":"177","top":"579","zindex":"auto","width":593,"height":589},{"name":"baderbeasts.png","type":"image","left":"396","top":"457","zindex":"auto","width":845,"height":489},{"name":"burgerman.jpg","type":"image","left":"786","top":"517","zindex":"auto","width":596,"height":597},{"name":"ByeNana_SMITH.jpg","type":"image","left":"922","top":"295","zindex":"auto","width":608,"height":851},{"name":"CharcoalMe.jpg","type":"image","left":"686","top":"237","zindex":"auto","width":465,"height":650},{"name":"CookieMan1.jpg","type":"image","left":"291","top":"352","zindex":"auto","width":534,"height":505},{"name":"danielcraig.jpg","type":"image","left":"307","top":"590","zindex":"auto","width":318,"height":487},{"name":"DCraigCardboard.png","type":"image","left":"388","top":"552","zindex":"auto","width":617,"height":440},{"name":"FeatherMaskWeb.jpg","type":"image","left":"649","top":"612","zindex":"auto","width":354,"height":633},{"name":"FuckYou.png","type":"image","left":"225","top":"447","zindex":"auto","width":879,"height":731},{"name":"getburnt.jpg","type":"image","left":"184","top":"354","zindex":"auto","width":576,"height":454},{"name":"GharProg.jpg","type":"image","left":"394","top":"232","zindex":"auto","width":860,"height":1276},{"name":"GloopyGuySmall.jpg","type":"image","left":"540","top":"102","zindex":"auto","width":603,"height":581},{"name":"HarryWeb&Sig.jpg","type":"image","left":"897","top":"79","zindex":"auto","width":524,"height":570},{"name":"healthspa.jpg","type":"image","left":"33","top":"362","zindex":"auto","width":858,"height":450},{"name":"MaxGreene.jpg","type":"image","left":"655","top":"494","zindex":"auto","width":663,"height":591},{"name":"melodymixcovercrop.jpg","type":"image","left":"924","top":"186","zindex":"auto","width":550,"height":537},{"name":"mossboss.jpg","type":"image","left":"654","top":"78","zindex":"auto","width":576,"height":833},{"name":"nutmenalone.jpg","type":"image","left":"522","top":"617","zindex":"auto","width":537,"height":589},{"name":"pekarhead.jpg","type":"image","left":"668","top":"372","zindex":"auto","width":600,"height":611},{"name":"Picture 4.png","type":"image","left":"774","top":"181","zindex":"auto","width":816,"height":612},{"name":"Picture 5.png","type":"image","left":"423","top":"83","zindex":"auto","width":611,"height":833},{"name":"PowersWeb&Sig.jpg","type":"image","left":"312","top":"88","zindex":"auto","width":536,"height":536},{"name":"PrismaTransitions.jpg","type":"image","left":"535","top":"523","zindex":"auto","width":551,"height":478},{"name":"riotcontrol.png","type":"image","left":"546","top":"374","zindex":"auto","width":637,"height":811},{"name":"shoe-fish.jpg","type":"image","left":"745","top":"631","zindex":"auto","width":453,"height":540},{"name":"sludgenotes.png","type":"image","left":"84","top":"203","zindex":"auto","width":623,"height":816},{"name":"SmithPropecia.jpg","type":"image","left":"911","top":"446","zindex":"auto","width":557,"height":824},{"name":"TgelDoodle.png","type":"image","left":"141","top":"72","zindex":"auto","width":1011,"height":710},{"name":"TrainspottingWeb&Sig.jpg","type":"image","left":"773","top":"83","zindex":"auto","width":650,"height":506},{"name":"Transitions.png","type":"image","left":"548","top":"222","zindex":"auto","width":765,"height":823},{"name":"tribunalmen.jpg","type":"image","left":"402","top":"640","zindex":"auto","width":530,"height":465},{"name":"VISCERAL.png","type":"image","left":"781","top":"302","zindex":"auto","width":752,"height":1273},{"name":"WatercolorPage1small.jpg","type":"image","left":"201","top":"201","zindex":"auto","width":1114,"height":834},{"name":"waveorgan.png","type":"image","left":"840","top":"629","zindex":"auto","width":567,"height":522},{"name":"blog.png","type":"static ","left":"561","top":"5","zindex":"auto"},{"name":"newCOntact.png","type":"static ","left":"18","top":"11","zindex":"auto"},{"name":"newcopyright.png","type":"static ","left":"14","top":"683","zindex":"auto"},{"name":"newgmail2.png","type":"static ","left":"147","top":"10","zindex":"auto"},{"name":"pedalboxLittle.jpg","type":"static ","left":"77","top":"464","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 : 500,
        transition : Fx.Transitions.Cubic.easeInOut
    }).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 : 0,
        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: 0,
        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 : 0,
        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);
}