// JavaScript Document

var navLine, navLineFx, openDropper, closeDropperTimer, preloadImages;
function loadDOM(pageName) {
	initNavBar.delay(200);
	preloadImages = new Array('/images/popup_back.png');

	switch( pageName ) {
		case 'home':
			new SimpleSlideshow('featured');
			break;
        case 'showart':
            loadShowDOM();
            break;
	}
	new Asset.images(preloadImages);
}

function initNavBar() {
	//Create the navbar slider
	navLine = $('blackline');
	positionNavLine();
    window.addEvent('resize',positionNavLine);

	navLineFx = new Fx.Morph(navLine, {'link':'cancel', 'duration': 350});
	$$("#navbar a").each(function(nlink) {
		//if( !nlink.hasClass("current") ) {
			nlink.addEvents({
				'mouseenter': function() {
					var coords = this.getCoordinates();
					navLineFx.start({'width': coords.width,
													 'left':  coords.left });

					if( this.hasClass('has_dropper') ) {
						closeDropper(true);
						openDropper = $( this.getProperty('rel') );
						$( this.getProperty('rel') ).setStyles({
							'display': 'block',
							'top': coords.bottom,
							'left': coords.left
						});
					}
				},

				'mouseleave': function() {
					if( this.hasClass('has_dropper') ) {
						closeDropperTimer = closeDropper.delay(200);
					} else {
                        closeDropper(); //this will move the line back immediatley
                    }
				}
			});
		//}
	});

	$$('.dropdown').each(function(d) {
		d.addEvents({
			'mouseenter': function() { $clear(closeDropperTimer); },
			'mouseleave': function() { closeDropperTimer = closeDropper.delay(200); }
		});
	});
}

function positionNavLine() {
    var first = $('navbar').getElement('.current');
    if( !first ) first = $('navbar').getFirst();
    
	var coords = first.getCoordinates();
	navLine.setStyles({
		'display': 'block',
		'width': coords.width,
		'top':   coords.bottom,
		'left':  coords.left
	});

	navLine.origCoords = coords;
}

function closeDropper(ignoreLine) {
	if( openDropper ) {
		$clear(closeDropperTimer);
		openDropper.setStyle('display','none');
		openDropper = null;
	}
    if( !ignoreLine )
        navLineFx.start({'width': navLine.origCoords.width,
            			 'left':  navLine.origCoords.left });
}

var SimpleSlideshow = new Class({
    Implements: [Options],

    options:{
        autorun: true
    },

    initialize:function(container,options){
        container = $(container);
        if( container ) {
            this.setOptions(options);

            this.images   = container.getElements('.image a');
            this.numImages = this.images.length;

            if( this.numImages<=1 ) return;

            this.descs    = container.getElements('.desc div');
            this.choosers = container.getElements('.chooser a');
            this.currentI = 0; //Index of currently featured item

            this.fx = new Array(this.numImages);

            var assetArr = new Array(this.numImages);
            this.images.each(function(el,i) {
                assetArr[i] = el.getElement('img').getProperty('src');
            });
            new Asset.images(assetArr, {'onComplete':this.start.bind(this)});
        }
    },

    // start can only be called once.  It initializes the controls and
    // starts the slideshow timer.  Typically called after the images are done
    // assetting
    start: function() {
        if( this.started ) return;
        this.started = true;

        for( var i=0; i<this.numImages; ++i ) {
            this.fx[i] = new Fx.Elements($$( this.images[i], this.descs[i] ), {
                     'link': 'cancel',
                     'onStart': (function(el) {
                            el.setStyles({'opacity': 0.3, 'display':'block'});
                            this.descs[ this.currentI ].setStyles({'opacity': 0.3, 'display':'block'});
                     }).bind(this),
                    'onComplete': (function(el) {
                            el.addClass('current');
                            el.removeProperty('style');
                            this.descs[ this.currentI ].addClass('current');
                            this.descs[ this.currentI ].removeProperty('style');
                        }).bind(this),
                    'onCancel': (function(el) {
                            el.setStyle('display','none');
                            this.descs[ this.currentI ].setStyle('display','none');
                        }).bind(this)
                     });

            if( this.options.autorun ) {
                this.images[i].addEvents({
                    'mouseenter': (function(){ $clear( this.timer ) }).bind(this),
                    'mouseleave' : (function(){ this.timer = this.next.delay(2500,this); }).bind(this)
                });
                this.descs[i].addEvents({
                    'mouseenter': (function(){ $clear( this.timer ) }).bind(this),
                    'mouseleave' : (function(){ this.timer = this.next.delay(2500,this); }).bind(this)
                });
            }
        }

        this.choosers.each((function(choice,i) {
            choice.myIndex = i;
            choice.addEvent( 'mouseenter', this.switchTo.create({bind:this, arguments:[i]}) );
        }).bind(this));

        if( this.options.autorun ) this.timer = this.next.delay(4000,this);
    },

    next: function() {
        if( this.currentI==this.numImages-1 )
            this.switchTo(0);
        else
            this.switchTo( this.currentI + 1 );
    },

    switchTo: function(index) {
        if( this.currentI!=index ) {
            $clear( this.timer );

            this.fx[ this.currentI ].cancel();

            //Remove current featured
            this.images[ this.currentI ].removeClass('current');
            this.descs[  this.currentI ].removeClass('current');
            this.choosers[ this.currentI ].addClass('inactive');

            //Add the new featured
            this.currentI = index;

            this.fx[ index ].start({'0': {'opacity': [0.3,1.0]},
                                                 '1': {'opacity': [0.3,1.0]}});
            this.choosers[ index ].removeClass('inactive');

            if( this.options.autorun ) this.timer = this.next.delay(4000,this);
        }
    }
});

//General Helper Functions

// Returns the displayed text of the selected item in a <select> tag
function option_text(opt) {
    return opt.options[opt.selectedIndex].text;
}

function option_value(opt) {
    return opt.options[opt.selectedIndex].value;
}

// reroutes the window to the url selected on a select box
function go_to_url(opt) {
    window.location = option_value(opt);
}