/**
 *  find('name="#'+room+'"')
 */

	var bigW = 750;
	var bigH = 500;
	var smW = 180;
	var smH = 120;
	var smW2 = 90;
	var smH2 = 60;


	var $selectedArea = -1;
	var $valPrev = '';
	var $prevMap = '';


$(document).ready(function() {
	$('#mapimage').maphilight();
//	doit();
	$('#mapdescription').show();
/*
	$(window).resize(function(){
		$('#toptext').text( $('#top').width() + "<br />" + $('#middle').width() );
	});
*/
	$('.photo_container ul li img').click(function(){
		showOnePhoto( $(this).parents('div.photo_container').attr('data-index'), $(this).attr('data-img-index') );
	});

	$('area').click(function(el){ selectArea( $(this) ); return false; });
//	$('#toptext').text( $(window).width() + "<br />" + $('#middle').width() );
	if ( $(window).width() > 1000 )
	{
		$('#rightcolumn').show();
	}
});

function selectArea( areaEl )
{
	var $areaIndex = $(areaEl).data('img-index');

	tmpVal = $(areaEl).data('maphilight');

	if ( $prevMap != '' )
	{
		if ( $valPrev != '' )
		{
			$prevMap.data('maphilight', $valPrev);
		}
	}

	if ( $selectedArea == $areaIndex )
	{
		showPhoto( $(areaEl), undefined );
		return false;
	}
	else
	{
		$selectedArea = $areaIndex;

		if ( $valPrev != '' )
			$prevMap.data('maphilight', $valPrev);

		$valPrev = $(areaEl).data('maphilight');

		yellow = {
			"alwaysOn":true,
			"fillColor":"FF00FF",
			"shadow":true,
			"shadowBackground":"ffffff",
			"stroke": true,
			"strokeColor": "000000",
			"strokeOpacity": 1,
			"strokeWidth": 2,
		};

		$(areaEl).data('maphilight', yellow).trigger('alwaysOn.maphilight');

		var content = $('#innerarea-'+$areaIndex);
		var mainBlockAlign = content.find('.title').css('float') || '';
		var title = content.find('.title').html() || $areaIndex +'';
		var square = content.find('.body.square').html() || '';
		var price = content.find('.body.price').html() || '';

		var subscription = content.find('.body.subscription').html() || '';

		var areatype = content.find('.body.areatype').html() || '';
		var areatypecolor = content.find('.body.areatypecolor').html() || '';
		var h1Tag = '<h1>';
		var h2Tag = '<h2 class="red">';
		if ( areatypecolor == 'green' )
		{
			h1Tag = '<h1 class="green">';
			h2Tag = '<h2>';
		}
		if ( areatypecolor == 'blue' )
		{
			h1Tag = '<h1 class="blue">';
			h2Tag = '<h2>';
		}

		$('#mapdescription').html(
			'' + ( ( title != '' ) ? h1Tag + title + '</h1>' : '' ) +
			'' + ( ( areatype != '' ) ? h2Tag + areatype + '</h2>' : '' ) +
			'' + '<div class="body">' +
			'' + ( ( square != '' ) ? '<strong>Площадь:</strong> ' + square + ' кв. м.<br />' : '' ) +
			'' + ( ( price != '' ) ? '<strong>Цена за 1 кв.м.</strong> <span style="font-size:15px; color: #080;"><strong>' + price + '</strong></span> рублей в месяц. Цена с НДС.' : '' ) +
			'' + ( ( subscription != '' ) ? subscription : '' ) +
			'' + '</div>'
		);

		if ( mainBlockAlign == 'right' )
			$('#mapdescription').css({'float':'right'});
		else
			$('#mapdescription').css({'float':'none'});

		if ( $areaIndex > 0 )
		{
			$('#rightcolumn .photo_container').hide();
			$('#container_'+$areaIndex).show();
		}
		else
		{
			$('#rightcolumn .photo_container').hide();
			$('#zero_container').show();
		}
	}

	$prevMap = $(areaEl);

}

