(function () {
	YAHOO.namespace('ll.page.work');
	
	var Scroll = YAHOO.util.Scroll;
	
	var ProjectDetailPanel = (ll.page.work.ProjectDetailPanel = function ()
	{
		var _projectId,
			_numImages,
			
			_modalMask,
			_detailPanel,
			
			_isShown = false,
			
			_scrollWindow,
			_anim,
			
			_lgImagesContainer,
			_thmbImagesContainer,
			
			_width = 648,
			_height = 618,
			_imageOffset = 580 + 50,
			
			_projects = ll.page.work.projects || {},
			_mediums = ll.page.work.mediums || {},
			
			_projectImg = '<li><img src="~IMG~" alt="" class="work_detail-project-lg-img" /></li>',
			_projectThmImg = '<li><a href="javascript:;" id="work_detail-thmb-~ID~" class="work_detail-thmb-lnk"><img src="~IMG~" alt="" class="work_detail-project-thmb-img" /></a></li>',
			
			_snapToGridInterval;
		
		var _setupModalMask = function ()
		{
			_modalMask = $('work_modal-mask');
			
			Dom.setStyle(_modalMask, 'opacity', 0.75);
		};
		
		var _populateLgImages = function(project)
		{
			_numImages = project.images.length;
			Dom.setStyle(_lgImagesContainer, 'width', _imageOffset * _numImages + 'px');
			var html = '';
			for(var i = 0; i < project.images.length; i++)
			{
				html += String.format(_projectImg, {IMG : project.images[i].lgUrl});
			}
			_lgImagesContainer.innerHTML = html;
		};
		
		var _populateThumbImages = function(project)
		{
			var html = '';
			
			for(var i = 0; i < project.images.length; i++)
			{
				html += String.format(_projectThmImg, {
					IMG : project.images[i].thmbUrl,
					ID : i
				});
			}
			
			_thmbImagesContainer.innerHTML = html;
			
			var thmbImages = _thmbImagesContainer.getElementsByTagName('LI');
			
			Dom.addClass(thmbImages[thmbImages.length-1], 'work_last-thmb-image');
			
			var thmbLinks = $$('work_detail-thmb-lnk', 'a', 'work_detail-panel-thmb-images'); 
			Event.purgeElement(thmbLinks);
			Event.on(thmbLinks, 'click', _onThumbnailClick);
		};
		
		var _populate = function ()
		{
			var project = _projects[_projectId];
			var mediumDisplayName = project.year || _mediums[project.mediumId];
			
			_populateLgImages(project);
			_populateThumbImages(project);
			
			$('work_detail-panel-medium').innerHTML = mediumDisplayName;
			$('work_detail-panel-title').innerHTML = project.title;
		};
		
		var _center = function ()
		{
			var viewportWidth = Dom.getViewportWidth();
			var viewportHeight = Dom.getViewportHeight();
			
			var scrollLeft = Dom.getDocumentScrollLeft();
			var scrollTop = Dom.getDocumentScrollTop();
			
			_detailPanel.style.left = scrollLeft + Math.round((viewportWidth - _width) / 2) + 'px';
			_detailPanel.style.top = scrollTop + Math.round((viewportHeight - _height) / 2) + 'px';
		};
		
		var _setupDetailPanel = function ()
		{
			_detailPanel = $('work_detail-panel');
		};
		
		var _showDetailPanel = function ()
		{
			_center();
			Dom.setStyle(_detailPanel, 'display', 'block');
		};
		
		var _hideDetailPanel = function ()
		{
			Dom.setStyle(_detailPanel, 'display', 'none');
		};
		
		var _showModalMask = function ()
		{
			Dom.setStyle(_modalMask, 'display', 'block');	
		};
		
		var _hideModalMask = function ()
		{
			Dom.setStyle(_modalMask, 'display', 'none');
		};
		
		var _goto = function(index, snapTopGrid)
		{
			var animConfig = {
				scroll : {to : [(index * _imageOffset), 0]}
			};
			
			_anim = new Scroll(_scrollWindow, animConfig,snapTopGrid ? 0.25 : 0.8, YAHOO.util.Easing.easeOut);
			_anim.animate();
		}
		
		var _onThumbnailClick = function ()
		{
			var idPrefix = 'work_detail-thmb-';
			var id = this.id.substr(idPrefix.length);
			_goto(parseInt(id, 10));
		};
		
		var _scrapeContentContainerEls = function ()
		{
			_lgImagesContainer = $('work_detail-panel-lg-images');
			_thmbImagesContainer = $('work_detail-panel-thmb-images');
			_scrollWindow = $('work_detail-panel-lg-images-wpr');
		};
		
		var _isChildOfScrollWindow = function (el)
		{
			if(el === null || el === document.documentElement)
			{
				return false;
			}
			
			if(el === _scrollWindow)
			{
				return true;
			}
			
			return _isChildOfScrollWindow(el.parentNode);
		};
		
		var _snapToGrid = function ()
		{
			clearTimeout(_snapToGridInterval);
			var index = Math.round(_scrollWindow.scrollLeft / _imageOffset);
			_goto(index, true);
		};
		
		var _onMouseWheel = function (evt)
		{
			if (!_isShown)
			{
				return;
			}
			
			Event.stopEvent(evt);
			try
			{
				if (evt.preventDefault)
				{
					evt.preventDefault();
				}
				evt.returnValue = false;
			}
			catch(e){}
			
			clearTimeout(_snapToGridInterval);
			_anim.stop();
			
			if (!evt) { evt = window.event; }
			
			var target = Event.getTarget(evt);
			
			if (!_isChildOfScrollWindow(target))
			{
				return;
			}
			
			var delta = 0;

			if (evt.wheelDelta)
			{
				delta = evt.wheelDelta / 3;

                if (YAHOO.env.ua.opera !== 0)
                {
                	delta = -delta;
                }
			}
			
			else if (evt.detail)
			{
				delta = -evt.detail * 11;
			}
			
			delta = -Math.round(delta);
			if (_scrollWindow.scrollLeft + delta < _imageOffset * (_numImages - 1))
			{
				_scrollWindow.scrollLeft += delta;
			}
			
			_snapToGridInterval = setTimeout(_snapToGrid, 415);
		};
		
		return {
			onDomReady : function ()
			{
				// Must do first
				_scrapeContentContainerEls();
				
				_setupModalMask();
				_setupDetailPanel();
				
				Event.on('work_detail-panel-close', 'click', ProjectDetailPanel.hide);
				Event.on(window, 'scroll', _center);
				
				Event.on(document, 'mousewheel', _onMouseWheel);
				Event.on(document, "DOMMouseScroll", _onMouseWheel); 
			},
			show : function (projectId)
			{
				_projectId = projectId;
			
				_anim = new Scroll(_scrollWindow, {scroll : {to : [0, 0]}}, 0);
				_anim.animate();
								
				_populate();
				
				_showModalMask();
				_showDetailPanel();
				
				_isShown = true;
			},
			hide : function ()
			{
				_isShown = false;
				
				_hideModalMask();
				_hideDetailPanel();	
			}
		};
	}());
	
	Event.onDOMReady(ProjectDetailPanel.onDomReady, ProjectDetailPanel, true);
})();