Event.observe(window, 'load', setupImgs);
        
        
        function setupImgs(){
            TheFlow.Setup();
        }
        
        var BPBFlow = Class.create({
            id : '',
            Imgs : new Array(),
            GrowToFull : 0.25,
            GrowDuration : 250,
            TransDuration : 50,
            CurrentImg : 0,
            LastImg : 1,
            StartImg : 0,
            ThumbMax : 100,
            
            initialize : function(id){
                this.id = id;
                
            },
            
            Setup : function(){
                var ImgArr = $$('.BPBFlow');
                
                if ($('ctl00_ContentPlaceHolder1_CurrentImg')){
                    this.StartImg = $('ctl00_ContentPlaceHolder1_CurrentImg').value;
                }
                
                for (i=0; i<ImgArr.length; i++){
                    ImgArr[i].id = 'Img_' + i;
                    var NewImg = new BPBFlowImg(i, this.ThumbMax, this.GrowToFull);
                    this.Imgs.push(NewImg);
                  //  ImgArr[i].observe('click', this._onImageClick.bindAsEventListener(this));
               }
                
                
                
                this.ChangeIndex(this.StartImg, true);
                
                if ($('BPBFlow_Last')){
                    $('BPBFlow_Last').observe('click', this._onLastClick.bindAsEventListener(this));
                }
                
                if ($('BPBFlow_Next')){
                    $('BPBFlow_Next').observe('click', this._onNextClick.bindAsEventListener(this));
                }         
            },
        
            _onImageClick : function(e){
                var el = Event.element(e);  
                var newIndex = el.id.substring(4, el.id.length)
                this.ChangeIndex(newIndex);
                //alert(newIndex);
            }, 
            
            _onNextClick : function(e){
                if (this.CurrentImg < this.Imgs.length - 1){
                  this.ChangeIndex(parseInt(this.CurrentImg) + 1);  
                }
                
            },
            
            _onLastClick : function(e){
                if (this.CurrentImg > 0){
                  this.ChangeIndex(parseInt(this.CurrentImg) - 1);  
                }
            },           
            
            ChangeIndex : function(newIndex, Init){
                if (Init == null){
                    Init = false;
                }
                
                this.LastImg = this.CurrentImg;
                this.CurrentImg = newIndex;
                                
                var NewPos = 0 - this.CurrentImg;
                var count = this.LastImg;
                var Timer = 0;
                
                while(this.CurrentImg != count){
                    
                    Timer++;
                    
                    if (Timer > this.Imgs.length){
                        this.ChangeIndex(this.Imgs.length - 1, Init);
                        //alert('Breaking Loop, current img:' + this.CurrentImg);
                        break;
                    }
                    if(this.CurrentImg > this.LastImg){count++;}else{count--;}
                    
                    var NewPos = 0 - this.CurrentImg;
                    
                    this.Imgs.each(function(item){
                        item.RotateTo(NewPos, this.GrowToFull, Init);
                        NewPos++;
                    });
                    if ($('ctl00_ContentPlaceHolder1_CurrentImg')){
                        $('ctl00_ContentPlaceHolder1_CurrentImg').value = this.CurrentImg;
                    }
                    
                }
                
                
                
                          
            }
       })
        
       var BPBFlowImg = Class.create({
                id : '',
                index : 0,
                width : 0,
                height : 0,
                th_width : 0,
                th_height : 0,
                resting_x : 0,
                resting_y : 0,
                center_x : 0,
                center_y : 0,
                alt: '',
                src: '',
                initialize : function(newIndex, ThumbMax){
                    this.index = newIndex;
                    this.id = 'Img_' + this.index;
                    
                    this.alt = $(this.id).alt;     
                    this.src = $(this.id).src;     
                    
                    this.width = $(this.id).width;
                    this.height = $(this.id).height;
                    
                    this.th_width = (this.width > this.height) ? ThumbMax : (this.width/this.height)*ThumbMax ;
                    this.th_height = (this.width > this.height) ? (this.height/this.width)*ThumbMax : ThumbMax ;
                                
                    var ConWidth = $('ImgContainer').getStyle('width').replace('px', '');
                    var ConHeight = $('ImgContainer').getStyle('height').replace('px', '');
                    
                    this.center_x = (ConWidth - this.width) / 2;
                    this.center_y = (ConHeight - this.height) / 2;
                    
                    this.resting_x = this.index * (ThumbMax/1.5);
                    this.RotateTo(this.index, 0, true);
                    
                    
                },
                
                 RotateTo : function(NewPosition, MorphDuration, Init){
                    var yDegreeAngle = -10;
                    var yGap = 100;
                    var ySizeReduction = 0.2;
                    var yRadianAngle = (Math.PI / 180) * yDegreeAngle;
                    var Zero_X = parseInt($('ImgContainer').getStyle('width').replace('px', '')) / 2;
                    var Zero_Y = parseInt($('ImgContainer').getStyle('height').replace('px', '')) / 2;
                    var Side = 'Right';
                    if (NewPosition < 0){
                        Side = 'Left'    
                        NewPosition = NewPosition * -1;
                    }
                    
                    var NewWidth = (1-(NewPosition*ySizeReduction))*this.width;
                    var NewHeight = (1-(NewPosition*ySizeReduction))*this.height;
                    
                    if (NewHeight < 0){
                        NewHeight = 0;
                    }
                    
                    if (NewWidth < 0){
                        NewWidth = 0;
                    }
                     
                    this.resting_x = ((NewPosition * yGap) * Math.cos(yRadianAngle));
                    this.resting_y = Zero_Y - (NewHeight/2);
                    
                    if (Side == 'Left'){
                        this.resting_x = Zero_X - (this.resting_x + (NewWidth/2));
                    }else{
                        this.resting_x = Zero_X + this.resting_x - (NewWidth/2);
                    }
                 
                    var FromOp = 1.0 - ((this.index * 3) / 10);
                    var ToOp = 1.0 - ((NewPosition * 3) / 10);
                    
                    if (NewPosition == 0){
                        
                    }
                    
                    if (Init){
                        $(this.id).setStyle({ width: NewWidth + 'px', height: NewHeight + 'px', top: this.resting_y + 'px', left: this.resting_x + 'px', zIndex: (1000 - NewPosition)});
                        $(this.id).setOpacity(ToOp);
                        //new Effect.Opacity($(this.id), { from: FromOp, to: ToOp, duration: 0.1 });
                        if (NewPosition == 0){
                            SelectImage(this.src, this.alt, true);
                        }
                    }else{
                        new Effect.Morph($(this.id), {
                            style: 'width:' + NewWidth + 'px; height: ' + NewHeight + 'px; top: ' + this.resting_y + 'px; left: ' + this.resting_x + 'px;' ,
                            duration: .5
                        });
                        new Effect.Opacity($(this.id), { from: FromOp, to: ToOp, duration: .5 });
                        $(this.id).setStyle({ zIndex: (1000 - NewPosition)});
                        if (NewPosition == 0){
                            SelectImage(this.src, this.alt, false);
                        }   
                    }
                    this.index = NewPosition;
                 }
            })
       
        var TheFlow = new BPBFlow('TheFlow');