$(document).ready(function(){
    var mousex = null;
    var mousey = null;
    $().mousemove(function(e){
      mousex = e.pageX;
      mousey = e.pageY;
    });
	$.ajax({
		type: "GET",
		url: "/_build/xml/list.xml",
		dataType: "xml",
		success: function(xml) {
			var x = 0;
			$(xml).find('item').each(function(){
				x++;
				var thisnode = $(this);				
				
				if ($(thisnode).find('cover').text().length < 1)
				{
				        var div = $('<div></div>').addClass('item');
				}
				else
				{
				        var div = $('<div></d>').attr('id','item-'+x).addClass('item').hover(function() {
				            $('.bubble .content').html($(thisnode).find('title').text());
				            $('.bubble').css('display','block').css('top',$(this).position().top+145).css('left',$(this).position().left+20);
				            $(this).addClass('selected'); 
        				
				        }, function(){
				            $('.bubble').css('display','none');
				            $(this).removeClass('selected'); 
				        
				        });
				        if (x%5==1) { $(div).addClass('left'); }
				        else if (x%5==0) { $(div).addClass('right'); }
				        var img = $('<img/>').attr('src',$(thisnode).find('cover').text());
				        $(div).click(function(){
					        var myid = $(this).attr('id');
					        $(xml).find('item').each(function(){
						        if ($(this).attr('id') == myid) { thisnode = $(this); }
					        });
				            var popup = $('<div id="modal" style="display:none;"></div>');
				            var spread = $('<div id="spread"></div>');
				            var hero = $('<img id="hero"></img>').attr('src',$(thisnode).find('hero1').text());
				            $(hero).appendTo(spread);
				            $(spread).appendTo(popup);
				            var h1 = $('<h1></h1>').html($(thisnode).find('headline').text());
				            var p = $('<p></p>').html($(thisnode).find('description').text());
				            var close = $('<span id="close"></span>');
		
				            
				            
				            if ($(thisnode).find('thumbnail1').text().length > 1){
				                var thumb1 = $('<span id="thumb1"></span>').click(function() { $('#hero').attr('src',$(thisnode).find('hero1').text()); });
				                var img1 = $('<img width="100" height="85"></img>').attr('src',$(thisnode).find('thumbnail1').text());
				                $(img1).appendTo(thumb1);
				                $(thumb1).appendTo(popup);
				            }
				            else
				            {
				                var thumb1 = $('<span id="thumb1"></span>');
				                var img1 = $('<img width="100" height="85"></img>').attr('src','../_build/images/clear.gif');
				                $(img1).appendTo(thumb1);
				                $(thumb1).appendTo(popup);
				            }
				            if ($(thisnode).find('thumbnail2').text().length > 1){
				                var thumb2 = $('<span id="thumb2"></span>').click(function() { $('#hero').attr('src',$(thisnode).find('hero2').text()); });
				                var img2 = $('<img width="100" height="85"></img>').attr('src',$(thisnode).find('thumbnail2').text());
				                $(img2).appendTo(thumb2);
				                $(thumb2).appendTo(popup);
				            }
				            else
				            {
				                var thumb2 = $('<span id="thumb2"></span>');
				                var img2 = $('<img width="100" height="85"></img>').attr('src','../_build/images/clear.gif');
				                $(img2).appendTo(thumb2);
				                $(thumb2).appendTo(popup);
				            }
				            if ($(thisnode).find('thumbnail3').text().length > 1){
				                var thumb3 = $('<span id="thumb3"></span>').click(function() { $('#hero').attr('src',$(thisnode).find('hero3').text()); });
				                var img3 = $('<img width="100" height="85"></img>').attr('src',$(thisnode).find('thumbnail3').text());
				                $(img3).appendTo(thumb3);
				                $(thumb3).appendTo(popup);
				            }
				            else
				            {   
				                var thumb3 = $('<span id="thumb3"></span>');
				                var img3 = $('<img width="100" height="85"></img>').attr('src','../_build/images/clear.gif');
				                $(img3).appendTo(thumb3);
				                $(thumb3).appendTo(popup);
				            }
				            var next = $('<span id="next"></span>');
				            var last = $('<span id="last"></span>');
				            $(h1).appendTo(popup);
				            $(p).appendTo(popup);
				            $(close).appendTo(popup);
				            
				            
				            
				            
				            $(next).appendTo(popup);
				            $(last).appendTo(popup);
				            $(popup).modal({
							        close: false,
							        overlayId: 'contact-overlay',
							        containerId: 'modal_'+$(thisnode).attr('id'),
							        onOpen: modal.open,
							        onShow: modal.show,
							        onClose: modal.close
						        });
				        });
				        $(img).appendTo(div);
				}
				$('#gallery').append(div);
			});
			$('#gallery').append('<div style="clear: both;"></div>');
		}
	});
});
var modal = {
	open: function (dialog) {
		dialog.overlay.fadeIn(200, function () {
			dialog.container.fadeIn(200, function () {
				dialog.data.fadeIn(200, function () {
					// do nothing				
				});
			});
		});
	},
	show: function (dialog) {
					var thediv = dialog.data;
					$('#modal #close').click(function(){
					    $.modal.close();
					});
					var thediv = dialog.data;
					$('#contact-overlay').click(function(){
					    $.modal.close();
					});
					
					$('#modal #last').click(function(){						
						var nodeid = $(thediv).parent().attr('id').split('_')[1];
						var prev_nodeid = 'item-'+(parseInt(nodeid.split('-')[1])-1);
						modal.populate(thediv,prev_nodeid);						
					});
					
					$('#modal #next').click(function(){
						var nodeid = $(thediv).parent().attr('id').split('_')[1];
						var next_nodeid = 'item-'+(parseInt(nodeid.split('-')[1])+1);
						modal.populate(thediv,next_nodeid);
					});
	},
	close: function (dialog) {
			dialog.data.fadeOut(200, function () {
				dialog.container.fadeOut(200, function () {
					dialog.overlay.fadeOut(200, function () {
						$.modal.close();
					});
				});
			});
	},
	populate: function (thediv, nodeId) {
	    var thisnode;
	    var matched = false;
		$.ajax({
		    type: "GET",
		    url: "/_build/xml/list.xml",
		    dataType: "xml",
		    success: function(xml) {
			    $(xml).find('item').each(function(){
				    if ($(this).attr('id') == nodeId && $(this).find('cover').text().length > 1 ) { matched = true; thisnode = $(this); }
			    });
			    
			    if (matched){
			        $(thediv).parent().attr('id','modal_'+nodeId);
			        $('#modal h1').html($(thisnode).find('headline').text());
			        $('#modal p').html($(thisnode).find('description').text());
			        $('#modal #hero').attr('src',$(thisnode).find('hero1').text());
			        
			        if ($(thisnode).find('thumbnail1').text().length > 1)
			        {
			            $('#modal #thumb1').unbind().click(function() { $('#hero').attr('src',$(thisnode).find('hero1').text()); });
			            $('#modal #thumb1 img').attr('src',$(thisnode).find('thumbnail1').text());
			        }
			        else
			        {
			            $('#modal #thumb1').unbind();
			            $('#modal #thumb1 img').attr('src','../_build/images/clear.gif');
			        }
			        if ($(thisnode).find('thumbnail2').text().length > 1)
			        {
			            $('#modal #thumb2').unbind().click(function() { $('#hero').attr('src',$(thisnode).find('hero2').text()); }).attr('src',$(thisnode).find('thumbnail2').text());
			            $('#modal #thumb2 img').attr('src',$(thisnode).find('thumbnail2').text());
			        }
			        else
			        {
			            $('#modal #thumb2').unbind();
			            $('#modal #thumb2 img').attr('src','../_build/images/clear.gif');
			        }
			        if ($(thisnode).find('thumbnail3').text().length > 1)
			        {
			            $('#modal #thumb3').unbind().click(function() { $('#hero').attr('src',$(thisnode).find('hero3').text()); }).attr('src',$(thisnode).find('thumbnail3').text());
			            $('#modal #thumb3 img').attr('src',$(thisnode).find('thumbnail3').text());
			        }
			        else
			        {
			            $('#modal #thumb3').unbind();
			            $('#modal #thumb3 img').attr('src','../_build/images/clear.gif');
			        }
			    }
		    }
	    });return matched;
    }
};