var $j = jQuery.noConflict();

var urlParams = {};
(function () {
    var e,
        a = /\+/g,  // Regex for replacing addition symbol with a space
        r = /([^&;=]+)=?([^&;]*)/g,
        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
        q = window.location.search.substring(1);

    while (e = r.exec(q))
       urlParams[d(e[1])] = d(e[2]);
})();

var SK = {};

SK.preloader = function(target){
	this.els = $j(target);
	//$j(this.els).fadeTo(0, 0);
	this.animate = (jQuery.support.opacity) ? true : false;
}

SK.preloader.prototype = {
	show: function(){
		if(this.animate) {	
			$j(this.els).fadeIn(400);
		}else {
			$j(this.els).show();
		}
	},
	
	hide: function(){
		if(this.animate) {	
			$j(this.els).fadeOut(400);
		}else {
			$j(this.els).hide();
		}
		
	}
	
}

SK.resizeBg = function(target){
	this.els = $j(target);
	this.bgW = $j(this.els).width();
	this.bgH = $j(this.els).height();
}

SK.resizeBg.prototype = {
	resize: function(){
		var self = this;
		var W = $j(window).width();
		var H = $j(window).height();
		var RW = W/this.bgW;
		var RH = H/this.bgH;
		var imageRatio = 1;
		if(RW>RH){
			imgRatio = RW;
		}else{
			imgRatio = RH;
		}
		$j(this.els).css({
			width: self.bgW*imgRatio,
			height: self.bgH * imgRatio
		});
		if(W > 1000){
			$j('body').css({
				'overflow-x': 'hidden'
			});
		}else{
			$j('body').css({
				'overflow-x': 'auto'
			});
		}
	}
}


SK.thumbArrows = function(target, options){
	var self = this;
	this.els = $j(target);
	
	this.options = $j.extend({
		fadeOutTime: 200,
		fadeInTime: 400
	}, options || {});
	
	this.parentObj = this.options.parent;
	$j(this.els).click(function(e){
		e.preventDefault();
		var isAnimating = self.parentObj.getIsAnimating();
		if(!isAnimating){
			self.parentObj.setIsAnimating(true);
			var arrow = $j(e.target).attr('id');
			switch(arrow){
				case 'left':
					self.parentObj.onArrowClick(-1);
					break;
				case 'right':
					self.parentObj.onArrowClick(1);
					break;
			}
		}
	});
	
}

SK.thumbArrows.prototype = {
	init: function(){		
	},
	hideMe: function(){
		var self = this;
		$j(this.els).fadeOut(self.options.fadeOutTime, function(){
			$j(this).hide();
		});
	},
	
	show: function(){
		var self = this;
		$j(this.els).fadeIn(self.options.fadeInTime);
	}
}

SK.page = function(target, options){
	var self = this;
	this.els = $j(target);
	if(!urlParams.parent){
		$j(this.els).hide();
	}
	this.options = $j.extend({
		
	}, options || {});
}

SK.page.prototype = {
	show: function(){
		if(urlParams.parent){
			$j(this.els).fadeIn(500);
		}else{
			$j(this.els).fadeIn(500);
		}	
	},
	
	hide: function(callback, callbackParams){
		$j(this.els).fadeOut(400, function(){
			if(typeof callback == 'function'){
				callback.call(this, callbackParams);
			}
		});
	}
}

SK.nav = function(target, options){
	var self = this;
	this.els = $j(target);

	this.options = $j.extend({
	}, options || {});
	this.page = this.options.page;
	
	var callback = function(args){
		window.location.href = args.href;
	}
	
	$j('a', this.els).click(function(e){
		e.preventDefault();
		var callbackParams = {href:$j(e.currentTarget).attr('href')};
		self.page.hide(callback, callbackParams);
	})
	
}


SK.nav.prototype = {
	show: function(){
		$j(this.els).fadeIn(700);
	},
	
	hide: function(){
		$j(this.els).fadeOut(400);
	}
}

SK.subnav = function(target, options){
	var self = this;
	this.els = $j(target);

	this.options = $j.extend({
	}, options || {});
	this.page = this.options.page;
	
	var callback = function(args){
		window.location.href = args.href+'?parent=true';
	}
	
	$j('a', this.els).click(function(e){
		e.preventDefault();
		var callbackParams = {href:$j(e.currentTarget).attr('href')};
		self.page.hide(callback, callbackParams);
	})
	
}


SK.subnav.prototype = {
	show: function(){
		$j(this.els).fadeIn(700);
	},
	
	hide: function(){
		$j(this.els).fadeOut(400);
	}
}

