/*  
 * Modified by Henry YP @ monkiki.st
 *
 * Dropdown Menu function Added to cater for flexible drop down menu
 *
 * Modified June 2009 - Henry YP Ho @ monkiki
 *
 *
 * Unobtrusive image rollover with Prototype library, v1.6.2
 * 
 * Created by Herryanto Siatono
 * Copyright (c) 2007 Pluit Solutions <www.pluitsolutions.com>
 * 
 * This script is freely distributable under the terms of an MIT-style license.
/*------------------------------------------------------------------------------*/

var Rollover= Class.create({
  // provide the container id containing image links to be rolled over.
  initialize: function(id, options) {
    this.id = id;
    this.images = {};
    this.setOptions(options);
    this.observeLinks();
	//is animated 
	this.isAnimated = false;
	
  },
  
  //setting the optiosn if available
  setOptions: function(options) {
    this.options = {
      rolloverSuffix: 'over',
      selectedSuffix: 'sel',
      suffixSeperator: '_'
    };
    Object.extend(this.options, options || {});
  },

  //observe link
  observeLinks: function() {
    this.links = $$('#' + this.id + ' a');


	for (i=0; i<this.links.length; i++) {
		//check if there is a next div
		if ($(this.links[i]).up().next('div').hasClassName('dropdown')) {
	 
			var nextDiv = $(this.links[i]).up().next('div');
			
			
			nextDiv.setStyle ({ display: "none", zIndex: "60" });
			this.links[i].observe('mouseover', this.subRolloverImage);
			this.links[i].observe('mouseout', this.subRollbackImage);
			this.links[i].observe('mousedown', this.mousedownImage);
		}
		else {
			this.links[i].observe('mouseover', this.rolloverImage);
			this.links[i].observe('mouseout', this.rollbackImage);
		}
	
	}
    
    images = $$('#' + this.id + ' img');
	
    for (i=0; i<images.length; i++) {
      imageId = images[i].id;
	  
      if (!imageId) {
        imageId  = this.id + i;
        images[i].id = imageId;
      }
      
      this.images[imageId] = images[i].src;
      images[i].imageRollover = this;

      // preload rollover image
      (new Image()).src = this.parseRolloverImage(images[i]);
    }
  },
  
  
  // normal rollovers
  rolloverImage: function(e) {
    image = Event.element(e);
    if (image.imageRollover) {
      image.imageRollover.images[image.id] = image.src;
      image.src = image.imageRollover.parseRolloverImage(image);  
    }
  },

  // normal rollback images
  rollbackImage: function(e) {
    image = Event.element(e);
    if (image.imageRollover) {
      image.src = image.imageRollover.images[image.id];
	  
    }
  },
    
  // sub rollover images
  subRolloverImage: function(e) {
    image = Event.element(e);
    if (image.imageRollover) {
      image.imageRollover.images[image.id] = image.src;
      image.src = image.imageRollover.parseRolloverImage(image);  
    }
  },

  //sub rollback images
  subRollbackImage: function(e) {
    image = Event.element(e);
    if (image.imageRollover) {
		
		var nextDiv = image.up().up().next('div');
			image.src = image.imageRollover.images[image.id];
    }
  },
  
  //mouse down command on images
  mousedownImage: function(e) {
    image = Event.element(e);
	
	var nextDiv = image.up().up().next('div');
	
	if (!this.isAnimating) {
		if  (nextDiv.getStyle('display') == 'none') {
			var effects = new Array();
			var options = {
				sync: true,
				scaleFrom: 0,
				scaleContent: false,
				transition: Effect.Transitions.sinoidal,
				scaleMode: {
					originalHeight: 400,
					originalWidth: 1000
				},
				scaleX: false,
				scaleY: true
			};
		
			effects.push(new Effect.Scale(nextDiv, 100, options));
		
			
			var myDuration = 0.55;
		
			new Effect.Parallel(effects, {
				duration: myDuration,
				fps: 35,
				beforeStart: function() {
					this.isAnimating = true;
					nextDiv.setStyle({ display: "block", width:"1000px", height:"0px",top:"141px", zIndex:"60"  });
				}.bind(this),
				afterFinish: function() {
					this.isAnimating = false;
					nextDiv.setStyle({ display: "block", width: "1000px", height: "400px", top:"141px"  });
					
				}.bind(this)
			});
		}
		else  {
			var effects = new Array();
			var options = {
				sync: true,
				scaleContent: false,
				transition: Effect.Transitions.sinoidal,
				scaleX: false,
				scaleY: true
			};
		
			effects.push(new Effect.Scale(nextDiv, 0, options));
		
			
			var myDuration = 0.75;
		
			new Effect.Parallel(effects, {
				duration: myDuration,
				fps: 35,
				beforeStart: function() {
					this.isAnimating = true;
					nextDiv.setStyle({ display: "block", width: "1000px", height: "400px", top:"141px" });
				}.bind(this),
				afterFinish: function() {
					this.isAnimating = false;
					nextDiv.setStyle({ display: "none", width: "1000px", height: "0px", top:"0px"  });
				}.bind(this)
			});
			
		}
	}
	
  },

  
  // --end of sub rolls
  
  parseRolloverImage: function(image) {
    ext = image.src.substr(image.src.lastIndexOf('.'));
    path = image.src.match(/(.*)\/(.*\.(png|gif|jpg))/)[1]
    filename = image.src.gsub(path, '')
    basename = this.parseBasename(filename);
    basename = this.parseBasename(basename, this.options.suffixSeperator + this.options.selectedSuffix);
    return path + basename + this.options.suffixSeperator + this.options.rolloverSuffix + ext;
  },
  
 
    
  parseBasename: function(name, seperator) {
    seperator = seperator || '.';
    found = name.lastIndexOf(seperator);
    if (found > 0) {
      return name.substr(0, found);
    } else {
      return name;
    }
  }
});

document.observe("dom:loaded", function(){
  new Rollover('head', {suffixSeperator: '_', rolloverSuffix: 'over',
	selectedSuffix: 'active'});
})