/*
Name: Mangnifier
URL: http://oursky.com/
Description: Mangnifing a panel of image.
Version: 1.10
Author: Rick Mak
Author URL: http://blog.rickmak.net/
Last Update: 18 May 2008
*/
// Developed on Prototype 1.5.1
// Suggested HTML
/* Configured by Tag
<!-- start manifier -->
<div id="faceroll1" module="magnifier" name="default">
<div class="oursky_faceroll_face" >
    <img id="<?php echo $id; ?>" src="<?php echo $item["url1"]; ?>" alt="<?php echo $item["name"]; ?>"/>
</div>
</div>
<!-- end manifier -->
 */

MANGNIFIER = function(containerID) {
    var me = this;
    
    this.register_event = function() {
        Position.absolutize($(me.ID));
        Position.relativize($(me.ID));
        me.container_dimension = me.get_dimension($(me.ID));
	    div_list = $(me.ID).childElements();
	    div_list.each(function(control) {
	        Position.absolutize(control.firstDescendant());
	        Event.observe(control.firstDescendant(), "mouseover", me.on_mouse_over);
	        Event.observe(control.firstDescendant(), "mouseout", me.on_mouse_out);
	    });
	}
	
	this.searchActiveElement = function(ele) {
	    index = 0;
	    found = false;
    	while ((index < me.activeElement.length) && !found) {
    		if (me.activeElement[index].element == ele) {
    			found = true;
    		} else {
    			index++;
    		}
    	}
    	return found ? index : -1;
	}
	
	this.on_mouse_over = function(evt) {
	    var element = Event.element(evt);
	    me.magnify(element);
	}
	this.on_mouse_out = function(evt) {
	    var element = Event.element(evt);
	    me.diminish(element);
	}
	this.magnify = function(ele) {
	    index = me.searchActiveElement(ele);
	    if (index == -1) {
	        me.activeElement[me.activeElement.length] = new ActiveElement(ele, ele.width, me.enlargeStepSize, me.enlargeSteps, me.position(ele));
	        index = me.activeElement.length -1;
	    }
	    me.enlargeIndex = index;
	    if (me.periodicalExe == null) {
	        me.periodicalExe = new PeriodicalExecuter(me.resizeimg, me.period);
	    }
	}
	this.diminish = function(ele) {
	    if (me.enlargeIndex == me.searchActiveElement(ele)) {
	        me.enlargeIndex = -1;
	    }
	}
	this.get_dimension = function(element) {
	    var tmp_di = {};
	    tmp_di = element.getDimensions();
	    tmp_di.left = Position.cumulativeOffset(element)[0];
	    tmp_di.top = Position.cumulativeOffset(element)[1];
	    return tmp_di;
	}
	this.position = function(ele) {
	    var direction = {} ;
	    ele_dimen = me.get_dimension(ele);
	    if ((ele_dimen.left + ele_dimen.width + me.enlargeSteps * me.enlargeStepSize) > (me.container_dimension.left + me.container_dimension.width)) {
	        direction.horizontal = 'left';
	    } else {
	        direction.horizontal = 'right';
        }
        if ((ele_dimen.top + ele_dimen.height + me.enlargeSteps * me.enlargeStepSize) > (me.container_dimension.top + me.container_dimension.height)) {
	        direction.vertical = 'up';
	    } else {
	        direction.vertical = 'down';
        }
        // alert(direction.horizontal);
	    return direction;
	}
	
	this.resizeimg = function() {
	    if (me.enlargeIndex != -1) me.activeElement[me.enlargeIndex].enlarge();
	    me.do_reduce();
	}
	
	this.do_reduce = function() {
	    // Loop the Array expect one that is resizing
	    for (index = 0; index < me.activeElement.length; index ++) {
    		if (me.enlargeIndex != index) {
    			if (me.activeElement[index].reduce()) {
    				keepGoing = true;
    			} else {
    			    if (index <= me.enlargeIndex) me.enlargeIndex--;
    			    me.activeElement.splice(index,1);
    			    if (me.activeElement.length == 0) {
    			        me.periodicalExe.stop();
    			        me.periodicalExe = null;
    			    }
    			}
    		}
    	}
	}
	
	// Golbal
	this.ID = containerID;
	this.container_dimension = {};
	this.periodicalExe = null;
    this.activeElement = new Array();
    
    // Setting
	this.period = 0.01; //In Seconds
    this.enlargeIndex = -1;
    this.enlargeStepSize = 10;
    this.enlargeSteps = 6;
    // Load Custome Setting
    this.container = $(me.ID);
    if (me.container.hasAttribute('period')) this.period = parseFloat(me.container.readAttribute('period'));
    if (me.container.hasAttribute('enlargeStepSize')) this.enlargeStepSize = parseInt(me.container.readAttribute('enlargeStepSize'));
    if (me.container.hasAttribute('enlargeSteps')) this.enlargeSteps = parseInt(me.container.readAttribute('enlargeSteps'));
    // Initialize
    me.register_event();

}

// Active Element Class for containing the element
ActiveElement = function(ele, originalSize, stepSize, steps, direction) {
    this.element = ele;
	this.originalSize = originalSize;
	this.ratio = ele.height / ele.width;
	this.maxSize = originalSize + (stepSize * steps);
	this.remove = false;
	this.direction = direction;
	this.enlarge = function() {
    	if (this.element.width < this.maxSize) {
    	    var d = {};
    	    d.width = (this.element.width + stepSize) + "px";
    	    if (direction.horizontal == 'left') {
    	        d.left = (parseInt(this.element.style.left) - stepSize) + "px";
	        }
    		d.height = ((this.element.width + stepSize)  * this.ratio) + "px";
    		if (direction.vertical == 'up') {
    	        d.top = (parseInt(this.element.style.top) - stepSize) + "px";
	        }
    		d.zIndex = 1;
    		this.element.setStyle(d);
    	}
    	return (this.element.width < this.maxSize);
    }
	this.reduce = function() {
    	if (this.element.width > this.originalSize) {
    	    var d = {};
    		d.width = (this.element.width - stepSize) + "px";
    		if (direction.horizontal == 'left') {
    	        d.left = (parseInt(this.element.style.left) + stepSize) + "px";
	        }
    		d.height = ((this.element.width - stepSize) * this.ratio) + "px";
    		if (direction.vertical == 'up') {
    	        d.top = (parseInt(this.element.style.top) + stepSize) + "px";
	        }
    		d.zIndex = 0;
    		this.element.setStyle(d);
    	}
    	return (this.element.width > this.originalSize);
    };
}

Event.observe(window, 'load', MagnifierInit, false);

function MagnifierInit() {
    $$('div[module="magnifier"]').each(function(div) {
        name = div.readAttribute('name');
        MANGNIFIER[name] = new MANGNIFIER(div.readAttribute('id'));
    });
}