var zIndex = 100
jQuery(function($) {


	$('.content').each(function(i, box) {
		$(box).data('style', $(box).attr('style'));
		$(box).data('position', $(box).position());
		$(box).data('width', $(box).width());
		
		var inner = $('<div class="inner"></div>');
		var close = $('<span class="close"></span>');
		$(close).click(function() {
			var content = $(this).closest('.content')
			collapse(content);
			setContentHeight()
			resetContent()
			setContentPosition(content)
			
			
			return false;
		});
		$(box).find('h1')
			.append(close)
			.click(function() {
				
				zIndex = zIndex + 1
				$(box).css({zIndex:zIndex})
				var content = $(this).closest('.content')
				if (content.hasClass('content-expanded')) return;
				
				resetContent()
				
				
				content.addClass('content-expanded');
				var innerWidth = content.find('.inner').show().width();
				if (content.find('.slideshow').length > 0) {
					if (content.find('.slideshow li img').length) {
						var w = content.find('.slideshow li:first').width()
					} else {
						var w = innerWidth;
						content.find('.slideshow li').width(innerWidth-60).css({padding:'0 30px 0 '}).end()
							.find('h1').css({'paddingLeft':'50px'}).end()
							.addClass('slideshow-html');
					}
					if (content.find('.slideshow').hasClass('wide')) {
						content.width(w + (w/3));
					} else {
						content.width(w)
					}
					
				}
				$(box).draggable({
					//zIndex:zIndex,
					start:function(event, ui) {
						zIndex = zIndex + 1
						$(this).css({zIndex:zIndex,bottom:'auto'})
					},
					stop:function(event, ui) {
						setContentHeight()
						$(event.target).addClass('moved')
						event.stopImmediatePropagation()
					},
					cancel:'span.close'
				});
				content.siblings().each(function(i, sibling) {
					collapse($(sibling));
//					$(sibling).find('.close').click()
				});
				
				setContentHeight()
				setContentPosition(content)
				return false;

			}).nextAll().appendTo(inner);

		$(box).append(inner).click(function() {
			zIndex = zIndex + 1
			$(this).css({zIndex:zIndex})
		
		});
		var slideshow = $(box).find('.slideshow')
		if (slideshow.length > 0) {
			$(slideshow).data('curr', 0)
			$(slideshow).data('num', $(slideshow).find('>li').length)
			
			var n = $('<a href="#next" class="next">Next</a>')
			var p = $('<a href="#prev" class="prev disabled">Previous</a>')
			$(n).click(function() {
				if ($(slideshow).data('curr') < $(slideshow).data('num') - 1) {
					var next = $(slideshow).data('curr') + 1
					goto_slideshow_slide(slideshow, next);
					
				}
				return false;
			})
			$(p).click(function() {
				if ($(slideshow).data('curr') > 0) {
					var next = $(slideshow).data('curr') - 1
					goto_slideshow_slide(slideshow, next);
				}
				return false;
			});

			$(box).append(n).append(p)
			
			$(slideshow).find('img').each(function(i, img) {
				$(img).click(function() {
					if ($(slideshow).data('curr') == i) {
						goto_slideshow_slide(slideshow, i+1)
					} else {
						goto_slideshow_slide(slideshow, i)
					}
				});
			});
		}

		
	});
function goto_slideshow_slide(slideshow, i) {
	if (!$(slideshow).find('>li').eq(i).length) return
	
	var left = $(slideshow).find('>li').eq(i).position().left
	$(slideshow).data('curr', i).animate({marginLeft: (-1 * left)}, 'fast')
	
	var p = $(slideshow).closest('.content').find('.prev').removeClass('disabled');
	var n = $(slideshow).closest('.content').find('.next').removeClass('disabled');

	if (i <= 0) {
		p.addClass('disabled')
		n.removeClass('disabled')
	} else if (i >= $(slideshow).data('num') - 1) {
		n.addClass('disabled')
		p.removeClass('disabled')
	}
}

$(window).resize(setBackgroundDimensions);
$(window).load(function() {
	setBackgroundDimensions();
	$('#bg').fadeIn('fast');
});
$('body').css({margin:0,padding:0})
setBackgroundDimensions();

});

