//////////////////////////////////////////////////////////////////////////////////////////////////
/* 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',
ajaxPath:'/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',
        ajaxPath:'/ajax/product_image.php',
        arrows:false
    };
    var gallery = new sLgallery(sLgalleryOpts);
});

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

var sLgallery = new Class({
    initialize:function(options){
        this.setOptions(options);
        if ( $(this.options.galClass) ){
            this.loadImgFx(options);
        }
        if(options.arrows)	this.arrows(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));

        $(options.galClass).setStyle('cursor', 'n-resize');

        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.ajaxPath, {
                    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
                                }).start(0,1);
                                Lightbox.init();
                            }
                        });
                        fadeImgOut.start(1,0);
                    }
                }
                ).request();
            });
        });
    }
});