/**
 * @author timharwood
 */
//-------------------

var HomeGalleryView = new Class({
    
    Extends: GalleryView,
    Implements: [Events, Options],
    
    options: {
        id: 'HomeGalleryView'+new Date().getTime() + "-" + Math.random(),
        viewContainer: null,
        viewClass: '',
        dataProvider: null,
        debug: false
    },

    initialize: function(options){
        this.parent(options);
    },
    
    build: function(){
        var divOne = new Element('div', {
            id: 'bottom-block'
        });
        var divTwo = new Element('div', {
            id: 'top-block'
        });
        
        this.viewContainer.adopt(divOne, divTwo);

        this.dataProvider.itemsCollection.getItems().each(function(item, index){
            
            var viewElem = new Element('div');
            
            var view = new HomeGalleryItemView({
                viewContainer: viewElem
            });
            
            this.views.push(view);
            view.addDataProvider(item);
            view.reset();
            
            this.viewContainer.adopt(viewElem);
            
        }.bind(this))
  
    },
    
    itemsIndexUpdate: function(e){
       this.showNextView(e)
    },

    showNextView: function(e){
        
        if (this.views.length<1) return;
        
        var nextView = this.views.shift();
        nextView.reset();
        
        this.viewContainer.adopt(nextView.viewContainer);
        this.views.push(nextView);
        nextView.display();
    },
    
    setSize: function(w, h){
        this.views.each(function(el,idx){
            el.setSize(w,h);
        });
    }
    
});

//-------------------

var HomeGalleryItemView = new Class({

    Extends: SelectableItemView,
    Implements: [Events, Options],
    
    options: {
        id: 'HomeGalleryItemView'+new Date().getTime() + "-" + Math.random(),
        viewContainer: null,
        duration: 4000,
        viewClass: 'home-image',
        dataProvider: null,
        elements: 4,
        debug: false
    },
    
    views: [],
    
    initialize: function(options){
        this.parent(options);
    },

    build: function(){

        var duration = this.options.duration/this.options.elements;
        
        for (var i = 0; i < this.options.elements; i++) {
        
            var viewElem = new Element('div');
            viewElem.addClass('image' + (i + 1));
            
            var view = new HomeGalleryStripView({
                viewContainer: viewElem,
                duration:duration,
                delay:i*duration
            });
            this.views.push(view);
            
            view.addDataProvider(this.dataProvider);
            this.viewContainer.adopt(viewElem);    
        }
    },
    
    reset: function(){
        this.views.each(function(elem,index){
            elem.reset()
        }.bind(this));
    },
    
    display: function(){
        this.views.each(function(elem,index){
            elem.display()
        }.bind(this));
    },
    
    setSize: function(w, h){
        this.views.each(function(el,idx){
            el.setSize(w,h);
        });
    }
    
});




//-------------------

var HomeGalleryStripView = new Class({

    Extends: SelectableItemView,
    Implements: [Events, Options],
    
    options: {
        id: 'HomeGalleryStripView'+new Date().getTime() + "-" + Math.random(),
        viewContainer: 'home-image-container',
        duration: 1000,
        delay: 1000,
        viewClass: 'image-container',
        dataProvider: null,
        debug: false
    },
    
    cornerElem: null,
    img: null,
    
    viewFX:null,
    cornerFX:null,
    
    initialize: function(options){
        this.parent(options);
    },
    
    build: function(){
 
        this.img = $(this.dataProvider.options.content.clone());
        
        this.img = Asset.image(this.dataProvider.options.content.get('src'), {
            onLoad: this.imageLoad.bind(this)
        });
       
        
        var viewImg = new Element('div');
        viewImg.addClass('image');
        this.viewFX = this.createFxTween(viewImg,'height');
        
       
        var beforeImg = new Element('div');
        beforeImg.addClass('image-before');
        var beforeTear = new Element('img',{
            src:'/include/images/tear-left.png'
        });
        beforeImg.adopt(beforeTear);
        viewImg.adopt(beforeImg);
        
        var afterImg = new Element('div');
        afterImg.addClass('image-after');
        var afterTear = new Element('img',{
            src:'/include/images/tear-right2.png'
        });
        
        afterImg.adopt(afterTear);
        viewImg.adopt(afterImg);

        viewImg.adopt(this.img);

        this.viewContainer.adopt(viewImg);
        
        
        this.cornerElem = new Element('div');
        this.cornerElem.addClass('corner');
        var corner = new Element('img',{
            src:'/include/images/corner.png'
        });
        
        this.cornerElem.adopt(corner);
        
        this.viewContainer.adopt(this.cornerElem);
        
        this.cornerFX = this.createFxTween(corner,'top');
        this.cornerFX.addEvent('complete',this.cornerComplete.bind(this));

    },
    
    imageLoad:function() {
    	var img = arguments[0];
    	
    	var size = galleryDiv.getSize();
            
        w = size.x;
        h = size.y;
		img.setStyle('height', h);
		img.setStyle('width', 'auto');
		
		
		if(img.getSize().x < w) {
			
			img.setStyle('height', 'auto');
			img.setStyle('width', w);
		}
		
		this.cornerElem.setStyle('height',h);
    },
    
    createFxTween:function(elem,prop) {
        return new Fx.Tween(elem,{
            duration: this.options.duration,
            property: prop,
            unit: '%'
        });
    },
    
    reset: function(){
        this.viewFX.set('0');
        this.cornerFX.set('0');
        this.cornerElem.setStyle('display','none');
    },
    
    display: function(){
        this.start.delay(this.options.delay,this)
    },
    
    start: function(){
        this.viewFX.start('100');
        this.cornerFX.start('100');
        this.cornerElem.setStyle('display','block');
    },
    cornerComplete:function(e){
        this.cornerElem.setStyle('display','none');
    },
    
    setSize: function(w, h){
       this.img.setStyle('height', h);
       this.img.setStyle('width', 'auto');

       if(this.img.getSize().x < w) {
       		this.img.setStyle('height', 'auto');
       		this.img.setStyle('width', w);
       }
     
       this.cornerElem.setStyle('height',h);
    }
    
});

//-------------------