SK.resizeThumbs = function(target, options){
	var self = this;
	this.els = $j(target);
	this.aObjs = [];
	this.aObjsLen;
	this.currentImg = -1;
	this.arrows = {};
	this.overlayPanel = {};
	this.isLoaded = false;
	this.isZoomed = false;
	this.isAnimating = false;
	this.isPanelOpen = false;
	this.isPanelAnimating = false;
	this.overlay = {};
	this.globals = {};
	this.bgImg = {};
	this.numLoaded = 0;
	this.animate = true;

	this.options = $j.extend({
		cols: 5,
		rows: 5,//not using currently
		panelOpenTime: 200,
		panelCloseTime: 200,
		imageZoomInTime: 400,
		imageZoomOutTime: 400,
		thumbFadeInTime: 400,
		scrollTopTime: 700
	}, options || {});

	this.init();

}

SK.resizeThumbs.prototype = {
	
	init: function(){
		var self = this;
		this.animate = (jQuery.support.opacity) ? true : false; 
		this.isAnimating = true;
		this.aObjsLen = $j('li', this.els).length;
		
		$j('li', this.els).each(function(i, obj){
			self.preload(obj, i);
		});
				
		this.preloader = new SK.preloader('#preloader');
		this.arrows = new SK.thumbArrows('div.arrow', {parent: this});
		this.overlay = $j('#overlay').hide();
		this.bgImg = $j('#bgImg');
		
		this.preloader.show();
		
		// add listeners
		$j(window).resize(function(e){
			if (self.isLoaded) {
				self.onResize();
			}			
		});
		
		$j(window).scroll(function(e){
			if (self.isLoaded) {
				self.onResize();
			}
		});
		
		$j('li', this.els).click(function(e){
			e.preventDefault();
			if(self.isLoaded){
				var id = $j(e.currentTarget).attr('id');
				if($j(e.target).attr('id') == 'submitBtn'){
					$j('form', this).submit();
					return false;
				}			
				if(!self.isAnimating){
					self.isAnimating = true;
					self.onImgClick(self.aObjs[id]);
				}else{
					return false;
				}
			}
		});
		
		$j('a', this.els).hoverIntent(function(e){
			if(self.isLoaded && !$j(this).parent('li').hasClass('zoomed') && !self.isAnimating){
				self.onThumbOver(e.currentTarget);
			}
		}, function(e){
			if(self.isLoaded && !$j(this).parent('li').hasClass('zoomed') && !self.isAnimating){
				self.onThumbOut(e.currentTarget);
			}
		});
		
		$j('.open-close', this.els).hover(function(e){
			if(!self.isPanelOpen && !self.isPanelAnimating){
				self.isPanelOpen = true;
				self.isPanelAnimating = true;
				self.showPanel(e.currentTarget);
			}else if(!self.isPanelAnimating){
				self.isPanelOpen = false;
				self.isPanelAnimating = true;
				self.hidePanel(e.currentTarget);
			}
		});
	},
	
	preload: function(el, i){
		var self = this;
	
		self.setGlobals();
		var img = $j(el).find('img:not(img.loaded)');
		img.data('src', img.attr('src'));
		img.removeAttr('src');
		if(this.animate){
			img.fadeTo(0, 0);
		}else {
			img.hide();
		}
		
		
		var maxW = (this.globals.w / this.options.cols)-(10 + 10/this.options.cols);
		var maxH = 200;//(this.globals.h / this.options.rows)-(10 + 10/this.options.rows);
		img.one('load', function(e) {
			self.numLoaded++;
			img.addClass('loaded');
			
			var imgSelf = this;
			var temp = $j(this).position();						  
			self.aObjs[i] = {};
			self.aObjs[i].li = el;
			self.aObjs[i].a = $j(el).children('a');
			self.aObjs[i].img = this;
			self.aObjs[i].id = i;
			self.aObjs[i].panel = $j(self.aObjs[i].a).children('div.imageInfo');
			self.aObjs[i].w = $j(this).width();
			self.aObjs[i].h = $j(this).height();
			var rw = self.globals.maxW/self.aObjs[i].w;
			var rh = self.globals.maxH/self.aObjs[i].h;	

			if (rw > rh) {
				img.addClass('setHeight');
			} else {
				img.addClass('setWidth');
			}	
			$j(self.aObjs[i].li).css({
				width: maxW,
				height: maxH
			});

			/*self.onResize(true, i);
			
			$j(self.aObjs[i].img).fadeTo(self.options.thumbFadeInTime, 1);
			
			if(i == self.aObjsLen-1){
				
				self.isLoaded = true;
				self.isAnimating = false;
				self.preloader.hide();
				self.onResize();
			}*/
			//console.log(i);
			if(self.numLoaded >= self.aObjsLen){
				
				self.onResize();
				//self.els.fadeTo(1);
				for (var j =  0; j < self.aObjsLen; j++){
					(function(j){				
						self.aObjs[j].to = setTimeout(function(){
							if(self.animate){
								
								$j(self.aObjs[j].img).fadeTo(self.options.thumbFadeInTime, 1, function(){
									clearTimeout(self.aObjs[j].to);
								});
							}else {
								$j(self.aObjs[j].img).show();
							}
						}, 100*j);
					})(j);
				};
				self.isLoaded = true;
				self.isAnimating = false;
				self.preloader.hide();
			}
			
		});
		img.attr('src', img.data('src'));
	},
	
	onThumbOver: function(obj){
		var self = this;
		$j(obj).css({'z-index':1}).animate({
			top: '-25px',
			left: '-25px',
			height: self.globals.maxH + 50,
			width: self.globals.maxW + 50
		}, 300);
	},
	
	onThumbOut: function(obj){
		var self = this;
		$j(obj).css({'z-index':0}).animate({
			top: '0px',
			left: '0px',
			height: self.globals.maxH,
			width: self.globals.maxW
		}, 100);
	},
	
	setIsAnimating: function(bool){
		this.isAnimating = bool;
	},
	
	getIsAnimating: function(){
		return this.isAnimating;
	},
	
	hidePanel: function(obj, bool){
		var self = this;
		var speed = self.options.panelCloseTime;	
		var panel = $j(obj).parent('.imageInfo');
		if(bool){ speed = 0 }
		$j(panel).animate({
			right: '-200px'
		}, speed, function(){
			$j(obj).removeClass('close');
			self.isPanelAnimating = false;
		});
	},
	
	showPanel: function(obj){
		var self = this;
		var speed = self.options.panelOpenTime;
		var panel = $j(obj).parent('.imageInfo');
		$j(panel).animate({
			right: '0px'
		}, speed, function(){
			$j(obj).addClass('close');
			self.isPanelAnimating = false;
		});
	},
	
	setGlobals: function(){
		this.globals.w = $j(window).width();
		this.globals.h = $j(window).height();
		this.globals.t = $j(window).scrollTop();		
		if(this.globals.w<1000){this.globals.w=1000}
		this.globals.maxW = (this.globals.w / this.options.cols)-(10 + 10/this.options.cols);
		this.globals.maxH = 200;//(this.globals.h / this.options.rows)-(10 + 10/this.options.rows);
	},
	
	resizeThumb: function (obj) {
		var self = this;
		var objPos = $j(obj.li).position();
		var ratio = 1;
		var rw = self.globals.maxW/obj.w;
		var rh = self.globals.maxH/obj.h;						
		if (rw > rh) {
			ratio = rh;
		} else {
			ratio = rw;
		}				
		$j(obj.li).css({
			height: self.globals.maxH,
			width: self.globals.maxW
		});			
		$j(obj.a).css({
			height: self.globals.maxH,
			width: self.globals.maxW
		});
	},
	
	resizeZoomed: function (obj) {
		var self = this;
		var objPos = $j(obj.li).position();
		var ratio = 1;
		rw = self.globals.w/obj.w;
		rh = (self.globals.h-260)/obj.h;	
		if (rw < rh) {
			ratio = rw;
		} else {
			ratio = rh;
		}
		var xPos = (self.globals.w/2 - obj.w*ratio/2) - objPos.left;
		var yPos = ((self.globals.h-260)/2 - obj.h*ratio/2) - objPos.top;
		$j(obj.li).css({
			overflow: 'visible',
			height: this.globals.maxH,//maxW,
			width: this.globals.maxW
		});			
		$j(obj.a).css({
			left: xPos,
			top: self.globals.t + yPos + 130,
			height: obj.h*ratio,
			width: obj.w*ratio
		});
	},

	onResize: function(bool){
		var self = this;
		self.setGlobals();
		var imgRatio = 1;
		if($j(self.overlay).hasClass('active')){
			$j(self.overlay).css({
				'z-index': 0,
				width: self.globals.w,
				height: $j(document).height()
			});
		}
		var bgW = $j(self.bgImg).width();
		var bgH = $j(self.bgImg).height();
		var RW = self.globals.w/bgW;
		var RH = self.globals.h/bgH;
		if(RW>RH){
			imgRatio = RW;
		}else{
			imgRatio = RH;
		}
		$j(self.bgImg).css({
			width: bgW*imgRatio,
			height: bgH * imgRatio
		});
		
		for (var i=0; i < this.aObjsLen; i++) {		
			if(!$j(self.aObjs[i].li).hasClass('zoomed')){							
				self.resizeThumb(self.aObjs[i]);			
			}else{ //obj is zoomed in			
				self.resizeZoomed(self.aObjs[i]);				
			}
		}
	},
	
	onArrowClick: function(id){		
		var temp = this.currentImg += id;
		if(temp < 0){
			temp = this.aObjsLen - 1;
		}
		if(temp > this.aObjsLen-1){
			temp = 0;
		}	
		this.onImgClick(this.aObjs[temp]);
	},
	
	onImgClick: function(obj){	
		var self = this;				
		this.currentImg = obj.id;
		var activeId = $j('li.zoomed').attr('id');
		var hasClass = $j(obj.li).hasClass('zoomed');
		if( hasClass ){
			
			self.zoomOutImage(obj);
		}else if( activeId && activeId !== obj.id){
			

			self.zoomOutImage(this.aObjs[activeId], this.zoomInImage, {obj:obj, close:false});				
		}else{
			
			self.zoomInImage(obj);
		}
			
		
	},
	zoomInImage: function(obj){
		var self = this;	
		var hasScrolled = false; //this takes care of cross browser scrolling problems
		var objPos = $j(obj.li).position();		
		var imgW = obj.w;
		var imgH = obj.h;			
		var rw = this.globals.w/imgW;
		var rh = (this.globals.h-260)/imgH;	
		$j(self.overlay).css({'z-index': 2}).fadeIn('slow').addClass('active');
		$j(obj.a).css({
			'z-index': 10
		});	
		if (rw < rh) {
			ratio = rw;
		} else {
			ratio = rh;
		}
		var xPos = (this.globals.w/2 - imgW*ratio/2) - objPos.left;
		var yPos = ((this.globals.h-260)/2 - imgH*ratio/2) - objPos.top;

		$j('html,body').animate({scrollTop:objPos.top-130}, Math.abs(self.globals.t - objPos.top) + 300, function(){
			if(hasScrolled == false){
				hasScrolled = true;			
				$j(obj.a).animate({
					left: xPos,
					top: self.globals.t + yPos + 130,
					width:imgW*ratio,
					height:imgH*ratio
				}, self.options.imageZoomInTime, function(){
					$j(obj.li).addClass('zoomed');
					self.isAnimating = false;
					if(self.aObjs.length > 1){
						self.arrows.show();
					}		
					$j(obj.panel).show();
					$j(self.overlay).click(function(e){
						//console.log(e.target);
						self.onImgClick(obj);
					});
				});
			}
		}); //animate scroll for thumbs in background
		
	},
	zoomOutImage: function(obj, callback, callbackParams){
		var self = this;
		$j(this.overlay).unbind('click');
		var hasScrolled = false;
		self.isAnimating = true;
		$j(obj.panel).hide();		
		if(callbackParams == undefined){
			$j(self.overlay).css({'z-index': 0}).fadeOut({
				opacity: 0
			}).removeClass('active');
			self.arrows.hideMe();
		}
		var imgW = obj.w;
		var imgH = obj.h;
		var ratio = 1;	
		var rw = this.globals.maxW/imgW;
		var rh = this.globals.maxH/imgH;	
		var objPos = $j(obj.li).position();		
		if (rw > rh) {
			ratio = rh;
		} else {
			ratio = rw;
		}
		$j('html,body').animate({scrollTop:objPos.top-130}, Math.abs(self.globals.t - objPos.top) + 300, function(){
			if(hasScrolled == false){
				hasScrolled = true;	
				$j(obj.a).animate({
					left: '0px',
					top: '0px',
					width: self.globals.maxW,
					height: self.globals.maxH	
				}, self.options.imageZoomOutTime, function(){
					self.isZoomed = false;
					$j(obj.li).removeClass('zoomed');
					$j(obj.a).css({	'z-index':0	});
					if(typeof callback == 'function'){
						callback.call(self, callbackParams.obj);
					}else{
						self.isAnimating = false;
					}
				});
			}
		});//animate scroll for thumbs in background
	}
}




$j(document).ready(function() {

	var resizeBg = new SK.resizeBg('#bgImg');
	resizeBg.resize();
	$j(window).resize(function(e){
		resizeBg.resize();	
	});
	
	var page = new SK.page('div.page');
	var mainNav = new SK.nav('#main-nav', {page: page});
	page.show();
	
	var subpage = new SK.page('#page-copy');
	var subnav = new SK.subnav('#sub-nav', {page: subpage});
	subpage.show()
	
	var isThumbsPage = $j('#resizeList');
	if(isThumbsPage.length>0){
		var thumbs = new SK.resizeThumbs('#resizeList');
	}
		
	
	
	if(postData){
		var photoInfo = "please contact me about the " + postData + " painting.";
		$j('#cf_field_4').html(photoInfo);
	}
	
	
	
});