function doit()
{
	$('area').unbind('click').click(function(){
		var $areaIndex = $(this).data('img-index');
		alert($selectedArea +'+'+ $areaIndex);

		tmpVal = $(this).data('maphilight');
		
		if ( $prevMap != '' )
		{
			if ( $valPrev != '' )
			{
				$prevMap.data('maphilight', $valPrev);
			}
		}

		if ( $selectedArea == $areaIndex )
		{
			showPhoto( $(this), undefined );
			return false;
		}
		else
		{
			$selectedArea = $areaIndex;

			if ( $valPrev != '' )
				$prevMap.data('maphilight', $valPrev);

			$valPrev = $(this).data('maphilight');

			yellow = {
				"alwaysOn":true,
				"fillColor":"FF00FF",
				"shadow":true,
				"shadowBackground":"ffffff",
				"stroke": true,
				"strokeColor": "000000",
				"strokeOpacity": 1,
				"strokeWidth": 2,
			};
		
			$(this).data('maphilight', yellow).trigger('alwaysOn.maphilight');

			var content = $('#innerarea-'+$areaIndex);
			var mainBlockAlign = content.find('.title').css('float') || '';
			var title = content.find('.title').html() || $areaIndex +'';
			var square = content.find('.body.square').html() || '';
			var price = content.find('.body.price').html() || '';

			var subscription = content.find('.body.subscription').html() || '';

			var areatype = content.find('.body.areatype').html() || '';
			var areatypecolor = content.find('.body.areatypecolor').html() || '';
			var h1Tag = '<h1>';
			var h2Tag = '<h2 class="red">';
			if ( areatypecolor == 'green' )
			{
				h1Tag = '<h1 class="green">';
				h2Tag = '<h2>';
			}
			if ( areatypecolor == 'blue' )
			{
				h1Tag = '<h1 class="blue">';
				h2Tag = '<h2>';
			}
	
			$('#mapdescription').html(
				'' + ( ( title != '' ) ? h1Tag + title + '</h1>' : '' ) +
				'' + ( ( areatype != '' ) ? h2Tag + areatype + '</h2>' : '' ) +
				'' + '<div class="body">' +
				'' + ( ( square != '' ) ? '<strong>Площадь:</strong> ' + square + ' кв. м.<br />' : '' ) +
				'' + ( ( price != '' ) ? '<strong>Цена за 1 кв.м.</strong> <span style="font-size:15px; color: #080;"><strong>' + price + '</strong></span> рублей в месяц. Цена с НДС.' : '' ) +
				'' + ( ( subscription != '' ) ? subscription : '' ) +
				'' + '</div>'
			);
	
			if ( mainBlockAlign == 'right' )
				$('#mapdescription').css({'float':'right'});
			else
				$('#mapdescription').css({'float':'none'});
	
			if ( $areaIndex > 0 )
			{
				$('#rightcolumn .photo_container').hide();
				$('#container_'+$areaIndex).show();
			}
			else
			{
				$('#rightcolumn .photo_container').hide();
				$('#zero_container').show();
			}
		}

		$prevMap = $(this);

	});
};

function showOnePhoto( room, ind )
{
	showPhoto( $('map').find('area[name="#'+room+'"]'), ind );
}

