window.addEvent('domready', initialize);

function initialize(){
    var Matcher = new DynamicMatcher;
    Matcher.register('.play', Class.Instantiate(PlaySlider));
    Matcher.register('.credits', Class.Instantiate(CreditsSlider));
    Matcher.register('.apppreview a', Class.Instantiate(Zoomer));
    Matcher.register('#navlist a', Class.Instantiate(Slider));
    Matcher.update();
}

var CreditsSlider = new Class({

    initialize: function(element){
        this.element = element;
        this.element.addEvent('click', this.showCredits.bind(this));
    },
    showCredits: function(e){
        e.stop();
        this.credits = this.element.getParent('li').getElement('.credit');

        this.credits.set('morph', {duration: 280});
        this.credits.morph({top: '0'});

        this.minimize = this.credits.getElement('.minimize');
        this.minimize.addEvent('click', this.hideCredits.bind(this));

        return false;
    },
    hideCredits: function(e){
        e.stop();
        this.credits.set('morph', {duration: 280});
        this.credits.morph({top: '254px'});
        return false;
    }

});

var PlaySlider = new Class({

    initialize: function(element){
       this.element = element;
       this.element.setStyle('background', 'url(img/a-'+ this.element.get('class') +'.png) 80px 0px repeat-y');
       this.element.addEvent('mouseover', this.slideIn.bind(this));
       this.element.addEvent('mouseout', this.slideOut.bind(this));
       this.element.addEvent('click', this.createApp.bind(this));
    },

    slideIn: function(e){
       this.element.set('morph', {duration: 230});
       this.element.morph({backgroundPosition: '40px 0', opacity: 1});
    },
    slideOut: function(e){
       this.element.set('morph', {duration: 130});
       this.element.morph({backgroundPosition: '80px 0', opacity: .5});
    },
    createApp: function(e){
        e.stop();

        var uri = new URI(this.element.href);
        var data = uri.get('data');

        new AppCreator({uri: this.element.href, height: data._height, width: data._width});
        
        return false;
    }
});

var Zoomer = new Class({

    initialize: function(element){
       this.element = element;
       this.element.addEvent('mouseover', this.zoomIn.bind(this));
       this.element.addEvent('mouseout', this.zoomOut.bind(this));
       this.element.addEvent('click', this.createApp.bind(this));
    },
    zoomIn: function(e){
       this.element.getElement('img').set('morph', {duration: 80});
       this.element.getElement('img').morph({width:235, height:162, opacity:.3, marginLeft:-10, marginTop:-5});
    },
    zoomOut: function(e){
       this.element.getElement('img').set('morph', {duration: 130});
       this.element.getElement('img').morph({width:214, height:148, opacity:1, marginLeft:0, marginTop:0});
    },
    createApp: function(e){
        e.stop();

        var uri = new URI(this.element.href);
        var data = uri.get('data');

        new AppCreator({uri: this.element.href, height: data._height, width: data._width});

        return false;
    }
});


var Slider = new Class({

    initialize: function(element){
       this.element = element;

       if(this.element.hasClass('active'))
           return;

       this.element.addClass('mouseout');
       this.element.addEvent('mouseover', this.slideIn.bind(this));
       this.element.addEvent('mouseout', this.slideOut.bind(this));
    },

    slideIn: function(e){
       this.element.set('morph', {duration: 280});
       this.element.morph('.mouseover');
    },
    slideOut: function(e){
       this.element.set('morph', {duration: 130});
       this.element.morph('.mouseout');
    }
});