var FotoScrambler = function(){
	var cntCoord= null;
	var container;
	var shapes	=	[];
	var imgCrd	=	[];	
	var offShp	=	[];	
	var images	=	[];
	var maps		=	[];
	var imagesCount = 0;	
	var animLeft=	0;
	var animDuration = 300;
	
	var lastSel		= -1;
	var lastSelZi = 0;
	var dragged		=	null;
	var lastDragPt=	{x:0,y:0};
	var offset;
	
	
	function convertShape(map) {
		var s		=	[];
		var c		= $(map).getFirst().coords.split(',');
		var cl	= c.length;
		for(var j = 0, k = 0; j < cl; j+=2, k++){
			s[k] = {x: parseInt(c[j]), y: parseInt(c[j+1])} ;
		}	
		return s;		
	}
	
	function initImage(img, index){
				
		var img1 = $(img);
		
		//fix ie PNG support
		fixPNG(img1);
		
		
		img1 = $(img);
		
		img1.setStyles({
				'position':	'absolute'
			,	'z-index'	:	100 + index
			,	left			:	0
			,	top				:	0
		});
		
		
		
		
	}
	
	function initAnimation(img, index){
		
		img = $(img);
		
		var xx = index % 2 * 170;
		var yy = (Math.floor(index/2) * 100) - 50;
		var pt =	{	
				x: (Math.random() * 100) +  xx
			, y: (Math.random() * 25) +  yy 
		}
		
				
		setTimeout( function(img, pt){								
			//img.setStyle('display','block');		
			var pts = img.getPosition();
			var myEffects = new Fx.Styles(img, {duration: animDuration});				
			myEffects.addEvent('onComplete', checkAnimationEnd );	
			myEffects.start({
					'left': [pts.x-cntCoord.x,pt.x]
				,	'top':	[pts.y-cntCoord.y,pt.y]
			});			
		}.pass([img, pt], this), 100 * index );
	}
	
	
	function updateValues(){
		cntCoord	=	container.getPosition();
		for(var i = 0; i < imagesCount; i++){
			calculateShapeOffset(i);			
		}
	}
	
	
	function calculateShapeOffset(index){
		var shape			=	shapes[index];
		var	shapeLen	=	shape.length;
		var imageCoord=	$(images[index]).getPosition();
		imgCrd[index] = imageCoord;
		offShp[index] = [];
		for(var j =0; j<shapeLen; j++){
			var vertex = shape[j];
			offShp[index][j] = {
					x: vertex.x + imageCoord.x
				, y: vertex.y + imageCoord.y 
			};
		}
	}
	
	function checkAnimationEnd(){		
		if((--animLeft)==0){
			updateValues();
			initEvents();			
		}		
	}
	
	
	
	function updateCoords(img){
		var c = shapes[lastSel];
		var cl=	c.length;
		var pt= img.getPosition();
		for(var j =0; j<cl; j++){
			var c1 = c[j];
			offShp[lastSel][j] = {x: c1.x + pt.x, y: c1.y + pt.y};
		}
	}
	
	
	function initEvents(){
		document.addEvent( 'mousedown', onMouseDown );
		document.addEvent( 'mouseup', onMouseUp );
		document.addEvent( 'mousemove', onMouseMove);
		window.addEvent( 'resize', function(){
			updateValues();
		});
	}
	
	
	
	function onMouseDown(evt){					
		var e = new Event(evt);
		e.stop();
		e.stopPropagation();
	
		
		var found = [];
		for(var i =0; i<imagesCount; i++){
			var c = isInArea (offShp[i], e.page.x, e.page.y);
			if(c == 1){
				found[found.length] = i;
			}
		}
		
		var l			= found.length;
		var sel		=	0;
		var maxZi	=	0;
		if(l>0){
			for(i = 0; i< l; i++){
				var img = $('foto' + (found[i]+1))						
				var zI	= img.getStyle('z-index');
				if(zI>maxZi){
					sel		= found[i];
					maxZi = zI;
				}
			}
			
			if(lastSel!= -1){
				var img =  $('foto' + (lastSel+1))
				img.setStyle('z-index', lastSelZi );						
			}
			
			var img = $('foto' + (sel+1))	
			
			lastSelZi = img.getStyle('z-index');
			lastSel		=	sel;
			
			img.setStyle('z-index', 200);
			
			var pt =	img.getPosition();
			
			offset = {
					x: e.page.x - ( pt.x)
				,	y: e.page.y - ( pt.y)
			}
			
			lastDragPt = {
					x: e.page.x
				,	y: e.page.y
			}
						
			dragged = img;
			
			
			
			
		}
	}
	
	
	function onMouseUp(evt){
		var e = new Event(evt);
		if(dragged) {
			updateCoords(dragged);
			if(Math.abs(lastDragPt.x-e.page.x)<2 && Math.abs(lastDragPt.y-e.page.y)<2)
				Lightbox.show(dragged.src.replace('png','jpg'), '');				
			$(dragged).setStyle('cursor','pointer');
		}
		
		dragged = null;
		
	}
	
	function onMouseMove(evt){
				
		if(!dragged)
			return;
		
		var e = new Event(evt);
		dragged.setStyles({
				left	: e.page.x - offset.x - cntCoord.x
			,	top		:	e.page.y - offset.y - cntCoord.y
			,	cursor:	'move'
		});
		
	}
	
	
	
	return {
		
		init: function(config){
			container	=	$(config.container);
			cntCoord	=	container.getPosition();
			images		=	config.images;	
			maps			=	config.maps;
			imagesCount	=	 images.length;
			
			container.setStyle('visibility', 'visible')
			
			if(maps.length!= images.length){
				
				return;
				
			} else {
				var count = images.length;
				animLeft	=	count;
				for(var i = 0; i < count; i++){
					//convert shape format from map
					shapes[i] = convertShape(maps[i]);
					
					//init image
					initImage(images[i], i);
					
					//init animation
					initAnimation(images[i], i);																 
					
				}
				
			}			
		}		
	}
}();



//window.addEvent('onready', function(){
//	//$('section-body').setStyle('display', 'none');
//});


window.addEvent(
		'load'
	,	FotoScrambler.init.pass({
				container	: 'section-body'
			,	images		:	['foto1', 'foto2', 'foto3', 'foto4', 'foto5', 'foto6','foto7','foto8']
			,	maps			:	['map1', 'map2' ,'map3' ,'map4' ,'map5' ,'map6', 'map7','map8']
		})
);



var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage) 
{
		if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
		{
			var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
		 var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
		 var imgTitle = (myImage.title) ? 
								 "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
		 var imgStyle = "display:inline-block;" + myImage.style.cssText
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
									+ " style=\"" + "width:" + myImage.width 
									+ "px; height:" + myImage.height 
									+ "px;" + imgStyle + ";"
									+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
									+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"				 
		 var src = myImage.src;
		 myImage.outerHTML = strNewHTML;
		 $(myImage.id).src = src;
		}
}



/**
 * converted form: http://local.wasp.uwa.edu.au/~pbourke/geometry/insidepoly/
 */
function isInArea(pt, x, y) {
  var i, j, c = 0, npol = pt.length;      
  
  for (i = 0, j = npol-1; i < npol; j = i++) {
    if ((((pt[i].y <= y) && (y < pt[j].y)) ||
         ((pt[j].y <= y) && (y < pt[i].y))) &&
        (x < (pt[j].x - pt[i].x) * (y - pt[i].y) / (pt[j].y - pt[i].y) + pt[i].x))
      c = !c;
  }
  return c;
}