var SliderGallery = Class.create({
    initialize: function(imagePath) {
        this.images = new Array();
        this.current = 0;
        this.currentLegend = 0;
        this.eltim = null;
        this.offset = 0;
        this.pointMax = 10;
        this.sliderPos = 0;
        this.sliderDir = 10;
        this.sliderStarted = false;
        this.slideshowInterval = null;

        this.options = {
            imagePath: imagePath,
            fadeDuration: 0.5
        };


        if($('slider')!=undefined)
            $('slider').remove();
        if($('legend')!=undefined)
            $('legend').remove();

        $('dummytv').style.backgroundColor = '#FFF';
    },

    initHide: function() {
        this.images = $('imageSlider').childElements();
        for(i = 0;i<this.images.size();i++) {
            this.images[i].hide();
        }
        slider = new Element('div',{id:'slider'});
        slider.addClassName('pngfix');
        slider.hide();
        $('dummytv').insert(slider);

    },

    initLegend: function() {
        legend = new Element('div',{id:'legend'});
        legend.addClassName('pngfix');
        text = new Element('p');
        legend.insert(text);
        legend.hide();
        $('dummytv').insert(legend);

        if(this.images[0] != undefined) {
            this.setLegend(this.images[0].down(0).title);
        }
    },

    initControls: function() {
        controls = $('tvcontrols');
        if(this.images.size()>0) {
            $('dummytv').show();
        }
        controls.innerHTML = '';
        points = new Element('div',{id:'imagepoints'});
        arrows = new Element('div',{id:'imagearrows'});
        counter = new Element('div',{id:'imagecounter'});
        fullscreen = new Element('div',{id:'imagefullscreen'});

        controls.insert(arrows);
        controls.insert(counter);

        // draw arrows
        arrows.insert('<a onclick="return false;" href="#" id="tvcontrol-back"><img src="'+this.options.imagePath+'arrow_left_light.jpg" alt="" /></a>');
        arrows.insert(points);
        arrows.insert(fullscreen);
        arrows.insert('<a onclick="return false;" href="#" id="tvcontrol-next"><img src="'+this.options.imagePath+'arrow_right_light.jpg" alt="" /></a>');

        $('tvcontrol-back').observe('click',function(e) {
                sliderGallery.showPrevious();
                sliderGallery.stopSlideshow();
        });
        $('tvcontrol-next').observe('click',function(e) {
                sliderGallery.showNext();
                sliderGallery.stopSlideshow();
        });

        // draw points
        for(i=this.offset;i<this.images.size() && i<this.pointMax+this.offset;i++) {
            slider.show();
            image = this.current == i ? 'point_active.jpg' : 'point.jpg';
            points.insert('<a onclick="return false;" href="#" id="tvcontrol-'+i+'"><img src="'+this.options.imagePath+image+'" alt="" /></a>');
            $('tvcontrol-'+i).observe('click',function(e) {
                sliderGallery.showPicture(e.target.up(0).id.substr(10,3));
                sliderGallery.stopSlideshow();
            });
        }
        $('slider').hide();
    },

    showNext: function() {
        next = parseInt(this.current)+1;
        if(next>=this.images.size()) {
            next = 0;
            this.offset = 0;
        }
        this.showPicture(next);
    },

    showPrevious: function() {
        previous = parseInt(this.current)-1;
        if(previous<0) {
            previous = 0;
        }
        this.showPicture(previous);
    },

    showLegend: function(id) {

        if(id == sliderGallery.current) {
            legendText = $('legend').down(0);
            sliderGallery.setLegend(sliderGallery.images[id].down(0).title);
            $('legend').appear({duration:sliderGallery.options.fadeDuration});
            $('legend').fade({delay:3,duration:sliderGallery.options.fadeDuration});
        }
    },

    showPicture: function(id) {
        //console.log(id+'/off:'+this.offset+'/curr:'+this.current);
        $('tvcontrol-'+this.current).down(0).src=this.options.imagePath+'point.jpg';
        if(id>=parseInt(this.pointMax)+this.offset){
            this.offset += this.pointMax;
            this.initControls();
        }
        if(id<this.offset && id>0){
            this.offset -= this.pointMax;
            this.initControls();
        }
        $('tvcontrol-'+id).down(0).src=this.options.imagePath+'point_active.jpg';

        this.setBorder(id);
        $('imagecounter').innerHTML = parseInt(id)+1+'/'+(this.images.size());
        $('legend').hide();
        
        this.images[id].appear({duration:this.options.fadeDuration});

        if(this.images[id].down(0).title != '') {
            this.showLegend.delay(1,id);
        }
        
        if(this.current != null && this.current != id) {
            window.clearTimeout(this.eltim);

            // no fade effect on format changes (landscape to portrait and portrait to landscape)
            if(this.images[this.current].down(0).style.height != this.images[id].down(0).style.height) {
                this.images[this.current].hide();
            } else {
                this.images[this.current].fade({duration:this.options.fadeDuration});
            }
        }

        this.currentLegend = id;
        this.current = id;

        if(this.images[id].childElements().size() == 2) {
            this.images[this.current].down(2).style.width = '0';
            $('slider').show();

            slider = new Control.Slider('slider','dummytv', {
                  range: $R(1,parseInt(sliderGallery.images[sliderGallery.current].down(0).style.width)),
                  sliderValue: 0,
                  onSlide: function(value) {
                    //opa = Math.round(value)/100;
                    // sliderGallery.images[id].down(1).style.opacity = opa;
                    width = Math.round(value);
                    sliderGallery.images[id].down(2).style.width = width+'px';
                    
                  },
                  onChange: function(value) { 
                    width = Math.round(value);
                    sliderGallery.images[id].down(2).style.width = width+'px';
                  }
            });

            if($('slider').style.display!= 'none' && !this.sliderStarted) {
                sliderGallery.sliderTimeout = window.setTimeout(function() {

                    sliderGallery.sliderVal = window.setInterval(function(){
                        sliderGallery.sliderPos += parseInt(sliderGallery.sliderDir);
                        if(sliderGallery.sliderPos<=0) {
                            window.clearInterval(sliderGallery.sliderVal);
                            sliderGallery.sliderPos = 0;
                            sliderGallery.sliderDir = 0;
                        }
                        else if(sliderGallery.sliderPos>=$('dummytv').getWidth()) {
                            sliderGallery.sliderDir *= -1;
                        }
                        slider.setValue(sliderGallery.sliderPos);
                        
                    },30);
                },1000);
                sliderGallery.sliderStarted = true;
            }; 
              
        
        }
        else {
            $('slider').hide();
        }

        var imgFound = false;
        var path_sel = this.images[this.current].down(0).down(0).value;
        if(path_sel != undefined) {
            if(this.images) {
                var imgHTML = '';
                for(var i=0;i<this.images.length;i++) {
                    var path = this.images[i].down(0).down(0).value;
                    if(path != undefined) {
                        if(path != path_sel) {
                            imgHTML += '<div style="display:none;"><a href="'+path+'" rel="lightbox[all]" id="tvcontrol-fullscreen"><img src="/system/resources/images/0.gif" alt="" /></a></div>';
                        } else {
                            if(imgFound == false) {
                                imgHTML += '<a href="'+path_sel+'" rel="lightbox[all]" id="tvcontrol-fullscreen"><img src="'+this.options.imagePath+'fullscreen.jpg" alt="" /></a>';
                                imgFound = true;
                            }
                        }
                    }
                }
            }
            $('imagefullscreen').innerHTML = imgHTML;
        }

        $('dummytv').style.backgroundColor = '#FFF';
    },

    setLegend: function(text) {
        $('legend').down(0).innerHTML = text;
    },

    startSlideshow: function() {
        this.slideshowInterval = window.setInterval(function(){
            sliderGallery.showNext();
        },3000);
    },

    stopSlideshow: function() {
        window.clearInterval(this.slideshowInterval);
    },

    setBorder: function(id) {
        var imgHeight = parseInt(this.images[id].down(0).style.height);
        var imgWidth  = parseInt(this.images[id].down(0).style.width);
        var imgBorder = $('tv').getStyle('background-image');

        // Hoch
        if(imgHeight > imgWidth) {

            if(imgBorder != 'url("'+this.options.imagePath+'tv_portrait.png")') {
                $('dummytv').setStyle({
                    height: '504px',
                    width: '291px',
                    marginLeft: '135px'
                });
                $('tv').setStyle({
                    backgroundImage: 'url("'+this.options.imagePath+'tv_portrait.png")',
                    height: '504px',
                    width: '291px'
                });
                // $('legend').setStyle({
                //     width: '257px'
                // });
                $('slider').setStyle({
                    height: '458px',
                    backgroundImage: 'url("'+this.options.imagePath+'slider_h.png")'
                });
                this.legendWidth = 235;
            }
        }

        //Quer
        if(imgHeight < imgWidth) {
            if(imgBorder != 'url("'+this.options.imagePath+'tv_landscape.png")') {
                $('dummytv').setStyle({
                    height: '320px',
                    width: '555px',
                    marginLeft: '0px'
                    });
                $('tv').setStyle({
                    backgroundImage: 'url("'+this.options.imagePath+'tv_landscape.png")',
                    height: '320px',
                    width: '555px'
                });
                // $('legend').setStyle({
                //     width: '520px'
                // });
                $('slider').setStyle({
                    height: '283px',
                    backgroundImage: 'url("'+this.options.imagePath+'slider_q.png")'
                });
                
                this.legendWidth = 500;
            }
            if(this.images[id].down(0).hasClassName('mediaplayer')) {
            this.images[id].down(0).style.top='0';
            this.images[id].down(0).style.marginTop='16px';
            this.images[id].down(0).style.left='16px';
            }
        }
    }
});

$(document).observe('keydown',function(e) {
    switch(e.keyCode) {
        case Event.KEY_RIGHT:
            sliderGallery.showNext();
            sliderGallery.stopSlideshow();
            break;
        case Event.KEY_LEFT:
            sliderGallery.showPrevious();
            sliderGallery.stopSlideshow();
            break;
    }
});