// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

var RotatingBanner = Class.create();
RotatingBanner.prototype = {
  initialize : function(){
   // this.data = {'1': {'name': "Luna Towers", 'description': }};
		banner = this;
		banner.position = 0;
		banner.banners = $$('#banner-img img');
		banner.contents = $$('.unit_project');
		
		banner.urls = [	'/portfolio/5-medical-dental/projects/22-blink-optometry-creekside', 
										'/portfolio/7-multi-family/projects/37-luna-towers-sales-presentation-centre', 
										'/portfolio/'
									];
		// banner.rotate.delay(6);
		if($$('.home').length > 0){
			new PeriodicalExecuter(banner.rotate, 6);
			banner.swap_thumbs();
		}
		
  },
	swap_thumbs: function(){

		switch(banner.position){
		case 0:
			thumbs = [2, 1];
			break;
		case 1:
			thumbs = [0, 2];
			break;
		case 2:
			thumbs = [0, 1];
		default:
			thumbs = [0,1];
		}
		
		home_thumbs = $$('.home_thumbs');
		$('home_thumb_1').href = banner.urls[thumbs[0]];
		$('home_thumb_2').href = banner.urls[thumbs[1]];
		
	},

	rotate: function(){
		// console.log(banner.banners)		
		banner.banners.invoke('hide');
		banner.banners[banner.position].fade();
		banner.contents.invoke('hide');
		
		if(banner.position < banner.banners.length-1){
			banner.position++;
		}else{
			banner.position = 0;
		}

		banner.banners[banner.position].appear({duration: 0.9});
		banner.contents[banner.position].appear({duration: 1.4 });		
		banner.swap_thumbs();
	}
};




var Gallery = Class.create();
Gallery.prototype = {
  initialize : function(css){

    $$(css).each(function(image_link) {
    	Event.observe(image_link, 'click', that.activate.bindAsEventListener(image_link));
    });

		$$('.gallery_image img.desatured').each(function(img) {
			Pixastic.process(img, "desaturate", {average : false});
		});

  }, 
	activate: function(e){
		link = Event.element(e);
		$('main_image').src = link.up().href;
		Event.stop(e);
	}
};

var ImageList = Class.create();
ImageList.prototype = {
	target_elem: "project_main_image", 
	items: ".project_image_list .gallery_image_link", 
	pos: 0,
  initialize : function(items, target){

		that = this;
		this.pos = 0;
		this.items = $$(items);
		this.target_elem = target;
    $$(items).each(function(image_link, i) {
			image_link.setAttribute('position', i);
    	image_link.observe('click', that.activate.bindAsEventListener(this));
    });
		if($('prev_image')){
			$('prev_image').observe('click', that.prev_image.bindAsEventListener(this));
			$('next_image').observe('click', that.next_image.bindAsEventListener(this));
		}
  },

	current_item: function(){
		return this.items[this.pos];
	},

 	next_image: function(e){
		if(this.pos != this.items.length - 1){
			this.pos++;
		}else{
			this.pos = 0;
		} 
		this.activate(e);
		Event.stop(e);
 	},

	prev_image: function(e){
		if(this.pos != 0){
			this.pos--;
		}else{
			this.pos = this.items.length - 1;
		}
		this.activate(e);
		Event.stop(e);
	},
	
	activate: function(e){
		var elem = e.element();
		if(elem.getAttribute('position')){
			that.pos = elem.getAttribute('position');
		}
		$$('.project_image_list a.gallery_image_link').invoke('removeClassName', 'current');
		that.current_item().addClassName('current');
		var main = $('project_main_image');
		main.fade({duration: 0.3});
		main.src = that.current_item().href;
		main.appear({duration: 0.5, queue: 'end'});
		Event.stop(e);
	}
};


var CssStyler = Class.create();
CssStyler.prototype = {
  initialize : function(){
		// Make lists hoverable
		// console.log(Prototype.Browser);
		// if(Prototype.Browser.IE){
		// 	    $$('li').each(function(li) {
		// 	    	li.observe('mouseenter', li.addClassName('hover'));
		// 	    	li.observe('mouseleave', li.removeClassName('hover'));
		// 	    });
		// }
    // $$('div').each(function(li) {
    // 	li.observe('mouseenter', li.addClassName('hover'));
    // 	li.observe('mouseleave', li.removeClassName('hover'));
    // });
  }
};



Event.observe(window, 'load', function(e) {
  var imagelist = new ImageList('.project_image_list .gallery_image_link', 'project_main_image');
	var gallery = new Gallery('.gallery');
	var banner = new RotatingBanner();
	var styler = new CssStyler();
});