function showPhoto(me, imgInd)
{
	var $areaIndex = me.attr('name').substr(1);
	$('#popupphotos ul').html('');
	var firstPhoto = '';

//	$('#toptext').text( 'Area: '+ $areaIndex );

	var photos = $('#innerarea-'+$areaIndex).find('.body.photos ul li').each( function(){
		var pictureName = $(this).find('img').attr('src');
		var imgIndex    = $(this).attr('data-img-index'); //pictureName.split('/img/' + $areaIndex + '/').join('').split('.' + smW + '.' + smH + '.jpg').join('');
		var imgName     = $(this).attr('data-img-name'); //pictureName.split('/img/' + $areaIndex + '/').join('').split('.' + smW + '.' + smH + '.jpg').join('');

		if ( firstPhoto == '' )
		{
			if ( imgInd == undefined )
			{
				firstPhoto = '/img/' + relations[$areaIndex] + '/' + imgIndex + '.'+bigW+'.'+bigH+'.jpg';
			}
			else
			{
				if ( imgInd == imgIndex )
				{
					firstPhoto = '/img/' + relations[$areaIndex] + '/' + imgIndex + '.'+bigW+'.'+bigH+'.jpg';
					$("#popupphotopane").html('<img src="/images/dot.gif" width="'+bigW+'" height="'+bigH+'" style="max-width: '+bigW+'px; max-height: '+bigH+'px;" />');
				}
			}
		}

		if ( firstPhoto != '' )
		{
			$('#popupphotos ul').append('<li data-img-name="' + imgName + '" data-img-index="' + imgIndex + '">' + '<img src="' + pictureName + '" width="' + smW2 + '" height="' + smH2 + '" style="max-width: ' + smW + 'px; max-height: ' + smH + 'px;" />' + '<li>');
		}
	});
	
	var currH = $('#popupphotos').height(); if ( currH < 590 ) { currH = 590; }
	var currW = $('#popupphotos').width(); if ( currW < 750 ) { currW = 750; }
	$('#popupphotos').css({'height':currH+'px', 'width':currW+'px'});

	if ( firstPhoto == '' ) return;

	$('#popupphotos ul li img').die('click').live('click', function()
	{
		var imgNewName = '/img/' + relations[$areaIndex] + '/' + $(this).parent().attr('data-img-index') + '.'+bigW+'.'+bigH+'.jpg';
		$("#popupphotopane").animate({opacity: 0},200,function(){
			$(this).find("img").attr({'src':imgNewName}).unbind('load').bind("load",function(){
				$(this).parent().animate({opacity: 1},100);
			}).attr({'src': imgNewName});
		});
	});

	$('#popupwrapper').die('click').live('click',(closePhotoPane)).fadeOut();
	$('#popupphotos div.closeText').die('click').live('click',closePhotoPane);
	$("#popupphotopane").animate({opacity: 0},200,function(){
		replacePhotoPane();
		$(this).find("img").attr({'src':firstPhoto,'width':bigW,'height':bigH,'style':'max-width:'+bigW+'px;max-height:'+bigH+'px;'}).unbind('load').bind('load',function(){
			$(this).parent().animate({opacity: 1},200);
			alignCenter();
		});
	});
	
	$('#popupwrapper').animate( { opacity : '0.5' }, 1 );
	$('#popupphotos').fadeIn();
	$(window).bind( 'resize', replacePhotoPane );

	return;
}

closePhotoPane = function()
{
	$('#popupphotos').fadeOut(200);
	$('#popupwrapper').fadeOut(200);

	$(window).unbind('resize');
	$("#popupphotopane").html('<img src="/images/dot.gif" width="'+bigW+'" height="'+bigH+'" style="max-width: '+bigW+'px; max-height: '+bigH+'px;" />');

	$('#popupphotos ul li img').die('click');
	$('#popupwrapper').die('click');
	$('#popupphotos div.closeText').die('click');

	/* Clear map pane */
	if ( $valPrev != '' )
		$prevMap.data('maphilight', $valPrev);
	$selectedArea = -1;
	$valPrev = '';
	$prevMap = '';

	$('#mapimage').maphilight();
//	doit();

	return false;
}

function alignCenter()
{
	$minHeight = $('#popupphotos').height();
	if ( $minHeight < 590 ) $minHeight = 590;
	$screenW = $(window).width() / 2 - $('#popupphotos').width() / 2;
	$screenH = $(window).height() / 2 - $minHeight / 2;
	$('#popupphotos').css({'top':$screenH+'px','left':$screenW+'px'});
}

replacePhotoPane = function()
{
	alignCenter();
	$('#popupphotos').animate({opacity:'1'},1);
	$('#popupwrapper').fadeIn(200);



//	$('#toptext').text( $(window).height() / 2 + ":" + $('#popupphotopane').height() / 2 );
}