var QuickLook = new Class({
	initialize: function(element) {
		this.element = element;
		this.trigger = $E('.buttonQuickLook', this.element);
		this.url     = 'includes/popups/popup.quick-look.html'; //change this line to point to quick look html
		this.popup   = $('quickLookPopUp');
		this.setup();
	},
	setup: function() {
		var match = this.element.id.match(/^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/);
		this.productid = match[1];
		this.element.addEvent('mouseenter', this.show.bind(this));
		this.element.addEvent('mouseleave', this.hide.bind(this));
		this.trigger.addEvent('click', this.getProduct.bind(this));
		this.hide();
	},
	show: function(event) {
		this.trigger.setStyle('display', 'block');
		
	},
	hide: function(event) {
		this.trigger.setStyle('display', 'none');
	},
	getProduct: function(event) {
		var params = {
			product_id: this.productid
		}
		var myAjax = new Ajax(this.url, {
			method:     'get',
			data:       Object.toQueryString(params),
			update:     this.popup,
			onComplete: this.showProduct.bind(this)
		});
		myAjax.request();
		event = new Event(event);
		event.stop();
	},
	showProduct: function() {
		this.content = $E('#quickLook', this.target);
		this.handle  = $E('h1', this.content);
		var _top  = (window.getScrollTop()) + 150;
		var _left = (window.getWidth() / 2) - 265;
		this.popup.setStyles({
			display: 'block',
			position: 'absolute',
			top: _top,
			left: _left,
			zIndex: 500
		});
		this.content.setStyle('display', 'block');
		this.content.makeDraggable({handle:this.handle});
		this.popup.addEvent('click', function(event) {
			this.setStyle('zIndex', popIndex++);
			event = new Event(event);
			event.stop();
		});
		document.addEvent('click', this.closeProduct.bind(this));
		$E('.buttonClosePop', this.content).addEvent('click', this.closeProduct.bind(this));
	},
	closeProduct: function(event) {
		this.popup.setStyle('display', 'none');
		document.removeEvent('click', this.closeProduct.bind(this));
		event = new Event(event);
		event.stop();
	}
});

var FeaturedBrands = new Class({
 initialize: function(container) {
 this.container = $(container);
 this.next_btn = $E('a.iconArrowRight', this.container);
 this.prev_btn = $E('a.iconArrowLeft', this.container);
 this.slides = $ES('span.slide', this.container);
 this.delay = 3000;
 this.position = 0;
 this.lock = false;
 if (this.next_btn && this.prev_btn && this.slides) {
 this.setup();
 }
 },
 setup: function() {
 this.next_btn.addEvent('click', this.next.bind(this));
 this.prev_btn.addEvent('click', this.prev.bind(this));
 this.slides.addEvent('mouseenter', this.pause.bind(this));
 this.slides.addEvent('mouseleave', this.play.bind(this));
 this.play();
 },
 update: function(next) {
 if (this.lock) return;
this.slides[this.position].effect('opacity', {duration: 800, onStart: function(){ this.lock = true; }.bind(this)}).start(1,0);
this.position += next;
if (this.position >= this.slides.length) {
this.position = 0;
} else if (this.position <= 0) {
this.position = this.slides.length - 1;
}
this.slides[this.position].effect('opacity', {duration: 1000, onComplete: function(){ this.lock = false; }.bind(this)}).start(0,1);
},
next: function(event) {
 this.update(+1);
 this.stop(event);
 },
 prev: function(event) {
 this.update(-1);
 this.stop(event);
 },
 play: function() {
 this.timer = this.next.periodical(this.delay, this);
 },
 pause: function() {
 $clear(this.timer);
 },
 stop: function(event) {
 if (event) {
 event = new Event(event);
 event.stop();
 }
 }
});

window.addEvent('domready', function(){
	/* create quick look popup */
	if (!$('quickLookPopUp')) {
		new Element('div', {'id': 'quickLookPopUp'}).injectInside(document.body);
	}
	
	/* setup quick look */
	$$('.productThumb').each(function(e) {
		new QuickLook(e);
	});
	
	/* featured brands slideshow */
	$$('.featuredBrands').each(function(e) {
		new FeaturedBrands(e);
	});
	
	/* start sort by drop down */
	if($('sortDropExpand')) {
		var currentSortOption = $('sortCurrentChoice');
		var sortOptions = $$('.sortDropOption');
		var sortDropDown = $('sortDropExpand');
		
		currentSortOption.addEvent('click', function() {
			$(sortDropDown).setStyles({
				display: 'block',
				opacity: 0
			})
			var fadeInDD = new Fx.Style(sortDropDown, 'opacity', {duration: 300,wait:false} );
			fadeInDD.start(0,1);	
		});
		
		$('buttonBrowseSort').addEvent('click', function() {
			$(sortDropDown).setStyles({
				display: 'block',
				opacity: 0
			})
			var fadeInDD = new Fx.Style(sortDropDown, 'opacity', {duration: 300,wait:false} );
			fadeInDD.start(0,1);	
		});
		
		sortOptions.each(function (el) {
			el.addEvent('click', function() {
				$(sortDropDown).setStyles({
					opacity: 100
				})
				var fadeOutDD = new Fx.Style(sortDropDown, 'opacity', {duration: 200,wait:false} );
				fadeOutDD.start(1,0);
				currentSortOption.innerHTML = el.innerHTML;
			});
		});
	}
	/* end sort by drop down */	
});