$.extend({

	delegate: function(fn, thisObject) {
      var parameters = Array.prototype.slice.call(arguments).slice(2);

      return function() {
         return fn.apply(thisObject || this, parameters.concat(Array.prototype.slice.call(arguments)));
      };
	}

});


$.widget('ui.gallery', {

	_create: function() {
		this.cache = {};
		this.enabled = true;
		this.origin = { x: 340, y: 50 };
		this.data = this.options.data;
		this.buttons = this.element.find('a');
		this.buttons.bind('click', this, function(event) {
			event.data.buttonClick($(this).attr('class'));	
		});

		this.viewer = this.element.find('.viewer');
		this.hover = this.element.find('.hover');
		this.hover.touchwipe({
			wipeLeft: $.delegate(this.buttonClick, this, 'right'),
			wipeRight: $.delegate(this.buttonClick, this, 'left'),
			min_move_x: 50,
			min_move_y: 50,
			preventDefaultEvents: true
		});

		this.preloader = this.element.find('.preloader');
		this.element.hover($.delegate(this.pause, this), $.delegate(this.play, this));

		$(window).resize($.delegate(this.resize, this));
		this.resize();
		this.change([1, 1], 'right');
	},


	play: function() {
   	this.pause();
   	this.interval = setInterval($.delegate(this.buttonClick, this, 'right'), 10000);
   },


   pause: function() {
   	if (this.interval == null) return;
   	clearInterval(this.interval);
      this.interval = null;
   },

	
	buttonClick: function(direction) { 
		if (!this.enabled) return;
	
		var index = this.index;
		
		switch (direction) {
			case 'left': index[0] -= 1; break;	
			case 'right': index[0] += 1; break;
			case 'up': index[1] -= 1; break;
			case 'down': index[1] += 1; break;
		}
		
		if (index[0] <= 0) index[0] = this.data.length;
		if (index[0] > this.data.length) index[0] = 1;
		
		var data = this.data[index[0] - 1].items;

		if (index[1] <= 0) index[1] = data.length;
		if (index[1] > data.length) index[1] = 1;
	
		this.change(index, direction);
	},


	outro: function(index, direction) {
		
	},

	
	width: function() {
		return $('body').width();
	},
	
	
	images: function() {
		return this.viewer.find('div');
	},
	

	animate: function(direction, intro, callback) {
		var $images = this.images();
		var $image;

		var height = 526;
		var start = this.origin;
		var width = this.width();
		var duration = (intro ? 1000 : 500);
		var count = $images.length;
		
		this.direction = direction;

		if (intro) {
			switch (this.direction) {
					
				case 'left':
				
					$images.css('marginLeft', -width);	
	
					break;
				
				case 'right':
				
					$images.css('marginLeft', width);	
				
					break;
					
				case 'up':
				
					$images.css('marginLeft', start.x);
					$images.css('marginTop', -height);		
				
					break;
	
				case 'down':
				
					$images.css('marginLeft', start.x);
					$images.css('marginTop', height);		
				
					break;
						
			}
		}

		var properties = {};

		switch (direction) {
			
			case 'left':

				properties['marginLeft'] = (intro ? 0 : width);
	
				break;
			
			case 'right':
			
				properties['marginLeft'] = (intro ? 0 : -width);
	
				break;
				
			case 'up':

				properties['marginTop'] = (intro ? start.y : height);
	
				break;
				
			case 'down':

				properties['marginTop'] = (intro ? start.y : -height);
	
				break;
					
		}
		
		var type = 'Quad';

		for (var i = 0; i < $images.length; i++) {
			$image = $images.eq(i);
			$image.animate(properties, {
				easing: (intro ? 'easeInOut' + type : 'easeInOut' + type),
				duration: duration * (((count - i) / count)),
				complete: (i == 0? $.delegate(this.animateComplete, this, direction, intro, callback) : null)
			});
		}
	},
	
	
	animateComplete: function(direction, intro, callback) { 
		if (!intro) {
			this.images().remove();	
		}
		else {
			this.play();
		}

		if (callback) callback();
		
		if (intro) this.enabled = true;
	},
	
	
	imageUrls: function(index) {
		var urls = [];
		var url;

		for (var i = 0; i < 3; i++) {
			url = this.options.path + index.join('/') + '/' + (i + 1) + ".png";
			urls.push(url);
		}

		return urls;
	},


	change: function(index, direction) {
		this.enabled = false;

		if (this.images().length > 0) {
			this.animate(direction, false, $.delegate(this.change, this, index, direction));
			return;	
		}
		
		var key = index.join('/');
		var images = this.imageUrls(index);
		
		if (this.cache[key]) {
			this.intro(index, direction);
			return;
		}

		this.cache[key] = true;

		$.preload(images, {
			loaded_all: $.delegate(this.preloadComplete, this, index, direction)
		});
		
		this.preloaderToggle(true);
	},
	
	
	preloaderToggle: function(show, callback) {
		this.preloader.fadeTo(250, (show ? 1 : 0), callback);
	},

	
	preloadComplete: function(index, direction) {
		this.preloaderToggle(false, $.delegate(this.intro, this, index, direction));
	},


	intro: function(index, direction) {
		this.index = index;

		var images = [];
		var lookup = this.data;
		var html = "";
		var urls = this.imageUrls(index);
		var url;

		for (var i = 0; i < index.length; i++) {
			if (!lookup.length) lookup = lookup.items;
			lookup = lookup[index[i] - 1];
		}

		for (var i = 3; i >= 1; i--) {
			url = urls[i - 1];
			html += "<div class=\"item" + i + "\" style=\"background-image: url(" + url + ");\"></div>";
		}

		this.images().remove();
		this.viewer.append(html);
		this.resize();
		this.animate(direction, true);
	},

	
	resize: function() {
		var bodyWidth = $('body').width();
		var horizontal = (bodyWidth < 1200);
		var x = (horizontal ? 0 : this.origin.x);
		var width = bodyWidth - x;
		var $images = this.images();
		var limit = bodyWidth - x;
		var size = Math.min(1000, limit);

		this.hover.css('width', bodyWidth - 100 + 'px');
		this.preloader.css('marginLeft', x + limit / 2 + 'px');
		this.viewer.css('marginLeft', x + Math.round((limit - size) / 2) + 'px');
		this.element.toggleClass('horizontal', horizontal);
		this.buttons.eq(3).css('marginLeft', Math.round(bodyWidth - this.element.offset().left - 50 - 14) + 'px');

		$images.css({
			width: size	
		});
	}
	
});


$().ready(function() {
	$(window).resize(function() {
		$('#info').toggleClass('horizontal', ($('body').width() < 1200));
	}).trigger('resize');

	$('#gallery').gallery({
		path: 'http://www.instinctstudios.com/assets/projects/',
		data: [{"title":"Test","items":[{"title":"Test"}]},{"title":"Test","items":[{"title":"Test"}]},{"title":"Test","items":[{"title":"Test"}]},{"title":"Test","items":[{"title":"Test"}]},{"title":"Test","items":[{"title":"Test"}]},{"title":"Test","items":[{"title":"Test"}]}]	});
});