window.addEvent('domready', function(){
	// load up some stuff
	$('about').removeClass('jsEnabled');			
	$('about').addClass('jsDisabled');
	$('less').addClass('hasJs');
	$('pageLoader').setStyle('display', 'block');	

		
	/*************************************
	* make an element do a click
	*************************************/
	$$('.jsToggleClick').each(function(el){
		var rel = el.get('class').split(' ');
		rel.each(function(relStr){
			if(relStr.test("target-")){

				var target = relStr.replace('target-', '');
				
				$(target).removeClass('jsEnabled');
				$(target).addClass('jsDisabled');	
				
				el.addEvent('click', function(e){
					e.stop();
					if ($(target).hasClass('jsEnabled')){
						$(target).removeClass('jsEnabled');			
						$(target).addClass('jsDisabled');	
					} else {
						$(target).addClass('jsEnabled');			
						$(target).removeClass('jsDisabled');		
					}							
				});
			}
		});
	});


	/*************************************
	* make an element do a hover on another element!
	*************************************/
	$$('.jsToggleHover').each(function(el){
		var rel = el.get('class').split(' ');
		rel.each(function(relStr){
			if(relStr.test("target-")){

				var target = relStr.replace('target-', '');
				$(target).removeClass('jsEnabled');
				$(target).addClass('jsDisabled');					
				
				el.addEvents({
					'mouseenter' : function(){
						$(target).addClass('jsEnabled');			
						$(target).removeClass('jsDisabled');			
					},
					'mouseleave' : function(){
						$(target).removeClass('jsEnabled');			
						$(target).addClass('jsDisabled');	
					}
				});
				
			}
		});
	});
	

	/* will don't touch the code or the monkeys with solar lasers will come and get you */
	/* get the flickr images, from the jsons in the apis */
  var params = new Hash({
    'api_key':  FLICKR_API_KEY,
    'format':   'json',
    'method':   'flickr.photos.search',
    'user_id':  FLICKR_USER_ID
  });

  var BASE_URL = 'http://www.flickr.com/services/';
  var REQ_TYPE = 'rest';

  var theUrl = BASE_URL + REQ_TYPE + '/?' + params.toQueryString();

  /* adapted from moopix, but with less fail */
	var script = new Element('script');
	script.setProperties({type: 'text/javascript', src: theUrl});
	script.inject($$('head').getLast());

}); // end domready

/* here's the response to the flickr json call. will do you worst here */
var FLICKR_NUMBER_OF_PHOTOS = 10;
var FLICKR_USER_ID = '39105686@N06';
var FLICKR_API_KEY = 'f9ed0ce516a427cd04ecf2e43702472e';

function jsonFlickrApi(rsp){

	if (rsp.stat != "ok"){
		// something broke!
		return;
	}
	
	$('box').empty();
	$('bgImages').empty();
	
	var noobSlideItems = [];
	var nS5; /* declare it so we can use it in the onclick */
	var i;
	
  for (i = 0; (i < FLICKR_NUMBER_OF_PHOTOS) && (rsp.photos.photo.length > 0); i++)
  {
    /* use this one if you want randomly ordered photos */
    // var item = rsp.photos.photo.getRandom();

    /* now remove it so we don't get it again, 
    ** this is actually only important if we are getting randomly 
    */
    // rsp.photos.photo.erase(item);

    var item = rsp.photos.photo[i];
    var span = new Element('span');

    
    var img = new Element('img', {
      'src': 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg',
      'title': item.title
    });

    $('box').grab(span.grab(img));
    
    var li = new Element('li');
    var theA = new Element('a', {
	    'id': 'imageItemAnchor'+i,
      'href': '#',
      'style': 'background-image:url(http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg)',
      'title': item.title,
      'itemNum': i,
      'html' : '&nbsp;'
    });
    
    theA.addEvent('click', function(num){
			nS5.walk(num, true);
   	}.pass(i));
    
    $('bgImages').grab(li.grab(theA));
    
    /* now add the item for noob slide */
    noobSlideItems.extend([{
    	id: 'imageItemAnchor'+i,
    	title: item.title,
    	link: 'http://www.flickr.com/photos/'+FLICKR_USER_ID+'/'+item.id
    	}]);
  }

  //the noobslide
	var info = $('info').set('opacity',1);
	nS5 = new noobSlide({
		mode: 'vertical',
		box: $('box'),
		size: 453,
		startItem: 1,
		items: noobSlideItems,
		addButtons: {
			previous: $('prev'),
			next: $('next')
		},
		onWalk: function(currentItem){
			info.empty();
			Element('h4').set('html','"'+currentItem.title+'": <span>via <a href="'+currentItem.link+'">Flickr</a></span>').inject(info);
			p1 = $(currentItem.id).getParent().getPosition().x;			
			p2 = $('bgImages').getPosition().x;	
			pxMove = (p1-p2-4);
			$('thumbsMask').tween('left', pxMove);
		}
	});
	
  $('box').addEvent('click', function(e){
	  e.stop();
		nS5.next();
 	});
	
	$('content').addEvents({
  	'mouseenter': function(){
  		$('info').fade('in');
  		$('about').fade('in');
  	},
  	'mouseleave': function(){
  		$('info').fade('out');
  		$('about').fade('out');
  	}
  });
  $('info').fade('hide');
  $('about').fade('hide');
  
  // this is weird but it's the only way I could
  // figure out how to do it. Luke?
  $('thumbs').getElements('a').each(function(el){
  	el.addEvent('click', function(e){
  		e.stop();
  	});
  });
	$('prev').addEvent('click', function(e){e.stop();});
	$('next').addEvent('click', function(e){e.stop();});	
	
	
	/* do fancy things */
	$('pageLoader').fade('out');
	$('thumbs').setStyle('display', 'block').fade('in');		
	$('thumbsMask').set('tween', {duration: 700, transition: Fx.Transitions.Back.easeInOut});

  /* we get the first image item to get the relative position */
  nS5.walk(0);
	
}