/**
 * @author timharwood
 */
var PageGalleryView = new Class({

    Extends: GalleryView,
    Implements: [Events, Options, Chain],
    
    options: {
        id: 'PageGalleryView' + new Date().getTime() + "-" + Math.random(),
        margin: 25,
        viewClass: '',
        thumbnails: true,
        caption: true,
        arrows: true,
        autoHideCaption: true,
        autoHideArrows: false,
        hasMaxWidth: true,
        hasMaxHeight: true,
        dataProvider: null,
        nextLink: null,
        prevLink: null,
        debug: false
    },
    
    initialize: function(options){
        this.parent(options);
    },
    
    gallery: null,
    galleryFX: null,
    inf: null,
    
    thumbnails: null,
    caption: null,
    
    arrowLeft: null,
    arrowRight: null,
    
    maxHeight: null,
    maxWidth: null,
    
    currentView: null,
    
    firstSet: true,
    
    build: function(){
    
        this.gallery = new Element('div', {
            'class': 'gallery',
            'styles': {
                'width': '1px',
                'height': '1px'
            }
        });
        this.galleryFX = new Fx.Morph(this.gallery, {
            duration: 'normal',
            unit: 'px'
        });
        this.galleryFX.addEvent('complete', this.sizeUpdated.bind(this));
        
        
        if (this.options.arrows) {
            this.arrowLeft = new Element('div', {
                'class': 'arrow-left'
            });
            this.arrowLeft.addEvent('click', this.selectDataPrevious.bind(this));
            
            this.arrowRight = new Element('div', {
                'class': 'arrow-right'
            });
            this.arrowRight.addEvent('click', this.selectDataNext.bind(this));
            
            if (this.options.autoHideArrows) {
              this.arrowRight.addClass('autoHide');
              this.arrowLeft.addClass('autoHide');
            }
            
            this.gallery.adopt(this.arrowLeft, this.arrowRight);
        }
        
        
        if (this.options.thumbnails || this.options.caption) {
        
            this.inf = new Element('div', {
                'class': 'info'
            });
            
            if (this.options.autoHideCaption) {
              this.inf.addClass('autoHide');
            }
            
            
            this.inf.setStyle('display', 'block');
            this.inf.setStyle('opacity', 1);
                
            var title = new Element('div', {
                'class': 'brand-title'
            });
            var ttl = document.title;
            
            title.set('text', ttl.substr(10));
            this.inf.adopt(title);
            
            if (this.options.caption) {
                this.caption = new Element('div', {
                    'class': 'caption'
                });
                this.inf.adopt(this.caption);
            }
            
            if (this.options.thumbnails) {
                this.thumbnails = new Element('div', {
                    'class': 'thumbnails'
                });
                
                this.inf.adopt(this.thumbnails);
            }
            
            this.gallery.adopt(this.arrowLeft, this.arrowRight, this.inf);
            
        }
        
        
        
        this.dataProvider.itemsCollection.getItems().each(function(item, index){
        
            var viewElem = new Element('div');
            var view = new PageGalleryItemView({
                viewContainer: viewElem
            });
            view.addEvent('select', this.setCurrentView.bind(this));
            view.addEvent('load', this.viewLoad.bind(this));
            
            this.views.push(view);
            view.addDataProvider(item);
            
            this.gallery.adopt(viewElem);
            
            if (this.thumbnails) {
                var thumbElem = new Element('img');
                var thumb = new PageGalleryItemThumbView({
                    viewContainer: thumbElem
                });
                thumb.addDataProvider(item);
                
                this.thumbnails.adopt(thumbElem);
            }
            
            
        }.bind(this))
        
        this.viewContainer.adopt(this.gallery);
        
        this.itemsIndexUpdate();
        
        try {
            Cufon.refresh();
        } 
        catch (e) {
        
        }

    },
    
    beginInf: function(){
        var inf = this.inf;
        if (!inf || inf.getStyle('opacity')<1 || !this.options.autoHideCaption) return;

        var myFx = new Fx.Tween(inf, {
            property: 'opacity'
        });
        
        myFx.start(0).chain( function(){
            inf.erase('style');
        });
        
    },
    
    selectDataPrevious: function(e){
        this.dataProvider.stop();
        if (this.dataProvider.itemsCollection.hasPrev()) {
            this.dataProvider.itemsCollection.prevItem();
        }
        else 
            if (this.options.prevLink) {
                location.href = this.options.prevLink;
            }
    },
    
    selectDataNext: function(e){
        this.dataProvider.stop();
        if (this.dataProvider.itemsCollection.hasNext()) {
            this.dataProvider.itemsCollection.nextItem();
        }
        else 
            if (this.options.nextLink) {
                location.href = this.options.nextLink;
            }
    },
    
    setCurrentView: function(e){
        this.currentView = e.target;
        this.updateSizes();
    },
    
    viewLoad:function(e){
        var func = function(){
            this.beginInf();
        }.delay(1000, this);
    },
    
    itemsIndexUpdate: function(e){
    
        var ndisplay = (this.dataProvider.itemsCollection.hasNext() || this.options.nextLink);
        var pdisplay = (this.dataProvider.itemsCollection.hasPrev() || this.options.prevLink);
        
        if (ndisplay) {
            this.arrowRight.erase('style');
        }
        else {
            this.arrowRight.setStyle('display', 'none');
        }
        
        if (pdisplay) {
            this.arrowLeft.erase('style');
        }
        else {
            this.arrowLeft.setStyle('display', 'none');
        }
        
        
        this.updateCaption();
    },
    
    updateCaption: function(){
        if (this.caption) {
            this.caption.empty();
            var itm = this.dataProvider.itemsCollection.getCurrentItem();
            if (itm) this.caption.set('text', itm.getContent().get('alt'));
        }
    },
    
    setSize: function(w, h){
    
        this.maxWidth = (this.options.hasMaxWidth) ? w : -1;
        this.maxHeight = (this.options.hasMaxHeight) ? h : -1;
        
        this.updateSizes();
        
    },
    
    updateSizes: function(){
    
        if (!this.currentView) 
            return;
        
        var img = $(this.currentView.img);
        
        var w = img.get('width');
        var h = img.get('height');
        
        var newWidth, newHeight, newMargin;
        
        newWidth = (Math.abs(this.maxWidth) - (2 * this.options.margin));
        newHeight = (Math.abs(this.maxHeight) - (4 * this.options.margin))
        newMargin = 0;
        
        
        var wRatio = newWidth / w;
        var hRatio = newHeight / h;
        
        var ratio = (wRatio < hRatio) ? wRatio : hRatio;
        
        if (this.options.hasMaxWidth && this.options.hasMaxHeight) {
            newWidth = Math.round(ratio * w);
            newHeight = Math.round(ratio * h);
            newMargin = (this.maxHeight - newHeight) / 2;
        }
        else {
            if (!this.options.hasMaxWidth) {
                newWidth = Math.round(hRatio * w);
                newHeight = Math.round(hRatio * h);
                newMargin = (this.maxHeight - newHeight) / 2;
            }
            else {
                newWidth = Math.round(wRatio * w);
                newHeight = Math.round(wRatio * h);
                newMargin = (this.maxHeight - newHeight) / 2;
            }
        }
        
        newMargin = (newMargin > 0) ? newMargin : 1;
        
        $(this.currentView.viewContainer).setStyles({
            'height': newHeight,
            'width': newWidth
        });
        
        if (this.firstSet) {
            this.firstSet = false;
            this.galleryFX.set({
                'height': newHeight,
                'width': newWidth,
                'margin-top': newMargin
            });
        }
        else {
            this.galleryFX.start({
                'height': newHeight,
                'width': newWidth,
                'margin-top': newMargin
            });
            
        }
        
        
        
    },
    
    sizeUpdated: function(e){
    
    }
    
});


