/*-----------------------------------------------

	Projector
	by key2design
	
-----------------------------------------------*/

Projector = function(thumbsElm, viewElm){
	
	proj = this;
	
	proj.thumbsElm = thumbsElm;
	proj.viewElm = viewElm;
	
	this.init = function(){
		proj.skipClickAction = false; // skip click sliding when using mousedown functionality
		proj.mouseIsDown = false;
		
		proj.isScrolling = false;
		proj.scrollInterval = Object; // window scrolling interval 
		
		proj.leftOffset = 0;
		proj.totalThumbsWidth = 0; // combined width of all thumbnails and padding
		
		// settings
		proj.thumbMarginRight = 20; // margin-right of thumbnail in px
		proj.scrollAmount = 100; // amount to scroll thumbnails in px

		proj.itemsTotalWidth = 0;
		proj.itemsViewWidth = 0;
		
		proj.thumbnailIndex = 0;
		proj.products = [];
		// backing and content elements
		proj.backingElms = {};
		proj.contentElms = {};
		proj.closeWindowElms = {};
		// windo content height
		proj.windowHeights = {};
		proj.windowHeights['thumbContainer'] = 110;
		proj.windowHeights['collectionsWindow'] = 150;
                proj.windowHeights['collectablesWindow'] = 150;
                proj.windowHeights['publicationsWindow'] = 150;
		proj.windowHeights['imageInfoWindow'] = 164;
                proj.windowHeights['priceWindow'] = 164;
		//proj.windowHeights['shoppingcartWindow'] = 164;
		
		// settings
		proj.backingOpacity = 0.95;
		proj.collectionNavNormalOpacity = 0.45;
		proj.collectionNavHighlightOpacity = 0.75;
		proj.collectionNavActiveOpacity = 0.90;
		proj.enlargeNavHighlightOpacity = 1.0;
		proj.enlargeNavNormalOpacity =  0.78;
		
		proj.isIE6 = ($.browser.msie == true && $.browser.version == 6.0);
		
		proj.backingNormalOpacity = 0.87;
		
		proj.productMarginRight = 20; // size of right margin of individual product, used to calculate full size of product list
		
		proj.hasLightbox = (typeof $().lightBox == 'function');
		proj.isFrameViewer = ($('#mainImage').attr('class') == 'frameviewer');
		
		$('body').addClass('dynamic');
		
		// ensure unique request to avoid caching
		var rand = Math.floor(Math.random()*10000);
		if (proj.isFrameViewer) {
			proj.ajaxBaseURL = '/partials/frame.php?r=' + rand + '&item=';
		}
		else {
			proj.ajaxBaseURL = '/partials/info.php?r=' + rand + '&item=';
		}		
		
		proj.build();
	};
	this.build = function(){

		// get text height
		proj.windowHeights['collectionsWindow'] = parseInt($('#collectionsWindowContent').height(), 10) + 20 + 'px';
                proj.windowHeights['collectablesWindow'] = parseInt($('#collectablesWindowContent').height(), 10) + 20 + 'px';
		proj.windowHeights['publicationsWindow'] = parseInt($('#publicationsWindowContent').height(), 10) + 20 + 'px';

		proj.canvasElm = $('#dynamiccontent');
		
		proj.thumbnailWindow = $('#thumbnailWindow');
		proj.thumbnailNav = $('#thumbnailNav');
		proj.collectionNav = $('#collectionNav');
		
		proj.itemsViewWidth = proj.thumbsElm.width();
		
		// build image frame
		// replace element structure to get around opacity inheritance
		var containerElm = $('#mainImage');
		
		// create main container for everything
		proj.containerElm = $('#thumbContainer');
		
		// image frame will hold selected image in a way that effects can be applied to it
 		var imgFrame = $(document.createElement('div')).attr('id', 'mainImageFrame');
		proj.imgFrame = $(document.createElement('a')).prependTo(imgFrame);
		proj.imgFrame.click(function(e){
			e.preventDefault();
		});
		
		// add page image to frame
		proj.imgFrame.css('backgroundImage', containerElm.css('backgroundImage'));
		containerElm.css('backgroundImage', '');
		containerElm.addClass('dynamic');
		
		proj.enlargeElm = $('#enlargeImage');

		proj.containerElm.prepend($('#products'));
		proj.containerElm.prepend(proj.thumbnailNav);
		proj.containerElm.prepend(proj.thumbnailBackingElm);
		containerElm.prepend(proj.enlargeElm);
		containerElm.prepend(proj.collectionNav);
		containerElm.prepend(imgFrame);
		proj.containerElm.prependTo(containerElm);
		
		// generate scrolling backings for tabs
		var windows = $('.dynamicContentDivs');
		windows.each(function(i, elm) {
			var elm = $(elm);
			var backingElm = $(document.createElement('div')).addClass('backing');
			var contentsElm = $(document.createElement('div')).addClass('content');
			var closeWindowElm = $(document.createElement('div')).addClass('close');
			var contents = elm.children();
			closeWindowElm.text('X');
			backingElm.css('opacity', 0);
			contentsElm.css('opacity', 0);
			closeWindowElm.css('opacity', 0);
			backingElm.height(elm.height());
			closeWindowElm.prependTo(elm);
			contentsElm.prependTo(elm);
			backingElm.prependTo(elm);
			contentsElm.append(contents);
			// save for later
			var id = elm.attr('id');
			proj.backingElms[id] = backingElm;
			proj.contentElms[id] = contentsElm;
			proj.closeWindowElms[id] = closeWindowElm;
		});

		// main banner
		proj.descElm = proj.viewElm.find('#project-desc');
		proj.logoGalleryElm = proj.thumbsElm.find('ol');
		
		proj.mainImage = proj.viewElm.find('#project-display');
		
		// remove all click link outlines
		proj.canvasElm.find('a').css('outline', 'none');

		// loading
		proj.loadingElm = $(document.createElement('div')).attr('id', 'productLoading');
		proj.loadingElm.text('LOADING');
		proj.loadingElm.appendTo(proj.containerElm);
		
		// tabs
		this.buildTabs();
		
		// scrolling wrapper
		proj.thumbsWrapperElm = $(document.createElement('div')).attr('class', 'wrapper');
		
		proj.products = proj.thumbsElm.find('ol');
		proj.productsElms = proj.products.find('li');
		proj.productCount = proj.productsElms.length - 1;
		proj.thumbnailIndex = 0;
		
		// exit if no products are set
		if ($('#products img').length == 0) {
			return;
		}		
				
		// product thumbnail frames
		proj.productsElms.each(function(i,elm){
			var a = $(elm).find('a');
			var isSelected = ($(this).find('strong').length > 0);
			var border = $(document.createElement('div'));
			border.addClass('frame');
			if (isSelected) {
				// update selection index
				proj.thumbnailIndex = i;
				border.addClass('selected');
				proj.originalSelection = elm;
				// proj._ie6SelectItem(elm);
			}
			else {
				// proj._ie6DeselectItem(elm);
			}
			border.hover(function(){
				$(this).addClass('hover');
			},function(){
				$(this).removeClass('hover');
			});
			$(a).prependTo(border);
			border.prependTo(elm);
			a.parent().click(proj.selectImage);
		});
		if (proj.productsElms.length > 0) {
			proj.loadImageInfo(proj.productsElms[proj.thumbnailIndex]);
		}
		// external lightbox and scroll functionality
		if (proj.hasLightbox)
			proj.imgFrame.lightBox();
		
		// image navigation
		proj.galleryNextElm = $('#nextThumb');
		proj.galleryPrevElm = $('#previousThumb');
		proj.collectionNextElm = $('#nextImage');
		proj.collectionPrevElm = $('#previousImage');
		
		// proj.setSelectedIndex(proj.thumbnailIndex, true);
		
		// image navigation effects
		var imageNavLinks = proj.collectionNav.find('li');
		proj.enlargeElmNav = proj.enlargeElm.find('a');
		proj.enlargeElmNav.css('opacity', proj.enlargeNavNormalOpacity);
		
		imageNavLinks.css('opacity', proj.collectionNavNormalOpacity);
		imageNavLinks.mouseover(function(){
			$(this).animate({ opacity: proj.collectionNavHighlightOpacity }, 'fast');
		});
		imageNavLinks.mouseout(function(){
			$(this).animate({ opacity: proj.collectionNavNormalOpacity }, 'fast');
		});
		imageNavLinks.mousedown(function(){
			$(this).css('opacity', proj.collectionNavActiveOpacity);
		});
		imageNavLinks.mouseup(function(){
			$(this).css('opacity', proj.collectionNavHighlightOpacity);
		});
		proj.enlargeElmNav.mouseover(function(){
			$(this).animate({ opacity: proj.enlargeNavHighlightOpacity }, 'fast');
		});
		proj.enlargeElmNav.mouseout(function(){
			$(this).animate({ opacity: proj.enlargeNavNormalOpacity }, 'fast');
		});
		
		// proj._ie6SelectItem = function(elm){
		// 	if (proj.isIE6) {
		// 		// $(elm).css('border-color', 'red');
		// 	}	
		// };
		// 
		// proj._ie6DeselectItem = function(elm){
		// 	if (proj.isIE6) {
		// 		// $(elm).css('border-color', '');
		// 	}	
		// };
		
		// collection navigation events
		proj.collectionNextElm.click(function(e){
			e.preventDefault();
			if (proj.hasNext()) {
				proj.scrollRight();
				proj.setSelectedIndex(proj.thumbnailIndex + 1);
			}
		});
		proj.collectionPrevElm.click(function(e){
			e.preventDefault();
			if (proj.hasPrevious()) {
				proj.scrollLeft();
				proj.setSelectedIndex(proj.thumbnailIndex - 1);
			}
		});
		proj.enlargeElmNav.click(function(e){
			e.preventDefault();
			$('#mainImageFrame a').click();
		});
		
		// thumbnail navigation events	
		proj.galleryNextElm.click(function(e){
			e.preventDefault();
			proj.scrollRight();
		});
		proj.galleryPrevElm.click(function(e){
			e.preventDefault();
			proj.scrollLeft();
		});
		proj.galleryNextElm.mousedown(function(e){
			proj.mouseIsDown = true;
			window.setTimeout(function(){
				if (proj.mouseIsDown) {
					proj.skipClickAction = true;
					proj._beginRightScrolling();
				}
				else {
					proj.skipClickAction = false;
				}
			}, 200);
		});
		proj.galleryNextElm.mouseup(function(e){
			proj.mouseIsDown = false;
			proj._stopScrolling();
		});
		proj.galleryPrevElm.mousedown(function(e){
			proj.mouseIsDown = true;
			window.setTimeout(function(){
				if (proj.mouseIsDown) {
					proj.skipClickAction = true;
					proj._beginLeftScrolling();
				}
				else {
					proj.skipClickAction = false;
				}
			}, 200);
		});
		proj.galleryPrevElm.mouseup(function(e){
			proj.mouseIsDown = false;
			proj._stopScrolling();
		});
		
		proj.closeAllWindows();
		
		// put everything together
		proj.logoGalleryElm.prependTo(proj.thumbsWrapperElm);
		proj.thumbsWrapperElm.prependTo(proj.thumbsElm);
		proj.updateControls();
	};
	this.buildTabs = function(){
		proj.tabElms = proj.canvasElm.find('div.right li');
		proj.tabElms.click(function(e){
                    if($(this).attr('id') != "shoppingcart") {
			e.preventDefault();
                    }
		});
		// thumbnails
		proj.canvasElm.find('#thumbnailsToggle').not('.disabled').click(function(){
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('thumbContainer');
				proj.selectTab(parent);
				$('#products').fadeIn();
				$('#thumbnailNav').fadeIn();
				proj._scrollToItem(proj.originalSelection);
				proj._calcWidths(proj.originalSelection);
			}
			else {
				proj.closeAllWindows();
			}
		});
		// image info
		proj.canvasElm.find('#imageinfoToggle').not('.disabled').click(function() {
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('imageInfoWindow');
				proj.selectTab(parent);
			}
			else {
				proj.closeAllWindows();
			}
		});
                // price info
		proj.canvasElm.find('#priceToggle').not('.disabled').click(function() {
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('priceWindow');
				proj.selectTab(parent);
			}
			else {
				proj.closeAllWindows();
			}
		});
		// shopping cart
                /*
                 proj.canvasElm.find('#shoppingcartToggle').not('.disabled').click(function() {
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('shoppingcartWindow');
				proj.selectTab(parent);
			}
			else {
				proj.closeAllWindows();
			}
		});
                 */
		proj.canvasElm.find('#collectionsToggle').not('.disabled').click(function() {
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('collectionsWindow');	
				proj.selectTab(parent);
			}
			else {
				proj.closeAllWindows();
			}
		});
                proj.canvasElm.find('#collectablesToggle').not('.disabled').click(function() {
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('collectablesWindow');
				proj.selectTab(parent);
			}
			else {
				proj.closeAllWindows();
			}
		});
                proj.canvasElm.find('#publicationsToggle').not('.disabled').click(function() {
			var parent = $(this).parent();
			if (parent.attr('class') != 'selected') {
				proj.showTabByID('publicationsWindow');
				proj.selectTab(parent);
			}
			else {
				proj.closeAllWindows();
			}
		});
 	};
	this.closeAllWindows = function(){
		$('.right .selected').removeClass('selected');
		$('#thumbnailNav').fadeOut(100);
		var animateAttrs = { opacity: 0, height: 0 };
		$('.content').hide();
		$('.content').css('opacity', 0);
		$('.backing').animate(animateAttrs, 400);
		$('#products').fadeOut(300);		
	};
	this.showTabByID = function(id){
		proj.closeAllWindows();
		var backingElm = proj.backingElms[id];
		var contentElm = proj.contentElms[id];
		var closeElm = proj.closeWindowElms[id];
		var animateHeightTo = proj.windowHeights[id];
		var elms = backingElm.add(contentElm);
		if (typeof backingElm != 'undefined' && typeof contentElm != 'undefined' && typeof closeElm != 'undefined') {
			contentElm.show();
			backingElm.animate({ opacity: proj.backingNormalOpacity, height: animateHeightTo }, 400, function(){
				contentElm.animate({ opacity: 1 }, 100, function(){
					closeElm.animate({ opacity: 1 });
					if (backingElm.parent().attr('id') == 'imageInfoWindow') {
                                                $('.scroll-pane').jScrollPane({showArrows:true});
					}
                                        if(backingElm.parent().attr('id') == 'priceWindow') {
                                                $('.scroll-pane2').jScrollPane({showArrows:true});
					}
				});
			});
		}
	};
	this.selectTab = function(tab){
		var tab = $(tab);
		proj.tabElms.removeClass('selected');
		tab.addClass('selected');
	}; 	
	// thumbnail selection
	this.selectImage = function(e) {
		e.preventDefault();
		var elm = $(this).parent();
		proj.setSelectedIndex(proj.productsElms.index(elm[0]));
	};
	this.setSelectedIndex = function(index, ignoreTransition){
		var product = proj.productsElms[index];
		if (typeof product != 'undefined') {
			product = $(product);
			proj.thumbnailIndex = index;
			proj.closeAllWindows();
			proj.startLoading();
			proj.loadImageInfo(product, proj.finishLoading);
			// remove existing selections
			proj.productsElms.find('div.selected').each(function(i,selected){
				$(selected).removeClass('selected');
			});
			product.find('div').addClass('selected');
			proj.updateControls();
		}
	};
	this.loadImageInfo = function(elm, loadCallback){
		var ID = $(elm).find('a').attr('id').replace(/product/, '');
                
                $('#shoppingcartToggle').attr('href','/add/'+ ID + '/');

		$.getJSON(proj.ajaxBaseURL + ID, function(req) {
			var img = $(new Image);
			proj.product = req;
			if (typeof loadCallback != 'undefined') {
				img.load(loadCallback);
			}
			img.attr('src', proj.product.imageWideSRC);
			if (!proj.isFrameViewer) {
				$('#imageInfoWindow div.content').html($(proj.product.info));
			}
			//$('#shoppingcartWindow div.content').html($(proj.product.cart));
                        $('#priceWindow div.content').html($(proj.product.price));
			if (proj.hasLightbox) {
				proj.imgFrame.attr('href', proj.product.imageFullSRC);
				proj.imgFrame.click(function(){
					proj.closeAllWindows();
				});
			}
		});
	};
	// loading 
	this.startLoading = function(){
		proj.loadingElm.fadeIn();
	};
	// load image details when finished loading
	this.finishLoading = function(ignoreTransition){
		proj.loadingElm.fadeOut();
			proj.imgFrame.fadeOut('fast', function(){
				proj.imgFrame.css('backgroundImage', 'url(' + proj.product.imageWideSRC + ')');
				proj.imgFrame.css('backgroundRepeat', 'repeat');
				proj.imgFrame.fadeIn('fast');
			});
	};	
	this._beginRightScrolling = function(e){
		proj.isScrolling = true;
		var scroll = 0;
		var availableRight = 0;
		proj.scrollInterval = window.setInterval(function(){
			if (proj._canScrollRight()) {
				scroll = -4;
				availableRight = proj._availableRightScroll();
				if (scroll > availableRight) {
					scroll = availableRight;
				}
				proj.leftOffset += scroll;
				proj.products.css('left', proj.leftOffset);
				proj.updateControls();
			}
			else {
				proj._stopScrolling();
			}
		}, 7);		
	};
	this._beginLeftScrolling = function(e){
		proj.isScrolling = true;
		var scroll = 0;
		var availableLeft = 0;
		proj.scrollInterval = window.setInterval(function(){
			if (proj._canScrollLeft()) {
				scroll = 4;
				availableLeft = proj._availableLeftScroll();
				if (scroll > availableLeft) {
					scroll = availableLeft;
				}
				proj.leftOffset += scroll;
				proj.products.css('left', proj.leftOffset);
				proj.updateControls();
			}
			else {
				proj._stopScrolling();
			}		
		});
	};
	this._stopScrolling = function(){
		window.clearInterval(proj.scrollInterval);
		proj.isScrolling = false;
	};
	this.scrollRight = function(){
		// skip sliding if this was triggered after mousedown
		if (proj.skipClickAction) {
			proj.skipClickAction = false;
			return;
		}
		var scroll = 0;
		var availableRight = 0;
		if (proj._canScrollRight()) {
			scroll = proj.scrollAmount;
			availableRight = proj._availableRightScroll();
			if (scroll > availableRight)
				scroll = availableRight;
		}
		proj.leftOffset -= scroll;
		proj.products.animate({ left: proj.leftOffset }, 300);
		proj.updateControls();
	};
	this.scrollLeft = function(e){
		// skip sliding if this was triggered after mousedown
		if (proj.skipClickAction) {
			proj.skipClickAction = false;
			return;
		}
		var scroll = 0;
		var availableRight = 0;
		if (proj._canScrollLeft()) {
			scroll = proj.scrollAmount;
			availableLeft = proj._availableLeftScroll();
			if (scroll > availableLeft)
				scroll = availableLeft;
		}
		proj.leftOffset += scroll;
		proj.products.animate({ left: proj.leftOffset }, 300);
		proj.updateControls();
	};
	// thumbnail scrolling
	this._canScrollLeft = function(){
		return (-proj.leftOffset > 0);
	};
	this._canScrollRight = function(){
		return (proj.itemsTotalWidth > (-proj.leftOffset + proj.itemsViewWidth));
	};
	this._availableRightScroll = function(){
		var leftAfterScroll = -(proj.leftOffset - proj.scrollAmount) + proj.itemsViewWidth;
		var difference = leftAfterScroll - proj.itemsTotalWidth;
		return proj.scrollAmount - difference;
	};
	this._availableLeftScroll = function(){
		var leftAfterScroll = 0 - proj.leftOffset;
		return (leftAfterScroll > 0 ? leftAfterScroll : 0);
	};
	// calculate max amount of scrolling
	this._calcWidths = function(){
		proj.itemsTotalWidth = 0;
		proj.productsElms.each(function(i, elm){
			proj.itemsTotalWidth += $(elm).width() + proj.productMarginRight;
		});
		// remove last additional margin
		proj.itemsTotalWidth -= (proj.productMarginRight);
		proj.updateControls();
		return proj.itemsTotalWidth;
	};
	this._scrollToItem = function(itemElm){
		var width = 0;
		proj.productsElms.each(function(i, elm){
			if (itemElm == elm) {

				proj.leftOffset = -width;
				proj.products.css('left', proj.leftOffset);
				return;
			}
			width += $(elm).width() + proj.productMarginRight;
		});
	};
	this.hasNext = function(){
		return proj.thumbnailIndex < proj.productCount;
	};
	this.hasPrevious = function(){
		return proj.thumbnailIndex > 0;
	};
	this.updateControls = function(){
		// update status current and total pages
		// update navigation
		if (!proj.hasPrevious()) {
			proj.collectionPrevElm.addClass('disabled');
		}
		else {
			proj.collectionPrevElm.removeClass('disabled');
		}
		if (!proj.hasNext()) {
			proj.collectionNextElm.addClass('disabled');
		}
		else {
			proj.collectionNextElm.removeClass('disabled');
		}
		if (!proj._canScrollRight()) {
			proj.galleryNextElm.addClass('disabled');
			proj.galleryNextElm.css('opacity', 0.3);
		}
		else {
			proj.galleryNextElm.removeClass('disabled');
		}
		if (!proj._canScrollLeft()) {
			proj.galleryPrevElm.addClass('disabled');
			proj.galleryPrevElm.css('opacity', 0.3);
		}
		else {
			proj.galleryPrevElm.removeClass('disabled');
		}
	};
	this.init();
};

$(document).ready(function(){
	new Projector($('#products'), $('#mainImage'));
});