/**
 * Javascript library for template ExtremeMagento EM0007
 * @copyright 2007 Quick Solution LTD. All rights reserved.
 * @author Giao L. Trinh <giao.trinh@quicksolutiongroup.com>
 */

(function() {
	
// EM.tools {{{
	
if (typeof BLANK_IMG == 'undefined') 
	var BLANK_IMG = '';

// declare namespace() method
String.prototype.namespace = function(separator) {
  this.split(separator || '.').inject(window, function(parent, child) {
    var o = parent[child] = { }; return o;
  });
};


'EM.tools'.namespace();
// }}}




// Slideshow {{{

EM.Slideshow = Class.create({
	
	// Default Configuration
	config: {
		thumbnailsId: 'slideshow_thumbnails',
		previewsId: 'slideshow_previews',
		previewWidth: 930,
		previewHeight: 340,
		
		thumbnailWidth: 108,
		thumbnailHeight: 108,
		
		thumbnailHSpace: 10,
		thumbnailVSpace: 10,
		
		interval: 3,
		speed: 1,
		
		thumbnailSpeed: 0.5,
		
		pressingMovement: 10,
		pressingSpeed: 0.02
	},
	
	
	// private
	$$a: [],
	previewsUL: null,
	thumbnaislUL: null,
	autoSlideshowHandler: null,
	direction: 1,
	idx: 0,
	prevEl: null,
	nextEl: null,
	
	initialize: function(config) {
		// override default config
		Object.extend(this.config, config);
		
		// retrieve all <a> elements
		this.$$a = Element.select(this.config.thumbnailsId, 'a');
		
		// create <ul> in preview div
		var ul = new Element('ul');
		$(this.config.previewsId).makeClipping().makePositioned()
			.setStyle({ height: this.config.previewHeight + 'px' })
			.insert(ul);
		ul.setStyle({ 
			width: this.config.previewWidth * this.$$a.length + 'px',
			height: this.config.previewHeight + 'px'
		});
		
		// make shortcuts
		this.previewsUL = ul;
		this.thumbnailsUL = Element.down(this.config.thumbnailsId, 'ul');
		
		
		// set thumbnails container' width
		$(this.config.thumbnailsId).makeClipping().makePositioned()
			.setStyle({ height: this.config.thumbnailHeight + this.config.thumbnailVSpace + 'px' })
			.down('ul').setStyle({ 
				width: this.config.thumbnailWidth * this.$$a.length + this.config.thumbnailHSpace * (this.$$a.length - 1) + 'px',
				height: this.config.thumbnailHeight + this.config.thumbnailVSpace + 'px'
			});
		
		// add padding for all thumbnail <li>
		Element.select(this.config.thumbnailsId, 'li').each(function(li, i) {
			li.setStyle({ 
				paddingLeft: (i == 0 ? 0 : this.config.thumbnailHSpace) + 'px',
				paddingTop: this.config.thumbnailVSpace + 'px'
			});
		}.bind(this));
		
		
		this.createPrevBtn();
		this.createNextBtn();
		
		
		
		// foreach <a> in thumbnails container
		this.$$a.each(function(a) {
			// create preview img element
			var li = new Element('li');
			var ta = new Element('a');
			ul.insert(li);
			li.insert(ta);
			ta.writeAttribute('target', '_blank');
			ta.setAttribute('href', a.name);
			ta.insert(new Element('img', {src: a.href, title: "", alt: ""}));
			
			// Bind <a>'s click event to change preview image accordingly
			Event.observe(a, 'click', function(event) {
				var i = this.$$a.indexOf(a);
				
				if (i > this.idx) this.direction = 1;
				else if (i < this.idx) this.direction = -1;
				
				this.slideTo(i);
				Event.stop(event);
			}.bind(this));
			
		}.bind(this));
		
		this.autoSlideshowHandler = new PeriodicalExecuter(this.autoSliding.bind(this), this.config.interval);
	},
	
	createPrevBtn: function() {
		this.prevEl = new Element('a', { href: '#prev' });
		this.prevEl.addClassName('slideshow-prev-btn'); // for IE8
		Element.insert(this.config.thumbnailsId, { before: this.prevEl });
		this.prevEl.insert(new Element('img', { src: this.config.previousImg, alt: "Previous", title: "Previous" }));
		
		var handler;
		
		this.prevEl.observe('mousedown', function(event) {
			
			handler = new PeriodicalExecuter(function(pe) {
				var x = Element.positionedOffset(this.thumbnailsUL).left;
				if (x < 0)
					Element.setStyle(this.thumbnailsUL, { left: Math.min(x + this.config.pressingMovement, 0)+'px' });	
				else {
					pe.stop();
					handler = null;
				}
			}.bind(this), this.config.pressingSpeed);

		}.bind(this));
		
		this.prevEl.observe('mouseup', function(event) {
			if (handler) {
				handler.stop();
				handler = null;
			}
			Event.stop(event);
		});
	},
	
	createNextBtn: function() {
		this.nextEl = new Element('a', { href: '#next' });
		this.nextEl.addClassName('slideshow-next-btn'); // for IE8
		Element.insert(this.config.thumbnailsId, { before: this.nextEl });
		this.nextEl.insert(new Element('img', { src: this.config.nextImg, alt: "Next", title: "Next" }));
		
		var handler;
		var d = Element.getWidth(this.config.thumbnailsId) - Element.getWidth(this.thumbnailsUL);
		
		this.nextEl.observe('mousedown', function(event) {
			
			handler = new PeriodicalExecuter(function(pe) {
				var x = Element.positionedOffset(this.thumbnailsUL).left;
				
				if (x > d) {
					x -= this.config.pressingMovement;
					if (x < d) x = d;
					Element.setStyle(this.thumbnailsUL, { left: x+'px' });	
				}
				else {
					pe.stop();
					handler = null;
				}
				
			}.bind(this), this.config.pressingSpeed);

		}.bind(this));
		
		this.nextEl.observe('mouseup', function(event) {
			if (handler) {
				handler.stop();
				handler = null;
			}
			Event.stop(event);
		});
	},
	
	slideTo: function(idx) {
		this.idx = idx;
		new Effect.Move(this.previewsUL, { x: -idx * this.config.previewWidth, mode: 'absolute', duration: this.config.speed });
		
		this.slideThumbnail(idx);
	},
	
	slideThumbnail: function(idx) {
		var w = Element.getWidth(this.config.thumbnailsId);
		
		var left = Element.positionedOffset(this.thumbnailsUL).left;
		var newLeft = left;
		
		var thumbnailLeft = idx * (this.config.thumbnailWidth + this.config.thumbnailHSpace);
		
		if (newLeft + thumbnailLeft < 0) 
			newLeft = -thumbnailLeft;
		
		if (thumbnailLeft + this.config.thumbnailWidth > w - newLeft)
			newLeft = w - (thumbnailLeft + this.config.thumbnailWidth);
		
		if (newLeft != left)
			new Effect.Move(this.thumbnailsUL, { x: newLeft, mode: 'absolute', duration: this.config.thumbnailSpeed });
	},
	
	autoSliding: function(pe) {
		if (this.direction > 0 && this.idx == this.$$a.length - 1 || this.direction < 0 && this.idx == 0) 
			this.direction = -this.direction;

		this.slideTo(this.idx + this.direction);
	}
	
	// createPreviewNextElement: function() {
	// 	if (Object.isUndefined(this.config.previewNextId)) 
	// 		this.config.previewNextId = this.config.previewId + '_next';
	// 	
	// 	var previewNext = $(this.config.previewNextId);
	// 	if (!previewNext) {
	// 		previewNext = new Element('img', { id: this.config.previewNextId, src: BLANK_IMG, alt: "", title: "" });
	// 		Element.insert(this.config.previewId, { after: previewNext });
	// 	}
	// 	
	// 	
	// },
	// 
	// createPreviewPrevElement: function() {
	// 	if (Object.isUndefined(this.config.previewPrevId)) 
	// 		this.config.previewPrevId = this.config.previewId + '_prev';
	// 	
	// 	var previewPrev = $(this.config.previewPrevId);
	// 	if (!previewPrev) {
	// 		previewPrev = new Element('img', { id: this.config.previewPrevId, src: BLANK_IMG, alt: "", title: "" });
	// 		Element.insert(this.config.previewId, { before: previewPrev });
	// 	}
	// },
	// 
	// loadPreview: function(current) {
	// 	var idx = this.$$a.indexOf(current);
	// 	var next = this.$$a[ idx == this.$$a.length - 1 ? 0 : idx + 1 ];
	// 	var prev = this.$$a[ idx == 0  ? this.$$a.length - 1 : idx - 1 ];
	// 	
	// 	$(this.config.previewId).src = current.href;
	// 	$(this.config.previewNextId).src = next.href;
	// 	$(this.config.previewPrevId).src = prev.href;
	// }
});
	
// }}}

function decorateMenuWidth() { 
hoverCatalog();
ShowVisiblePage();
var k;
var newcontent = $("li.item ");
var divmax=newcontent.down('h3').getHeight()+newcontent.down('h4').getHeight();
for(k=2;k<=16;k++)
{

newcontent = $('newcontent'+k);
divheight=newcontent.down('h3').getHeight()+newcontent.down('h4').getHeight();

if(divmax < divheight)
{ 
divmax=divheight;
}
}
var heightdiv=divmax+150;
var newproduct = $('newproduct');
var newproductli = $$('#newproduct li');
newproductli.each(function(li) { 
li.down('.newcontent').setStyle('height:'+heightdiv+'px'); 
});
}
document.observe("dom:loaded", function() {
   decorateMenuWidth();
});


})();