var canExpand = false;
var canCollapse = false;
var activeDiv = false;
var timer;

$(function()
{
	// Add banner html
	$('.banner').html('').append('<div class="arrow arrow_left"></div>' +
		'<div class="arrow arrow_right"></div>' +
		'<div class="banner_image_outer">' +
			'<div id="banner_images_container">' +
				'<div id="banner_overlay"></div>' +
				'<div class="editable_text_container curveThemeTrans"><div class="corner tl"></div><div class="corner tr"></div><div class="corner bl"></div><div class="corner br"></div>' +
					'<div class="editable_text_title">' + textTitle + '</div>' +
					'<div class="editable_text_subtitle">' + textSubtitle + '</div>' +
				'</div>' +
			'</div>' +
		'</div>');

	// Setup
	var bannerWidth = parseInt($('.banner').css('width'));
	
	// Set flags
	canExpand = true;
	canCollapse = false;
	
	var canSlide = true;
	
	// Set overlay opacity
	$('#banner_overlay').css({'opacity':0});

	// Add images to document
	for (var i = 0; i < images.length; i++) {
		if (i > 16) continue;
		if (images[i][2] != '') {
			var textHtml = '<a href="' + images[i][2] + '">' + images[i][1] + '</a>';
		} else {
			var textHtml = images[i][1];
		}
		$('#banner_images_container').append('<div class="banner_image curveThemeTrans" id="banner_image_' +i+ '"><div class="corner tl"></div><div class="corner tr"></div><div class="corner bl"></div><div class="corner br"></div><div class="banner_image_src"><img src="' +images[i][0]+ '" alt="' +images[i][1]+ '" title="' +images[i][4]+ '" /></div><div class="banner_image_text">' + textHtml + '</div></div>');

		// Set original top
		var origTop = $('#banner_image_' + i).css('top');
		
		// Set small dimensions
		var smallWidth = $('#banner_image_' + i).width();
		var smallHeight = $('#banner_image_' + i).height();

		// Set large dimensons
		var largeWidth = images[i][3];

		// Store these values against the image divs
		$('#banner_image_' + i).data('data',{
			'origTop': origTop,
			'smallWidth': smallWidth,
			'smallHeight': smallHeight,
			'largeWidth': largeWidth
		});

		// Set the images to width/height 100% so they can expand
		$('#banner_image_' + i + ' img').css({'width': '100%','height':'100%'});
		
		// Set up click for images
		$('#banner_image_' + i).click(function(event) {
			if (activeDiv != false && activeDiv.attr('id') == $(this).attr('id')) {
				$('#banner_overlay').mouseover();
				return;
			}
			if (canExpand === false) {
				return;
			}
			if ($('#'+$(this).attr('id')+':animated').length == 0) {
				canExpand = false;
				activeDiv = $(this);
	
				// Calculate position of box
				var boxLeft = parseInt($(this).css('left'));
				//var boxWidth = parseInt($(this).css('width'));
				var boxWidth = $(this).data('data').largeWidth;
				var containerLeft = parseInt($('#banner_images_container').css('left'));
				var totalLeft = boxLeft + containerLeft;
				if (totalLeft > 0) {
					var amountOver = (totalLeft+boxWidth)-bannerWidth+20;
					if (amountOver < 0) {
						amountOver = 0;
					}
				} else {
					var amountOver = totalLeft;
					if (amountOver > 0) {
						amountOver = 0;
					}
				}
				
				// Slide across if whole box not visible
				if (amountOver != 0) {
					if (amountOver > 0) {
						slide('right',amountOver,1500);
					} else {
						amountOver *= -1;
						slide('left',amountOver,1500);
					}
				}

				
				// Make overlay fade in
				$('#banner_overlay').animate({
					opacity:0.5
				}).css({'z-index':50});
	
				// Animate the image div out
				$(this).css({'z-index':100});

				$(this).stop(true,true).animate({
					top:-10,
					height:295,
					width: $(this).data('data').largeWidth,
					padding: 10
				}, function() {
					$(this).find('.banner_image_text')/*.css({'z-index':100})*/.show();
					canCollapse = true;
				});
			}
		});
		
	}
//		$('#banner_image_' + i).mouseout(function() {
		$('#banner_overlay').mouseover(function() {

			if (canCollapse) {
				var div = activeDiv;
				if (div == false) {
					return;
				}
				if (div.css('height') != '295px') {
					return;
				}

				// Make overlay fade out
				$('#banner_overlay').stop(true,true).animate({
					opacity:0
				}).css({'z-index':0});
				
				// Animate the image div out
				$('.banner_image_text').hide();
				div.animate({
					top:div.data('data').origTop,
					height:div.data('data').smallHeight,
					width:div.data('data').smallWidth,
					padding:0
				}, function(){
					div.css({'z-index':0});
					canExpand = true;
					activeDiv = false;
				});
			}
		});
	// Set up event for arrows
	$('.arrow_right').click(function() {
		slide('right',200,1200);
	});
	$('.arrow_left').click(function() {
		slide('left',200,1200);
	});
	
	function slide(direction, distance, speed) {
		if (direction=='right') {
			showArrow('left',true);
			var div = $('#banner_images_container');
			var leftVal = parseInt(div.css('left').substr(0,div.css('left').length-2));
			if (leftVal > -1400) {
				canCollapse = false;
				leftVal -= distance;
				if (canSlide == false) {
					return;
				}
				canSlide = false;
				div.animate({
					left: leftVal
				},speed,function() {
					canSlide=true;
					canCollapse = true;
				});
				if (leftVal < -1000) {
					showArrow('right',false);
				} else {
					showArrow('right',true);
				}
			}
		}
		
		else if (direction=='left') {
			showArrow('right',true);
			var div = $('#banner_images_container');
			var leftVal = parseInt(div.css('left').substr(0,div.css('left').length-2));
			if (leftVal < 0) {
				canCollapse = false;
				leftVal += distance;
				if (canSlide == false) {
					return;
				}
				canSlide = false;
				div.animate({
					left: leftVal
				},speed,function() {
					canSlide=true;
					canCollapse = true;
				});
				if (leftVal > 50) {
					showArrow('left',false);
				} else {
					showArrow('left',true);
				}
			}
		}
	}
	function showArrow(direction,show) {
		var animateSpeed = 200;
		if (direction=='right') {
			if (show) {
				$('.arrow_right').show();
			} else {
				$('.arrow_right').hide();
			}
		} else {
			if (show) {
				$('.arrow_left').show();
				$('.arrow_right').css({'left':'828px'});
			} else {
				$('.arrow_left').hide();
				$('.arrow_right').css({'left':'898px'});
			}
		}
	}
});