//////////////////////////////////////////////////////////////////////////////////////////////////
/* sLgallery - v1.0 - 6:53 PM 08/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
	@author: kc@slajax.com
	@description: loads all gallery items with opacity effects and invokes onmouse over ajax call which returns large image.
			var sLgalleryOpts = {
					onloadImgDur : 250, // duration of delay between each image load (intro)
					transitionDuration: 250, // the length of the transition
					timer : 0, //timer for onload delay, onloadImgDur is added to t
					imgClass : '.Thumbnail', // thumbnails class
					galClass : 'gallery', // gallery id
					prevContainer: 'DisplayProductImage', //preview conainter div id
					thumbBaseOpacity: 0.7, //opacity of thumbnails when not moused over
					thumbFocusOpacity: 1, //opacity of thumbnails when focused on mouseover
					indicatorSrc:'/skin/shared/images/indicator.gif',
					ajaxPost:'/ajax/product_image.php'
				 };
*/
//////////////////////////////////////////////////////////////////////////////////////////////////
// init options - edit these for your purposes
//////////////////////////////////////////////////////////////////////////////////////////////////

window.addEvent('domready', function(){
			var sLgalleryOpts = {
					onloadImgDur : 50, // duration of delay between each image load (intro)
					transitionDuration: 450, // the length of the transition
					timer : 0, //timer for onload delay, onloadImgDur is added to t
					imgClass : '.Thumbnail', // thumbnails class
					galClass : 'gallery', // gallery id
					relClass: 'RelatedGroups', //related productsw
					prevContainer: 'DisplayProductImage', //preview conainter div id
					thumbBaseOpacity: 0.7, //opacity of thumbnails when not moused over
					thumbFocusOpacity: 1, //opacity of thumbnails when focused on mouseover
					indicatorSrc:'/skin/shared/images/indicator.gif',
					ajaxPost:'/ajax/product_image.php',
					horizontal: true
				 };
				var gallery = new sLgallery(sLgalleryOpts);
});

//////////////////////////////////////////////////////////////////////////////////////////////////
// class - no editing below this line
//////////////////////////////////////////////////////////////////////////////////////////////////

var sLgallery = new Class({
		initialize:function(options){
			this.setOptions(options);
			//this.arrows(options);
			if ( $(this.options.galClass) ){
                this.loadImgFx(options);
			}
		},
		setOptions:function(options){
			this.options = Object.extend({ }, options || {} );
		},
		arrows:function(options){
			var yoffsettop = (window.ie)?10:15;
			var xoffsettop = (window.ie)?0:10;
			var yoffsetbtm = (window.ie)?310:195;
			var xoffsetbtm = (window.ie)?0:0;
			var up = new Element('img').setProperty('src','/admin/skin/cyberplex/icons/up-arrow.gif');

			up.setStyles({'position':'relative',
						 'top':yoffsettop+'px',
						  'left':xoffsettop+'px',
						  'z-index':0
						 }).injectBefore(options.galClass);

			var down = new Element('img').setProperty('src','/admin/skin/cyberplex/icons/down-arrow.gif');
			down.setStyles({'position':'relative',
						    'top': yoffsetbtm+'px',
						    'left':xoffsetbtm+'px',
							'z-index':0
						 }).injectAfter(options.galClass);
		},
		loadImgFx:function(options){
			introFx = [];

			var scroller = new Scroller(options.galClass, {area: 75, velocity: .075});
			$(options.galClass).addEvent('mouseover', scroller.start.bind(scroller));
			$(options.galClass).addEvent('mouseout', scroller.stop.bind(scroller));

			if( $(options.relClass) ){
				var scroller2 = new Scroller(options.relClass, {area: 75, velocity: .075});
				$(options.relClass).addEvent('mouseover', scroller2.start.bind(scroller2));
				$(options.relClass).addEvent('mouseout', scroller2.stop.bind(scroller2));
				}

			$$(this.options.imgClass).each(function(el,k){
				options.timer += options.onloadImgDur;
					introFx[k] = new Fx.Style(el, 'opacity', {duration: options.onloadImgDur, transition: Fx.Transitions.linear});
					introFx[k].start.delay(options.timer, introFx[k], options.thumbBaseOpacity);

					$(el).addEvent('mouseover',function(){
							this.setOpacity(options.thumbFocusOpacity);
							this.style.cursor = 'pointer';
						});

					$(el).addEvent('mouseout',function(){
							this.setOpacity(options.thumbBaseOpacity);
						});

					$(el).addEvent('click',function(){
						new Ajax( options.ajaxPost, {
							 method: 'post',
							 postBody: 'id='+this.id,
							 onComplete: function(rsp){
									fadeImgOut = new Fx.Style(options.prevContainer, 'opacity', {
															  duration: options.transitionDuration,
															  transition: Fx.Transitions.linear,
															  onComplete: function(){
																	$(options.prevContainer).innerHTML = rsp;
																	fadeImgIn = new Fx.Style(options.prevContainer, 'opacity', {duration: options.transitionDuration, transition: Fx.Transitions.linear});
																	fadeImgIn.start(0,1);
																	//Lightbox.init();
															 	 }
															  });
									fadeImgOut.start(1,0);
								}
							  }
							).request();
						});
			});
		}
});