var PageGalleryItemView = new Class({

    Extends: SelectableItemView,
    Implements: [Events, Options],
    
    options: {
        id: new Date().getTime() + "-" + Math.random(),
        viewContainer: null,
        dataProvider: null,
        duration: 4000,
        viewClass: 'image',
        debug: false
    },
    
    img: null,
    
    build: function(){
    
        this.viewContainer.setStyle('opacity', '0');
        
        var imgsrc = this.dataProvider.getContent().get('src');
        
        this.img = Asset.image(imgsrc, {
            id: 'myImage',
            title: 'myImage',
            onLoad: this.imageLoad.bind(this)
        });
        
    },
    
    imageLoad: function(e){
    
        this.viewContainer.adopt(this.img);
        this.updateDisplay();
        
        this.fireEvent('load', {
                type: 'load',
                target: this
        });
        
        if (this.dataProvider.getSelected()) {
            this.fireEvent('select', {
                type: 'select',
                target: this
            });
        }
    },
    
    dataProviderSelect: function(){
        this.updateDisplay();
        this.fireEvent('select', {
            type: 'select',
            target: this
        });
    },
    
    dataProviderDeselect: function(){
        this.updateDisplay();
    },
    
    updateDisplay: function(){
        var op = (this.dataProvider.getSelected()) ? 1 : 0;
        this.viewContainer.tween('opacity', op);
    }
});

var PageGalleryItemThumbView = new Class({

    Extends: SelectableItemView,
    Implements: [Events, Options],
    
    options: {
        id: new Date().getTime() + "-" + Math.random(),
        viewContainer: null,
        dataProvider: null,
        duration: 4000,
        viewClass: '',
        debug: false
    },
    
    
    build: function(){
        var imgsrc = this.dataProvider.getContent().get('src');
        this.viewContainer.set('src', imgsrc);
        this.viewContainer.addEvent('click', this.selectDataProvider.bind(this));
        this.updateDisplay();
    },
    
    selectDataProvider: function(){
        this.dataProvider.setSelected(true);
    },
    
    dataProviderSelect: function(){
        this.updateDisplay();
    },
    
    dataProviderDeselect: function(){
        this.updateDisplay();
    },
    
    updateDisplay: function(){
        var op = (this.dataProvider.getSelected()) ? 1 : 0.5;
        this.viewContainer.setStyle('opacity', op);
    }
    
    
});

var PageTitle = new Class({

    Implements: [Events, Options],
    
    options: {
        id: new Date().getTime() + "-" + Math.random(),
        element: null,
        childselector: ""
    },
 
    initialize: function(options){
        this.setOptions(options);

        var width = 0;
        if (this.options.element){
            this.options.element.getChildren(this.options.childselector).each(function(el,idx){ 
                var w = el.getStyle('width').toInt();
                width+=w;
            });
            this.options.element.setStyle('width',width);
        }

    }
    
    
});