var photosy = new Class( {
		
		options: {
			list: new Array(),
			area: null,
			width: 0,
			height: 0,
			'class': 'photo_arrow',
			onFocus: Class.empty,
			onBlur: Class.empty
		},
		
		initialize: function () {
			this.photo = false;
		},
		
		load: function ( options ) {
			this.setOptions( options );
			this.place();
		},
		
		place: function () {
			for( var i=0; i<this.options.list.length; i++ )
				this.options.list[i].push( new Element( 'div' ).addClass( this.options['class'] ).setStyles( { 'top': this.options.list[i][2] - 10 + 'px', 'left': this.options.list[i][1] - 10 + 'px' } ).injectInside( $(this.options.area) ) );
		},
		
		update: function ( x, y ) {
			//$('debb').innerHTML = x + ' , ' + y + '<br />';
			//$('debb').innerHTML = this.options.width + ' , ' + this.options.height + '<br />';
			var distance = false;
			var photo = false;
			var p1 = x + this.options.width / 2;
			var p2 = y + this.options.height / 2;
			for( var i=0; i<this.options.list.length; i++ ) {
				//$('debb').innerHTML += x + ' , ' + y + '<br />';
				if( this.options.list[i][1] >= x && this.options.list[i][2] >= y && this.options.list[i][1] <= this.options.width + x && this.options.list[i][2] <= this.options.height + y ) {
					var d1 = p1 - this.options.list[i][1];
					var d2 = p2 - this.options.list[i][2];
					var d = Math.sqrt( d1 * d1 + d2 * d2 );
					if( distance === false || distance > d ) {
						distance = d;
						photo = i;
					}
				}
			}
			if( photo !== false && this.photo != photo ) {
				if( this.photo !== false )
					this.fireEvent( 'onBlur', [ this.options.list[ this.photo ] ] );
				this.photo = photo;
				this.fireEvent( 'onFocus', [ this.options.list[ photo ] ] );
			}
		}
		
} );

photosy.implement( new Events );
photosy.implement( new Options );

window.showOverlay = true;

var pictures = [
	['DSC_0010',1392,777, 7],
	['DSC_0011',1339,794, 1],
	['DSC_0013',1256,675, 1],
	['DSC_0016',904,674, 2],
	['DSC_0018',619,869, 4],
	['DSC_0019',632,833, 3],
	['DSC_0021',901,1014, 5],
	['DSC_0024',1314,1037, 8],
	['DSC_0035',1853,112, 6],
	['DSC_0037',1530,240, 5],
	['DSC_0041',1639,436, 7],
	['DSC_0048',1450,325, 7],
	['DSC_0050',1402,389, 5],
	['DSC_0057',1198,481, 5],
	['DSC_0061',1232,500, 7],
	['DSC_0063',1350,517, 4],
	['DSC_0067',1210,755, 7],
	['DSC_0080',1400,151, 6],
	//['DSC_0081',1565,57, 6],
	//['DSC_0083',1080,129, 6],
	['DSC_0087',1085,245, 6],
	['DSC_0088',1083,207, 4],
	['DSC_0091',766,231, 3],
	['DSC_0094',453,244, 4],
	['DSC_0097',131,407, 3],
	['DSC_0099',249,546, 4],
	['DSC_0103',301,652, 4],
	['DSC_0105',455,732, 5],
	['DSC_0116',900,617, 2],
	['DSC_0120',1180,549, 4],
	['DSC_0122',1250,437, 1],
	['DSC_0131',849,908, 1],
	['DSC_0134',1684,1043, 2],
	['DSC_0138',1498,441, 6]
];

window.addEvent( 'domready', function () {
	new Asset.images(['images/garden.jpg','images/mini_garden.jpg'],
		{ onComplete: function () {
				$('mapOverlay').setStyle('display','none');
				$('mapOverlayBG').setStyle('display','none');
				window.showOverlay = false;
			} }
	);
} );

window.addEvent( 'load', function () {
	var tt = new photosy();
	
	var t = new ScrollWindow(
		'mapMainContent',
		'mapArea',
		'mapContent',
		[
			['mapBar', 'maper', ['x','y']]
		],
		new Array(),
		10,
		{ onMove: tt.update.bind( tt ) }
	);
	
	tt.load( {
			list: pictures,
			area: $('mapContent'),
			'class': 'photo_arrow',
			'class_active': 'photo_arrow_active',
			width: 395,
			height: 407,
			onFocus: function ( el ) {
				$('garden_photo_img').src = 'images/garden/small/' + el[0] + '.jpg';
				el[4].removeClass( this.options['class'] );
				el[4].addClass( this.options['class_active'] );
				el[4].addClass( this.options['class_active'] + '_' + el[3] );
				$('garden_photo_link').setProperty( 'href', 'images/garden/big/' + el[0] + '.jpg' );
			},
			onBlur: function ( el ) {
				el[4].removeClass( this.options['class_active'] );
				el[4].removeClass( this.options['class_active'] + '_' + el[3] );
				el[4].addClass( this.options['class'] );
			}
		} );
	
	$('maper').setOpacity( 0.6 );
	t.scrollTo( 800, 0 );
} );