Object.extend(Prototype.Browser, {
  Safari3: !!navigator.userAgent.match(/Version\/3.*Safari/),
  Safari2: !!navigator.userAgent.match(/Safari\/419/)
});

Effect.Squares = Class.create();
Object.extend(Object.extend(Effect.Squares.prototype, Effect.Base.prototype), {
	initialize: function(element) {
		this.element = $(element);
		this.squares = [];
		var options = arguments[1] || {};

		this.squareduration = 0.5;
				
		var leftOffset = 0, topOffset = 0,
		    heights = this.determineDimensions(this.element.offsetHeight, options.rows),
		    widths  = this.determineDimensions(this.element.offsetWidth, options.cols);
		
		if(!this.element._squared){
		  heights.each(function(h) {
		  	widths.each(function(w) {
		  		var div = $(Builder.node('div')).setStyle({
		  		  position:'absolute',left:-leftOffset+'px',top:-topOffset+'px',
		  		  width:w+'px', height:h+'px', opacity:options.from,
		  		  background:options.background+' '+leftOffset+'px '+topOffset+'px'
		  	  });
		  		var del = ((options.duration/2)*Math.random()) / options.duration;
		  	  this.squares.push($H({ref:div, delay:del}));
		  		this.element.appendChild(div);
		  		leftOffset -= w;
		  	}.bind(this));
		  	leftOffset = 0;
		  	topOffset -= h;
		  }.bind(this));
		  this.element._squared = this.squares;
	  } else {
	    this.squares = this.element._squared;
	  }		
		this.start(options);
	},
	setup: function(){
		this.element.setStyle({background:'none'});
	},
	update: function(position) {
		this.squares.each(function(square) {
				var o = (position-square.delay)*2;
				square.ref.setOpacity(o > 0 ? (o > 1 ? 1 : o) : 0);
		}.bind(this));
	},
	determineDimensions: function(w, a) {
		var d = 1;
		return $R(0,a-1).map( function(x){ 
			d-=(d>0.5)?1:0; 
			d+=((w/a)-Math.floor(w/a)); 
			return Math.floor(w/a)+(d>0.5?1:0); 
		});
	}
});

Effect.CanvasSquares = Class.create();
Object.extend(Object.extend(Effect.CanvasSquares.prototype, Effect.Base.prototype), {
	initialize: function(element, i1, i2) {
		this.element = $(element);
		this.squares = [];
		this.i1 = i1;
		this.i2 = i2;
		this.options = Object.extend({
		  corrector: 0
		}, arguments[3] || {});

		this.squareduration = 0.5;
				
		var leftOffset = 0, topOffset = 0,
		    heights = this.determineDimensions(this.element.offsetHeight-16, this.options.rows),
		    widths  = this.determineDimensions(this.element.offsetWidth-16, this.options.cols);
		      
		if(!this.element._squared){
		  heights.each(function(h,hi) {
		  	widths.each(function(w,wi) {
		  		var del = (1/2*Math.random()) / 1.0;
		  	  this.squares.push($H({left: leftOffset, top: topOffset, width: w, height: h, delay:del}));
		  		leftOffset += w;
		  	}.bind(this));
		  	leftOffset = 0;
		  	topOffset += h;
		  }.bind(this));
		  this.element._squared = this.squares;
	  } else {
	    this.squares = this.element._squared;
	  }		
		this.start(this.options);
	},
	setup: function() {
	  this.canvas = this.element;
	  this.canvas.width = this.canvas.getWidth()-16;
    this.canvas.height = this.canvas.getHeight()-16;
    this.ctx = this.canvas.getContext('2d');
	},
	update: function(position) {
	  //this.ctx.fillRect(0,0,this.canvas.offsetWidth,this.canvas.offsetHeight);
    this.ctx.drawImage(this.i2,0,0);
    
	  this.squares.each(function(square) {
			var o = (position-square.delay)*2;
			
			this.ctx.globalAlpha = o > 0 ? (o > 1 ? 1 : o) : 0;
			this.ctx.drawImage(this.i1,
			  square.left, square.top, square.width, square.height+this.options.corrector, 
			  square.left, square.top, square.width, square.height+this.options.corrector);
		}.bind(this));
	},
	determineDimensions: function(w, a) {
		var d = 1;
		return $R(0,a-1).map( function(x){ 
			d-=(d>0.5)?1:0; 
			d+=((w/a)-Math.floor(w/a)); 
			return Math.floor(w/a)+(d>0.5?1:0); 
		});
	}
});

function injectCanvas(element, i1, i2, rows, cols, url){
  var corrector = element == 'yellowdeli' ? 1 : 0;
  element = $(element);
  var dims = element.getDimensions();
  //corrector: corrects a 1px gap
  element.insert('<canvas id="'+element.id+'_canvas" style="position:absolute;top:8px;left:8px;width:'+dims.width+'px;height:'+dims.height+'px; cursor:pointer;"></canvas>');
  $(element.id+'_canvas').observe('mouseover',function(){
    new Effect.CanvasSquares(element.id+'_canvas', i1, i2, {rows:rows,cols:cols,duration:2,queue:{position:'end',scope:element.id},corrector:corrector});
  });
  $(element.id+'_canvas').observe('mouseout',function(){
    new Effect.CanvasSquares(element.id+'_canvas', i2, i1, {rows:rows,cols:cols,duration:2,queue:{position:'end',scope:element.id},corrector:corrector});
  });
  $(element.id+'_canvas').observe('click', function(){
    document.location = url;
  });
}

function preload(url){
  var image = new Image();
  image.src = 'images-portal/'+url+'.jpg';
  return image;
}

var squareTargets = [
  { id:'yellowdeli', rows:5, cols:18, url:'http://www.yellow.co.at/yellow-deli/' }, 
  { id:'orangery', rows:5, cols:9, url:'http://www.orangery.co.at/' }, 
  { id:'yellow', rows:5, cols:9, url:'http://www.yellow.co.at/yellow/' }
];

if (Prototype.Browser.Safari2) {
  Event.observe(window, 'load', function(e) { 
    $$('div.reveal').each(function(div) { div.show(); });	
  	squareTargets.each(function(item){
    	injectCanvas(item.id, preload(item.id+'-revealed_safari'), preload(item.id), item.rows, item.cols, item.url);
  	});
  });
} 
else {
  Event.observe(window, 'load', function(e) { 
    $$('div.reveal').each(function(div) { div.show(); });
    squareTargets.each(function(item) {
  		Event.observe(item.id+'-actuator', 'mouseover', function(e) {
  			new Effect.Squares(item.id+'-squares', { 
  				queue: { position:'end', scope:item.id, limit:2 },
  				from:1.0,
  				to:0.0, 
  				duration:2.0, 
  				rows:item.rows, 
  				cols:item.cols,
  				background:'url(images-portal/'+item.id+'.jpg)'
  			});
  		});
  		Event.observe(item.id+'-actuator', 'mouseout', function(e) {
  			new Effect.Squares(item.id+'-squares', { 
  				queue: { position:'end', scope:item.id, limit:2 },
  				from:0.0, 
  				to:1.0, 
  				duration:2.0, 
  				rows:item.rows, 
  				cols:item.cols,
  				background:'url(images-portal/'+item.id+'.jpg)',
  				beforeFinish: function(effect) {
  					effect.element.setStyle({background:'url(images-portal/'+item.id+'.jpg)'})
  				}
  			});
  		});
  	});
  });
}