var sbpath="/js/shadowbox-2.0/";
Shadowbox.loadSkin('custom', sbpath+'src/skin');
Shadowbox.loadLanguage('en', sbpath+'build/lang');
Shadowbox.loadPlayer(['flv', 'img'], sbpath+'build/player');


Ext.onReady(function(){
	
	var options = {
		onOpen: function (obj) {
			var path=obj.el.pathname;
			var ext=path.slice(-3);
			if (ext=="pdf") {
				Ext.get('shadowbox_info_inner').addClass('downloadable');
				Ext.select('#sb_downloadlink a').set({ href: obj.el.href, target: 'blackhole'});
			} else {
				Ext.get('shadowbox_info_inner').removeClass('downloadable');
			}
			pageTracker._trackPageview( obj.el.pathname.replace('/download','/slideshow'));
		},
		flvPlayer: '/js/shadowbox-2.0/flvplayer.swf'
	}	

	Shadowbox.init(options);

	// parnter logos animation
	var fimg = Ext.get('partner-logo-front');
	var bimg = Ext.get('partner-logo-back');
	var numlogos=11;
	
	var step = -70;
	var max_y= parseInt(step)*(numlogos-1);
	
	// get the start postion of the background image (random by php in content);
	var start=bimg.getStyle('background-position').split(' ')[1].replace('px','');
	
	// adjust the postion of the foreground image by 70
	start = (start >  max_y ? parseInt(start)+parseInt(step) : 0);
	fimg.setStyle('background-position','0px '+start+'px');
	
	swap_images();
	
	function swap_images() {
		// are we fading in or out?
		// when fading in, then we need to adjust the background after fade in
		// if fading out we need to adjust the foreground after fading out
		start = (start >  max_y ? parseInt(start)+parseInt(step) : 0);
		///console.log('the next image position will be ',next_y)
		
		if (fimg.isVisible()) {
			// fading out
			fimg.fadeOut.defer(3000,fimg,[{
				callback:function(){
					fimg.setStyle('background-position','0px '+start+'px');
					swap_images();
				},
				duration: 1.2
			}]);
		} else {
			fimg.fadeIn.defer(3000,fimg,[{
				callback:function() {
					bimg.setStyle('background-position','0px '+start+'px');
					swap_images();
				},
				duration: 1.2
			}]);
		}
	}
	
	// --------------------------------------------------------------------//
	// --------------------------------------------------------------------//
	// --------------------------------------------------------------------//
	
	// specify some targets
	var trendsForm=new Ext.form.BasicForm('trends-form',{});
	var trendsSubmitButton=Ext.get('ttsub-button');
	var trendsCloseButton=Ext.select('#trends-form-box img');
	var galleriesBox=Ext.get('edu-galleries-box');
	var trendsBox=Ext.get('trends-signup-box');
	var etrendsBox=Ext.get('etrends-signup-box');
	
	// --------------------------------------------------------------------//
	
	// create a layer for the form
	var ttFormLayer = new Ext.Layer({
		shim: true,
		constrain: false,
		shadow: true,
		shadowOffset: 8
	},'trends-form-box').alignTo(trendsBox,'bl-tl',[0,3]);
	
	// --------------------------------------------------------------------//
	
	// patch the form for Ext handling
	trendsForm.add(
		new Ext.form.TextField({applyTo: 'fldName', allowBlank: false,  invalidClass:'invalid'}),
		new Ext.form.TextField({applyTo: 'fldOrg', allowBlank: true,  invalidClass:'invalid'}),
		new Ext.form.TextField({applyTo: 'fldAddress', allowBlank: false, invalidClass:'invalid'}),
		new Ext.form.TextField({applyTo: 'fldCity', allowBlank: false, invalidClass:'invalid'}),
		new Ext.form.TextField({applyTo: 'fldState', allowBlank: false,  invalidClass:'invalid'}),
		new Ext.form.NumberField({applyTo: 'fldZip', allowBlank: false, invalidClass:'invalid'})
		//,new Ext.form.ComboBox({transform: 'fldNotify', cls: 'ext-combo',  width: 268, forceSelection:true, triggerAction: 'all'})
	);

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

	function dismissTrendsForm(){
		ttFormLayer.slideOut('b');
		galleriesBox.shift({width: galleriesBox.parent().getWidth()});
		trendsSubmitButton.dom.value="Subscribe";
		trendsForm.reset();
	}

	// --------------------------------------------------------------------//
	
	function showTrendsForm() {
		trendsForm.reset();
		ttFormLayer.slideIn('b');
		galleriesBox.shift({width: etrendsBox.getWidth()});
		trendsSubmitButton.dom.value="Submit";
	}

	// --------------------------------------------------------------------//
	
	function submitTrendsForm() {
		trendsForm.submit({
			url: '/education/subscribeTrendsJSON',
			method: 'post',
			headers: { 'x-request-method': 'xhr' },
			success: function(theform, theAction) {
				//dismissTrendsForm(); /* causes a timing problem in IE - the update action will kill successful dismissal
				galleriesBox.shift({width: galleriesBox.parent().getWidth()});
				trendsBox.update(theAction.result.html);
			},
			failure: function(theform, theAction) {
				// When specifying a failure function, failed client validation
				// will also trigger this, so we need to check where the error happend.
				if (theAction.failureType!=Ext.form.Action.CLIENT_INVALID) {
					dismissTrendsForm();
				}
			}
		});
	}

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

	// Event handlers
	trendsCloseButton.on('click',dismissTrendsForm);
	
	// --------------------------------------------------------------------//
		
	trendsSubmitButton.on('click',function(evt,btn) {
		btn.blur(); // do this right away or IE will error if the box was updated with a response string killing all previous content
		if(ttFormLayer.first().isVisible(true)==true) 
		{
			submitTrendsForm();
		}
		else
		{
			showTrendsForm();
		}
		
	})
	
	
	
	
	
	
});