var Gallery = Class.create({

    directory:'',
    container:'',
    width:520,
    height:450,
    navigationBarHeight:100,
    showInfo:true,
    imageHeight:290,
    ismageWidth:350,
    largeImageClass:'imageView',
    sliderHeight:100,
    thumbClass:'thumb',


    initialize: function(conf) {
        Object.extend(this, conf || {});
    //            this.build();
    },

    build: function(){
        this.frameId = this.container+'_frame';

        this.frame = new Element('DIV',{
            id: this.frameId
        });
        this.frame.setStyle({
            position:'relative',
            height:this.height+'px',
            //            width:this.width+'px',
            width:'auto',
            margin:'20px'
        });

        this.largeImageframe = new Element('DIV',{
            id: this.container+'_largeImage'
        });
        this.largeImageframe.setStyle({
            height:this.imageHeight+'px',
            paddingBottom:'5px'
        })
        this.largeImageframe.setStyle({
            height:this.imageHeight+'px',
            position:'relative',
            width:(this.imageWidth+10)+'px',
//            width:'565px',
            paddingBottom:'5px'
        });

        $(this.frame).insert(this.largeImageframe);
        $(this.container).insert(this.frame);

        var thumbsListOuter = new Element('DIV',{
            id:'thumbsListOuter'
        });
        this.leftOuter = new Element('DIV',{
            id:'leftOuter'
        }).update('«');
        this.leftOuter.direction='left'
        
        this.leftOuter.setStyle({
            marginTop:'15px',
            width:25+'px',
            cursor:'pointer',
            border:'1px solid green',
            height:(this.thumbHeight)+'px'
        });
        Event.observe(this.leftOuter,'click', this.naviHandler.bindAsEventListener(this));


        this.rightOuter = new Element('DIV',{
            id:'rightOuter'
        }).update('&raquo');
        this.rightOuter.direction='right'
        this.rightOuter.setStyle({
            marginTop:'15px',
            width:25+'px',
            cursor:'pointer',
            border:'1px solid green',
            height:(this.thumbHeight)+'px'
        });
        Event.observe(this.rightOuter,'click', this.naviHandler.bindAsEventListener(this));
        thumbsListOuter.setStyle({
             marginTop:'15px',
            border:'1px solid white',
            width:(parseInt(this.largeImageframe.style.width)-70)+'px',
            height:(this.thumbHeight+15)+'px',
            overflow:'hidden',
            position:'relative'
           
        //                height:this.imageHeight+10+'px'
        });
        this.thumbsList =  new Element('DIV',{
            id:'thumbsList',
            style:'position:absolute;'
        });
        
        thumbsListOuter.insert(this.thumbsList);

        this.frame.insert(this.leftOuter);
        this.frame.insert(thumbsListOuter);
        this.frame.insert(this.rightOuter);



        var imageCounter = 0;
        this.data.each(function(el){

            imageCounter++;
            var image = new Element('IMG',{
                id:this.container+'_image_'+imageCounter
            });
            image.setStyle({
                position:'absolute',
                maxHeight:this.imageHeight + 'px',
                maxWidth:this.imageWidth + 'px',
                opacity:0
            });
            image.isLoaded=false;

            image.addClassName(this.largeImageClass);
            image.addClassName('galleryImage');

            image.stopObserving( 'load', this.onImageLoaded);
            image.observe('load', this.onImageLoaded.bindAsEventListener(this));
            image.writeAttribute('src',this.directory + el.image+'?'+Math.ceil(Math.random()*100000));

                
            $(this.largeImageframe ).insert(image);


            var thumb = new Element('IMG',{
                src:this.directory+el.thumb+'?'+Math.ceil(Math.random()*100000),
                id:this.container+'_thumb_'+imageCounter,
                className:this.thumbClass
            });
                
            thumb.setStyle({
                width: '100%',
                height:'auto'
            });
            thumb.isLoaded=false;
            
            thumb.observe('click', this.onThumbClicked.bindAsEventListener(this));
            thumb.addClassName('galleryThumb');

            var thumbContainer = new Element('DIV', {
                id:'thumbContainer'
            });
            thumbContainer.setStyle({
                position:'relative',
                border:'1px solid #999999',
                cursor:'pointer',
                height:this.thumbHeight+'px',
                width: this.thumbWidth+'px',
                marginRight:'15px',
                marginBottom:'10px',
//                marginTop:'13px',
                textAlign:'center'            
            });
            thumbContainer.insert(thumb);
            this.thumbsList.insert(thumbContainer);
        }.bind(this));

        this.thumbsList.insert(new Element('DIV',{
            style:'clear:both'
        }));

        var countData  =this.data.length;

        var sliderLenght = this.data.length * (this.thumbWidth+18)
        this.thumbsList.style.width= sliderLenght+'px';
//        var pagingDiv = new Element('DIV',{
//            style:'maring:0;width:0',
//            className:'paging'
//        });


    },
    onImageLoaded:function(event){
        
        var allImagesLoaded = true;
        var element = Event.element(event);
        //        alert(element.id)
        element.isLoaded = true;

        $$("."+this.largeImageClass).each(function(el){
            if(el.isLoaded== false){
                allImagesLoaded = false;
            }
        });

        if(allImagesLoaded){
            this.onAfterImagesLoaded();

        }

    },
    onAfterImagesLoaded:function(){
        
        var images = $$("."+this.largeImageClass);

   

        setTimeout(function() {
            images.each(function(el){
                el.setOpacity(0);
                el.setStyle({
                    marginLeft:-(this.imageWidth/2)+'px',
                    left:'50%',
                    height:this.imageHeight+'px',
                    width:this.imageWidth+'px',
                    visibility:'visible'
                });
            }.bind(this));


            new Effect.Opacity(images[0],{
                from:0,
                to:1
            });

        
        }.bind(this),100);
    },
    onThumbLoaded:function(event){
        var allThumbsLoaded = true;
        var element = Event.element(event);
        element.isLoaded = true;

        $$("."+this.thumbClass).each(function(el){
            if(el.isLoaded== false){
                allThumbsLoaded = false;
            }
        });

        if(allThumbsLoaded){
            this.onAfterThumbLoaded();

        }
    },
    onAfterThumbLoaded:function(){
        //alert('buuu');
        var calWidth=null;

        var widestThumb=0

        setTimeout(function(){
            var listWidth = 0;
            $$("."+this.thumbClass).each(function(el){

                listWidth = listWidth+ this.thumbWidth+20
            }.bind(this));

            this.thumbsList.setStyle({
                width:listWidth+'px'
            });

            $$("."+this.thumbClass).each(function(el){
                el.up().setStyle({
                    width:(this.thumbHeight+15)+'px',
                    height:this.thumbHeight+'px'
                })
                el.setStyle({
                    height:this.thumbHeight+'px',
                    width:this.thumbWidth+'px',
                    visibility:'visible'
                })

            }.bind(this));
        }.bind(this),500);
    },

    naviHandler:function(event){
        var element = Event.element(event);

        if(element.direction=='right'){
            new Effect.Move($('thumbsList'), {
                x: -$('thumbsList').up().getWidth(),
                y: 0,
                mode: 'relative'
            });

        }
        if(element.direction=='left'){
            new Effect.Move($('thumbsList'), {
                x: $('thumbsList').up().getWidth(),
                y: 0,
                mode: 'relative'
            });
        }
    },
    onThumbClicked:function(event){
        var element = Event.element(event);
        var thumbNo = (element.id).replace(/[^0-9]+/g, '');

        var image = $('gal_image_'+thumbNo);

        new Effect.Opacity(image, {
            from: image.getOpacity(),
            to:1
        });

        var images=image.siblings();
        images.each(function(el){
            new Effect.Opacity(el,{
                from:el.getOpacity(),
                to:0
            });
        });
            
    }

});