(function($) {
  $(function() {
	
	var root = application.root;

	var gallery = {   
	  wrap: null,
	  table: '<table width="100%" border="0" cellpadding="5" cellspacing="5"></table>',
	  xml: null,
	  colspan: 5,
	  imagePath : root + 'resources/website/images/gallery/',
	  
	  init: function () {
	    this.wrap = $('#gallery').html(this.table);
		this.table = this.wrap.find('table');
		this.build();
	  },
	  
	  build: function() {
	  	var self = this;
		var html = '';

		$.get(root + 'resources/website/javascript/gallery.xml', {dataType : 'xml'}, function(xml) {
		  self.xml = xml;

		  html += '<tr>';
		  
		  $('gallery//collection', self.xml).each(function (i, n) {
		    var image = self.getPath($(n).attr('name'), 's', self.getImageById($(n).attr('id')).attr('src'));

			html += (i % self.colspan == 0 ? '</tr><tr>' : '') + '<td><a href="javascript:;" id="image-' + $(n).attr('id') + '">' + $(n).attr('name') + '<br /><img src="' + image + '" /></a></td>';
		  });
		  
		  html += '</tr>';
		  
		  self.table.html(html);
		  self.wrap.find('td a').bind('click', function (e) { self.open.apply(self, ['thumbs', this.id]); }).hover(
		    function() { 
			  $(this).css('background', '#f7f7f7').find('img').animate({ opacity: 0.5 }, 300); 
			}, 
			function() { 
			  $(this).css('background', '#ffffff').find('img').animate({ opacity: 1 }, 300); 
			});
		}); 
	  },
	  
	  open: function(t, v) {
	    var self = this,
			win = new Boxy('<div></div>', { title: ' ', closeText: '[x]', modal: t == 'thumbs' }), 
			data;

		switch (t) {
		  case 'thumbs': {
		    data = this.load(v.split('-')[1]);
			
			win.resize(640, 350);
			win.setContent('<div style="margin-bottom:10px;">Click thumbnail images to enlarge</div>' + data.content.html());
			win.setTitle(data.title);			

			$('img', win.getContent()).css({ float: 'left', margin: '0px 5px 5px 0px', cursor: 'pointer' }).bind('click', function() {
			  self.loadLarge($(this).attr('src').replace(/\/small\//, '/large/'));
			});

		    break;
		  }
		  case 'large': {

			win.setContent('<div style="width:200px;">Loading...</div>');
			win.setTitle('Loading...');

			data = $('<div><img /></div>');
			data.find('img').bind('load', function() {
				win.setContent(data.html());
				win.setTitle(unescape(v).replace(/.+?\/gallery\/([^\/]+)\/.+/, '$1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'));
				win.center();
			}).attr('src', v);
			break;
		  }
		}
	  },
	  
	  load: function(id) {
	    var self = this;
		var wrap = $('<div></div>');
		var images = this.getImagesById(id);
		var name = this.getCollectionById(id).attr('name');
		
		images.each(function(i, n) {
		  wrap.append('<img src="' + self.getPath(name, 's', $(n).attr('src')) + '" />');
		});
		
		return { content: wrap, title: name };
	  },
	  
	  loadLarge: function (src) { 
		if (src) {
		  this.open('large', src);
		}
	  },	  
	  
	  getCollectionById: function(id) {
	    return $('[@id='+ id +']', this.xml);
	  },

	  getImagesById: function(id) {
	    return $('[@id='+ id +']//image', this.xml);
	  },	  

	  getImageById: function(id) {
		var c = this.getImagesById(id);
	    return c.size() > 1 ? c.eq(1) : c.eq(0);
	  },
	  
	  getPath: function(n, t, s) {
	  	return this.imagePath + n + '/' + (t == 's' ? 'small' : 'large') + '/' + escape(s);
	  }
	};
	
	gallery.init();
	
  });
})(jQuery);