var MediaViewer = {

	margins: {x: 0, y: 60},
	current: 0,
	viewport: null,
	drawback: null,
	media: [],
	
	init: function() {
		this.viewport = $('#MediaViewer');
		
		var productID = this.viewport.find('input[name=productID]').val();

		$mediaID = parseInt(getURIAnchor());
		if( $mediaID ) {
			this.ready = function() {
				MediaViewer.dig($mediaID);
			};
		}

		$.ajax({
			url: '/ajax/MediaJSON.php?productID=' + productID,
			dataType: 'json',
			timeout: 1000*60*5,
			success: function(mediaObject) {
				if( mediaObject.length == 0 ) {
					MediaViewer.placeholder.html('No Browsable Media Found').removeClass('initializing').addClass('error');
				}else{
					MediaViewer.media = mediaObject;
					MediaViewer.placeholder.removeClass('initializing').addClass('ready'); // Don't empty HTML content. It is used for displaying media
					MediaViewer.ready();
					$('#deeplink').show();
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				switch(textStatus) {
					case 'timeout':
						errorMessage = 'Timeout';
						break;
					default:
						errorMessage = 'Error Loading Media Object';
				}
				
				MediaViewer.placeholder.html(errorMessage).removeClass('initializing').addClass('error');
			},
			complete: function() {}
		});
		
		this.placeholder = this.viewport.find('#placeholder');
		this.drawback = this.viewport.find('#drawback');
		this.mediaCaption = this.viewport.find('.mediaCaption');


		this.video.player = this.viewport.find('input[name=skyrocketURL]').val();

		$('a.MediaViewer').click(function(event) {
			event.preventDefault();
			var mediaID = $(this).attr('rel');
			
			if(mediaID) {
				MediaViewer.align();
				MediaViewer.dig(mediaID);
				return true;
			}else{
				return false;
			}
		});

		$('#MediaViewer a.skip').mouseup(function() { this.blur(); MediaViewer.skip($(this).attr('rel')); } ).click(function() { return false; });
		$('#MediaViewer a.close').click(function() { MediaViewer.close(); return false; });
		
		$(document).keydown(function(e) {
			
			if( $('#MediaViewer:visible').length > 0 ) {
				switch(e.keyCode) {
					case 37:
						e.preventDefault();
						MediaViewer.skip(-1);
						break;
					case 39: 
						e.preventDefault();
						MediaViewer.skip(1);
						break;
				}
			}
		});

		this.viewport.draggable();

		$('#deeplinkField').click(function() { this.select(); });

		$('#placeholder').each(function(i, target) {
			target.onselectstart = function () { return false; }
			target.onmousedown = function () { return false; }
		});
	},
	
	ready: function() {
		
	},
	timer: {
		id: null,
		fps: 18,
		operations: {},

		start: function() {
			if(this.id == null) this.id = window.setInterval('MediaViewer.timer.loop()', 1000/this.fps);
		},
		stop: function() {
			clearInterval(this.id);
			this.id = null;
		},
		loop: function() {
			$.each(this.operations, function() { this(); });
		}
	},

	image: {
		init: function(url, tag) {
			MediaViewer.timer.stop();
			MediaViewer.drawback.css({
				height: 'auto',
				backgroundImage: 'none'
			}).html('<img src="'+url+'"' + (tag && tag.length > 0 ? ' alt="' + tag + '" title="' + tag + '"' : '') + ' />').show();
		},
		preload: function(url) {
			image = new Image();
			image.src = url;
		}
	},
	video: {
		player: '',
		size: {x: 750, y: 400},

		init: function(url) {
			MediaViewer.timer.stop();
			MediaViewer.drawback.css({
				height: this.size.y+'px',
				backgroundImage: 'none'
			}).html('<iframe src="'+this.player+'?url=' + url + '&x='+this.size.x+'&y='+this.size.y+'" width="'+this.size.x+'" height="'+this.size.y+'" frameborder="0" scrolling="no"></iframe>').show();
		}
	},
	rotate: {
		stepping: -1,
		clockwise: true,
		dragspeed: 20,
		current: 0,
		pixelOffset: 400,
		framecount: 36,
			
		init: function(url) {
			MediaViewer.drawback.hide();

			var self = MediaViewer.rotate;
			
			var image = new Image();

			$(image).load(function() {
				MediaViewer.drawback.show();
			}).attr('src', url);

			MediaViewer.drawback.css({
				height: self.pixelOffset,
				cursor: 'move',
				backgroundImage: 'url('+url+')',
				backgroundPosition: '50% 0'
			});

			MediaViewer.drawback.unbind().mousedown(function(e) {
				//delete(MediaViewer.timer.operations.rotate);
				MediaViewer.timer.stop();
				var initX = e.pageX;
				$(document).mousemove(function(e) {
					steps = Math.round((e.pageX - initX) / self.dragspeed);
					if(self.clockwise) steps = -steps;
					self.skip(steps);
				});

				$(document).mouseup(function(e) {
					$(document).unbind('mousemove').unbind('mouseup');
					MediaViewer.rotate.current = MediaViewer.rotate.skip(steps);
					MediaViewer.timer.start();
				});
				return false;
			});

			MediaViewer.timer.operations.rotate = self.jump;
			MediaViewer.timer.start();
		},
		jump: function() {
			var x = MediaViewer.rotate;
			x.current = x.skip(x.stepping);
		},
		skip: function(steps) {
			var x = MediaViewer.rotate;
			if( !isFinite(steps) ) steps = x.stepping;
			var next = ((x.current + steps) % x.framecount);
			if(next < 0) next = (x.framecount + next); 
			MediaViewer.drawback.css('background-position', '50% -' + (next * x.pixelOffset) + 'px');
			return next;
		}
	},

	dig: function(mediaID) {
		if(this.media.length > 0) {
			$.each(this.media, function(index, media){
				if(media.mediaID == mediaID) { 
					MediaViewer.current = index; 
					return true;
				}
			});
		}else{
			this.ready = function() {
				MediaViewer.dig(mediaID);
			};
		}
		MediaViewer.show(); 
		return false;
	},

	skip: function(step) {
		if(this.media.length > 0) {
			var itemUpcoming = this.current + parseInt(step);
			if(itemUpcoming < 0) itemUpcoming = this.media.length - 1;
			if(itemUpcoming > this.media.length - 1) itemUpcoming = 0;
			this.current = itemUpcoming;
			this.show();
			return true;
		}
		return false;
	},
	show: function() {
		this.viewport.show();

		if( this.media.length == 0 ) return false;

		this.viewport.find('#counter').html((this.current + 1) + '/' + this.media.length);

		var nextItemIndex = ((this.current + 1) % this.media.length);

		var item = this.media[this.current];
		var preloadMedia = this.media[nextItemIndex];

		var productID = this.viewport.find('input[name=productID]').val();
		this.setDeeplink('http://' + window.location.hostname + '/wrap.php?productID=' + productID + '&mediaID=' + item.mediaID);

		this.drawback.html('').attr('style', '');

		switch(item.mediaType) {
			case 'image':
				MediaViewer.image.init(item.url, item.tag);
				MediaViewer.image.preload(preloadMedia.url);
				break;

			case 'video':
				MediaViewer.video.init(item.url);
				break;

			case 'rotate':
				MediaViewer.rotate.init(item.url);
				break;
		}
		
		if( item.caption ) { this.mediaCaption.html(item.caption).show(); }else{ this.mediaCaption.html('').hide(); }
		if( item._class == 'customer' ) { this.viewport.find('#user_contributed').show(); } else { this.viewport.find('#user_contributed').hide(); }

		this.viewport.find('#caption').html(item.caption);
		this.viewport.find('a.download').attr('href', "/download/" + item.mediaID);
	},

	close: function() {
		this.ready = function() {};
		this.timer.stop();
		this.drawback.not('.initializing').html(''); 
		this.viewport.hide();
		//setURIAnchor(0);
	},

	align: function() {
		var scrOfX = 0, scrOfY = 0;
		if(typeof( window.pageYOffset) == 'number') {
			scrOfY = window.pageYOffset;
		}else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
			scrOfY = document.body.scrollTop;
		}else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
			scrOfY = document.documentElement.scrollTop;
		}
		 
		this.viewport.css("top", scrOfY + this.margins.y);
	},
	
	setDeeplink: function(url) {
		$('#deeplinkValue').html(url);
		$('#deeplinkField').val(url).width($('#deeplinkValue').width() + 5);
	}
}

$(document).ready(function(){
	MediaViewer.init();
});