/*
 * Presentation JS
 * Autor: Spect (spect88@gmail.com)
 */

Effect.DropIn = function(element) {
  element = $(element);
  var options = Object.extend({
    distance: 10
  }, arguments[1] || {});
  var distance = parseInt(options.distance);
  var oldStyle = {
    top: element.getStyle('top'),
    opacity: element.getInlineOpacity() };
    return new Effect.Parallel( [
	new Effect.Move(element, {x: 0, y: distance, sync: true }),
	new Effect.Opacity(element, { sync: true, from: 0.0, to: 1.0 })
	],
    Object.extend(
      { duration: 0.5,
        beforeSetup: function(effect) {
          effect.effects[0].element.setStyle({top: (parseInt(oldStyle.top.substr (0, oldStyle.top.length-2)) - distance) + 'px'}).setOpacity( 0 );
        },
        afterFinishInternal: function(effect) {
        }
      }, arguments[1] || { }));
};

var Presentation = Class.create({

	initialize: function (data) {

		// covers
		var bottom_cover = document.createElement ('div');
		var right_cover = document.createElement ('div');
		Element.extend (bottom_cover);
		Element.extend (right_cover);
		bottom_cover.setStyle ({zIndex: 5, position: 'absolute', bottom: '-13px', left: '0', width: '832px', height: '13px', background: '#fff'});
		right_cover.setStyle ({zIndex: 5, position: 'absolute', right: '-35px', top: '0', width: '35px', height: '313px'});
		right_cover.addClassName ('p_cover');
		$('presentation').insert (bottom_cover);
		$('presentation').insert (right_cover);

		// frame - corners

		var tl = document.createElement ('div');
		Element.extend (tl);
		tl.addClassName ('p_frame_corner');
		tl.setAttribute ('id','p_frame_tl');
		var tr = $(tl.cloneNode(true));
		tr.setAttribute ('id','p_frame_tr');
		var br = $(tl.cloneNode(true));
		br.setAttribute ('id','p_frame_br');
		var bl = $(tl.cloneNode(true));
		bl.setAttribute ('id','p_frame_bl');
	
		$('presentation').insert (tl);
		$('presentation').insert (tr);
		$('presentation').insert (bl);
		$('presentation').insert (br);

		// frame - sides

		var left = document.createElement ('div');
		Element.extend (left);
		left.addClassName ('p_frame_line');
		var right = $(left.cloneNode(true)).setStyle ({right: '0', top: '4px', width: '2px', height: '291px'});
		var bottom = $(left.cloneNode(true)).setStyle ({left: '4px', bottom: '0', width: '791px', height: '2px'});
		var top = $(left.cloneNode(true)).setStyle ({left: '4px', top: '0', width: '791px', height: '2px'});
		left.setStyle ( {left: '0', top: '4px', width: '2px', height: '291px'} );

		$('presentation').insert (left);
		$('presentation').insert (right);
		$('presentation').insert (top);
		$('presentation').insert (bottom);

		// photos count
		this.photos_count = data.length;

		// load photos
		var id = 0;
		for (var i=0; i<data.length; i++) {
			id++;

			// background
			var img = document.createElement ('img');
			Element.extend (img);
			img.setAttribute ('id','p_pic_'+id);
			img.addClassName ('pic');
			img.setAttribute ('src', data[i].picture);
			img.setStyle ({zIndex: 3});
			$('presentation').insert(img);

			// button
			var btn = document.createElement ('div');
			Element.extend (btn);
			btn.setAttribute ('id','p_btn_'+id);
			btn.addClassName ('btn');
			btn.innerHTML = '<a href="' + data[i].link + '" onmouseover="javascript:presentation.show_photo('+id+');">' + data[i].title + '</a>';
			btn.setStyle ({zIndex: 6, top: 9+(i*72)+'px'});
			$('presentation').insert(btn);

			// text
			var txt = document.createElement ('div');
			Element.extend (txt);
			txt.setAttribute ('id','p_txt_'+id);
			txt.addClassName ('txt');
			txt.innerHTML = '<span class="title"><span>' + data[i].title + '</span></span><span class="desc"><span>' + data[i].description + '</span></span>';
			txt.setStyle ({zIndex: 2});
			$('presentation').insert(txt);

		}
		text_shadow_fix();
		this.lock = false;
		this.show_photo (1);
	},

	deactivate: function (id) {
		$('p_pic_'+id).setStyle ({zIndex: 3});
		$('p_btn_'+id).down().removeClassName('active');
		$('p_txt_'+id).setStyle ({zIndex: 2});
		
	},

	activate: function (id) {
		$('p_pic_'+id).setStyle ({zIndex: 4});
		$('p_btn_'+id).down().addClassName('active');
		$('p_txt_'+id).setStyle ({zIndex: 6});
		this.current_photo = id;
	},	

	reset_photo: function (id) {
		$('p_pic_'+id).setStyle ({
			width: '832px',
			height: '311px'
		});
		$('p_txt_'+id).setStyle({top: '180px', left: '288px'}).setOpacity( 0.0 );
	},

	show_photo: function (id) {
		if (this.current_photo != id) {
			// synchronization
			if (this.lock) {
				// try again in 10 miliseconds
				window.setTimeout ("presentation.show_photo("+id+");",10);
			} else {
				this.lock = true;
				// kill previous animations
				Effect.Queues.get('presentation').each (function(effect){ effect.cancel(); });
				// deactivate previous photo
				if (this.current_photo != null)
					this.deactivate (this.current_photo);
				// prepare and activate this one
				this.reset_photo (id);
				this.activate (id);
				// finally show it
				new Effect.Scale('p_pic_'+id,96, {duration: 0.3, queue: {position: 'end', scope: 'presentation', limit: 1}});
				new Effect.DropIn('p_txt_'+id, {duration: 0.4, queue: {position: 'end', scope: 'presentation', limit: 2}});
				this.lock = false;
			}
		}
	}

});