function resetContent() {
	var $ = jQuery
	$('.content:not(.moved)').each(function(i, o) {
		var s = $(o).data('style');
		var p = $(o).data('position');
		if (p) {
			$(o).css(p)
		} else {
			$(o).css({left:0,top:0})
		}
		/*
		var w = $(o).data('width');
		if (w) {
			$(o).width(w)
		}
		*/
		if (s) {
			$(o).attr('style', s)
		} else {
			$(o).attr('style', '');
		}
	});
}
function collapse(content) {
	var $ = jQuery;
	
	content
		.removeClass('content-expanded')
		.find('.inner').hide().end()
		.find('h1').attr('style', '')
		
	if (content.hasClass('ui-draggable')) {
		content.draggable('destroy');
	}
}

function setContentPosition(fixed) {
//  do this: http://stackoverflow.com/questions/1535699/layering-intersecting-elements-with-jquery
	var $ = jQuery;
	var left = 0
	var top = 0
	var contents = $('#content .content');
	var check2 = $(contents).not(fixed)
	
	contents.sort(function(a,b) { return $(b).position().left - $(a).position().left })
		
	for (var i=0;i<check2.length;i++) {
		var obj = $(check2[i]);
		var p = obj.position()
		var w = obj.outerWidth()
		var h = obj.outerHeight()
		p.right = p.left + w
		p.bottom = p.top + h
		var coord = intersects(obj, contents.not(obj))
		if (coord) {
		//console.log(obj)
			$(obj).css({left:coord.right + 15}); // just shift right
		/*
			if ((p.top - coord.top) < 10) {
				$(obj).css({left:coord.right + 15})
			} else if ((p.left - coord.left) < 10) {
				$(obj).css({top:coord.bottom + 15})
			} else {
				$(obj).css({top:coord.bottom + 15})
			}
		*/
			//$(obj).css({top:coord.bottom + 15})
		} else {
			//console.log(obj.position())
			//console.log(contents.not(obj))
		}

	};
	
	
	contents.sort(function(a,b) { 
		var p = $(a).position()
		var h = $(a).outerHeight()
		var p2 = $(b).position()
		var h2 = $(b).outerHeight();
		return (p2.top+h2) - (p.top+h);
		
	});
	/*
	for (var i=0;i<contents.length;i++) {
		var obj = $(contents[i]);
		
		
	}
	*/
}

function intersects(obj, divs) {
	var p = obj.position()
	var w = obj.outerWidth()
	var h = obj.outerHeight()
	p.right = p.left + w
	p.bottom = p.top + h
	/*
	p.x1 = p.left;
	p.y1 = p.top;
	p.x2 = p.x1 + w
	p.y2 = p.y1 + h
	*/
	
	for (var i=0;i<divs.length;i++) {
		var obj2 = $(divs[i])
		var p2 = obj2.position()
		var w2 = obj2.outerWidth()
		var h2 = obj2.outerHeight()
		p2.right = p2.left + w2
		p2.bottom = p2.top + h2
		
		if (intersect(p, p2)) {
			return p2;
		}
		/*
		p2.x1 = p2.left;
		p2.y1 = p2.top;
		p2.x2 = p2.x1 + w2
		p2.y2 = p2.y1 + h2
		*/
		
		/*
		if (contains({x:p2.x1, y:p2.y1}, p) || contains({x:p2.x2, y:p2.y1}, p) || contains({x:p2.x1, y:p2.y2}, p) || contains({x:p2.x2, y:p2.y2}, p)) {
			return p2;
		}*/
		
	}
	return false;
	
}
function intersect(a, b) {
  return (a.left <= b.right &&
          b.left <= a.right &&
          a.top <= b.bottom &&
          b.top <= a.bottom)
}

function contains (c, b) {
	return (c.x >= b.x1) && (c.x <= b.x2) && (c.y >= b.y1) && (c.y <= b.y2);
}


function setContentHeight() {
return
	var $ = jQuery;
	var height = 0
	$('.content').each(function(i, obj) {	
		var o = $(obj).position()
		var h = $(obj).outerHeight()
		if ((o.top + h) > height) {
			height = o.top + h
		}
		
	});
	if (height < 0) height = 0
	$('#content').height(height + 20)
}

function setBackgroundDimensions() {
	var $ = jQuery;
	var width = $(window).width();
	var height = $(window).height();

	var w = width;
	var h = height;
	var l = 0;
	var r = 1.6
	
	if ((width/height) > r) {
		h = Math.ceil(width/r);
	} else {
		w = Math.ceil(height*r);
		l = (width - w) / 2 
	}
	$('#bg').width(w).height(h).css({left:l});
}