Ext.onReady(function() {
	Ext.namespace ('SurfShot');
	SurfShot.navs = [];
        Ext.Updater.defaults.loadScripts = true;

	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        // Login box
        Ext.get('login_box').load ({             
          url: '/members/login.html', 
          nocache: false
        });
	
	///////////
	///  Featured
	// handles the featured web browser
	//////////
	SurfShot.Featured = function() {
		var that = this;
		var running = null;
		var catalog, menu, box, featuresTpl, tpl;
		
		return {
			init: function(cat) {
				catalog = cat;

				tpl = new Ext.XTemplate(
					'<tpl for=".">',
					 '<div id="feature-{#}" class="feature-item clearfix text_right {cls}">',
					  '<div class="photo"><span class="thumb_90" style="background-image: url(\'{icon}\')"><img src="{icon}" class="feature-image"></span></div>',
					  '<div class="text">{text}</div>',
					 '</div>',
					'</tpl>');

				tpl.overwrite('featured_nav', catalog);
				
				menu = Ext.get('featured_nav');
				box = Ext.get('feature_main');

				running = null;
				active = box.child('div.featured-slider');

				menu.on('mousedown', function(e, t){
					if(e.getTarget('.feature-item:not(.selected)')){
						t = e.getTarget('.feature-item:not(.selected)');
						this.transition (t);
					}
				}, this);

				menu.on('mouseover', function(e, t){
				    if(e.getTarget('.feature-item:not(.selected)')){
						t = e.getTarget('.feature-item:not(.selected)');
				        Ext.fly(t).addClass('over');
				    }
				});
				menu.on('mouseout', function(e, t){
				    if((e.getTarget('.feature-item:not(.selected)')) && !e.within(t, true)){
						t = e.getTarget('.feature-item:not(.selected)');
				        Ext.fly(t).removeClass('over');
				    }
				});

				//Load the first item
				var t = Ext.get('feature-1');
				this.transition(t);
			},
			
			clearRunning: function(){
		          running = null;
		    },
		
			transition: function(t) {
				Ext.fly(t).removeClass('over');
				Ext.fly(t).radioClass('selected');
				var s = catalog[t.id.split('-')[1]-1];
				if(running){
				    running.stopFx();
				}
				if(active){
				    active.slideOut('b', {duration:0.5, remove:true});
				}else{
				    box.hide();
				}
				s.el = new Ext.Element(document.createElement('div'));
				s.el.addClass('featured-slider');
				s.el.addClass('selected');
				s.el.enableDisplayMode();
			    s.el.update('');
				s.el.appendTo(box);
				s.el.slideIn('t', {callback: this.clearRunning, duration:1});
				running = s.el;
				active = s.el;
			}
		};
	}();
	
	///////
	// Media Layer
	// controlls the media player and functionality of media
	//////
	SurfShot.Media = function(){
		var that = this;
		var medias = [];
		var pointer = 0;
		var task = false;

		if (Ext.get('media_pause'))
		{
			Ext.fly('media_pause').dom.src='http://static.surfshot.com/images/icons/media_browser/pause_gray.gif';
		}
		return {
			// add method to push images onto the stack
			add: function(media_id, url, caption, by, rating, is_movie) {
				var img;
				// Preload the variable
				if (!is_movie)
				{
					img = new Image();
					img.src = url;
				} else {
					img = '<embed src="http://surfshot.s3.amazonaws.com/flvplayer.swf" width="470" height="310" allowscriptaccess="always" allowfullscreen="true" flashvars="height=310&width=470&file=' + url + '&callback=analytics&enablejs=true" />';
				}
				medias.push({ 
					'media_id': media_id, 
					'url': img,
					'caption': caption,
					'by': by,
					'rating': rating
				});
			},
	
			// get the current pointer element
			getCurrent: function() {
				return medias[pointer];
			},
			
			// get the previous image
			getPrev: function() {
				if (pointer>0)
				{
					if (pointer === 1)
					{
						Ext.fly('prev').dom.src='http://static.surfshot.com/images/icons/media_browser/prev_gray.gif';
					} else {
						Ext.fly('prev').dom.src='http://static.surfshot.com/images/icons/media_browser/prev.gif';
					}
					Ext.fly('next').dom.src='http://static.surfshot.com/images/icons/media_browser/next.gif';
					
					this.setActive (medias[pointer-1].media_id);
				} else {
					Ext.fly('prev').dom.src='http://static.surfshot.com/images/icons/media_browser/prev_gray.gif';
				}
			},
			
			// get the next image
			getNext: function() {
				if ((pointer+1) < medias.length)
				{
					if ((pointer+2) == medias.length)
					{
						Ext.fly('next').dom.src='http://static.surfshot.com/images/icons/media_browser/next_gray.gif';
					} else {
						Ext.fly('next').dom.src='http://static.surfshot.com/images/icons/media_browser/next.gif';
					}
					Ext.fly('prev').dom.src='http://static.surfshot.com/images/icons/media_browser/prev.gif';
					this.setActive (medias[pointer+1].media_id);
				} else {
					// Hide next icon
					Ext.fly('next').dom.src='http://static.surfshot.com/images/icons/media_browser/next_gray.gif';
					this.pause();
				}
			},
			
			// select a particular image
			setActive: function(id) {
				// Set the active class on the new item
				Ext.get('thumb_' + medias[pointer].media_id).removeClass('active');
				Ext.get('thumb_' + id).addClass ('active');
				for (var i=0; i<medias.length; i++)
				{
					if (medias[i].media_id == id)
					{
						pointer = i;
						medias[pointer].url.onload = this.display;  // make sure the photo is loaded first
						this.display();  // in case it's a video
					}
				}
				Ext.get('media_rating').dom.innerHTML = '';
				Ext.get('media_rating').load({
					url: '/ss/special/rating.html?id=' + medias[pointer].media_id,
					loadScripts: true
				});
			},
			
			// display the image in the current display element
			display: function() {
				Ext.get ('media_caption').dom.innerHTML = medias[pointer].caption;
				if (typeof(medias[pointer].url) == 'string')
				{
					Ext.fly('media_img').dom.src = '';
					Ext.fly('media_img').dom.alt = '';
					Ext.fly('media_vid').show();
					Ext.fly('media_vid').dom.innerHTML = medias[pointer].url;
				} else {
					Ext.fly('media_vid').dom.innerHTML = '';
					Ext.fly('media_img').show();
					Ext.fly('media_img').setWidth (medias[pointer].url.width); 
					Ext.fly('media_img').setHeight (medias[pointer].url.height); 
					Ext.fly ('media_img').setStyle('background-image', 'url(' + medias[pointer].url.src + ')');
					Ext.fly ('media_img').dom.src = 'http://static.surfshot.com/images/spacer.gif';
				}
				
				Ext.get ('media_by').dom.innerHTML = 'Photo by: ' + medias[pointer].by;
			},
			
			// shows the pause icon instead of the play icon.
			showPause: function()
			{
				Ext.fly('media_play').dom.src='http://static.surfshot.com/images/icons/media_browser/play_gray.gif';
				Ext.fly('media_pause').dom.src='http://static.surfshot.com/images/icons/media_browser/pause.gif';
			},
			
			// pause the timer
			pause: function()
			{
				Ext.fly('media_play').dom.src='http:///static.surfshot.com/images/icons/media_browser/play.gif';
				Ext.fly('media_pause').dom.src='http://static.surfshot.com/images/icons/media_browser/pause_gray.gif';
				Ext.TaskMgr.stop(task);
			},
			
			// start/stop the slideshow
			play: function() {
				task = {
					run: function() {
						// Display the next photo
						SurfShot.Media.getNext();
					},
					interval: 2000
				};
				
				// Display the pause icon
				SurfShot.Media.showPause();
				Ext.TaskMgr.start(task);				
			}
		};
	}();
	
  
});

function openPopUp(url)
{
	w = screen.width;
	h = screen.height;
	var win = window.open(url,
	'surfshot',
	'width=' + w + ', height=' + h + ', ' +
	'location=no, menubar=no, ' +
	'status=no, toolbar=no, scrollbars=yes, resizable=yes');
	win.resizeTo(w, h);
	win.focus();
}
function phpads_deliverActiveX(content)
{
	document.write(content);	
}