/*
 * Jaba Enlarger V1.1
 *
 * Copyright (c) 2008 Jaba Multimedia (www.jaba.com.au)
 * Built upon jQuery 1.2.3 (http://jquery.com)
 */

(function($){
    var m_currentImg = null;
    var m_config = {
            small_width : 60,               // size in the px unit when it is the smallest
            large_width : 100,              // size in the px unit when it is the largest
            small_textheight : "2.5em",     // text area height when it is the smallest
            large_textheight : "5.0em",     // text area height when it is the largest
            css : {
                target_image : "en_img",    // the target image class to enlarge. (usally 'img' tag)
                target_text : "en_text"     // the target text area class to enlarge. (usally 'p'/'div' tag)
            },
            speed : 10,                     // ms unit, speed
            increment : 5,                  // px unit, one step increasing size.  
            fixed_area : null,              // fixed area #id (set the height to sum of the children) in case of requiring fixed height., need to be jquery expression. like '#id'
            finish_handler : null,          // event handlder for finishing animation
            init : null                     // event handlder for initialisation
        };
    
    // main initializer
    $.fn.JabaEnlarger = function(settings) {  
        m_config = $.extend(m_config, settings); 
        $(this).attr("_enlarger_root", "yes");

        // 1. set the all image to the small size
        $("img." + m_config.css.target_image, $(this)).width(m_config.small_width);
        $("img." + m_config.css.target_image, $(this)).height("auto");
        $($("img." + m_config.css.target_image, $(this)).get(0)).width(m_config.large_width);
        
        // 2. set the all inner text to the small size
        $("." + m_config.css.target_text, $(this)).height(m_config.small_textheight);
        $("." + m_config.css.target_text, $(this)).css("overflow", "hidden");

        
        // call customized init function
        $($("." + m_config.css.target_text, $(this)).get(0)).height(m_config.large_textheight);
        $($("." + m_config.css.target_text, $(this)).get(0)).show();
        if (m_config.init != null)
        {
            m_config.init();
        }
        else
        {
        }
        
        // 3. set the current image object 
        m_currentImg = $("img." + m_config.css.target_image, $(this)).get(0);
        
        
        // 4. set the total height
        if (m_config.fixed_area != null)
        {
            window.setTimeout(function() {
                $(m_config.fixed_area).height($(m_config.fixed_area).height() + 10);
                $(m_config.fixed_area).css("overflow", "hidden");
            }, 101);
        }
    
        // start animation
        function start_animate(obj, opt, fn)
        {
            if (obj.get(0).$timer == null)
            {
                obj.get(0).$timer = setTimeout(function () {_start_animate(obj, opt, fn)}, opt.speed);
            }
            else
            {
                if (opt.increment == obj.get(0).$increment) return;
                else
                {
                    obj.get(0).$increment = opt.increment; 
                    obj.get(0).$width = opt.width;
                }
            }
        }
        
        // start animation sub function. called repeatedly
        function _start_animate(obj, opt, fn)
        {
            if (obj.get(0).$increment == 0) 
            {
                obj.get(0).$increment = opt.increment;
                obj.get(0).$width = opt.width;
            }
            if ((obj.get(0).$increment > 0 && obj.width() < obj.get(0).$width) ||
                (obj.get(0).$increment < 0 && obj.width() > obj.get(0).$width))
            {
                //obj.parent().parent().height(obj.parent().parent().height() + obj.get(0).$increment);
                obj.width(obj.width() + obj.get(0).$increment);
                opt.increment = obj.get(0).$increment;
                opt.width = obj.get(0).$width;
                obj.get(0).$timer = setTimeout(function () {_start_animate(obj, opt, fn)}, opt.speed);
            }
            else
            {
                fn(obj, opt);
            }
        }
        
        // force the animation stop
        function finish_animate(obj, opt)
        {
            if (obj.get(0).$increment > 0)
                $("." + m_config.css.target_text, findup(obj)).height(m_config.large_textheight);
            else
                $("." + m_config.css.target_text, findup(obj)).height(m_config.small_textheight);

            if (m_config.finish_handler != null) m_config.finish_handler(obj);

            obj.get(0).$timer = null;
            obj.get(0).$increment = 0;
            obj.get(0).$width = 0;
        }
        
        function findup(start)
        {
            var current = start;
            var threshold = 10;
            while (($(current).attr("_enlarger_root") != "yes") && threshold > 0)
            {
                current = $(current).parent();
                threshold --;
            }
            
            if (threshold > 0) return current;
            else return null;
        }        

		function mouseoverHandler(obj)
		{
           if (m_currentImg == $("img." + m_config.css.target_image, $(obj)).get(0)) return false;
            if (m_currentImg != null)
            {
                start_animate($(m_currentImg), {width:m_config.small_width, increment:-m_config.increment, speed:m_config.speed}, finish_animate);
            }

	        //if (this.$timer) clearTimeout(this.$timer);
	        m_currentImg = $("img." + m_config.css.target_image, $(obj)).get(0);
            start_animate($("img." + m_config.css.target_image, $(obj)), 
                {width:m_config.large_width, increment:m_config.increment, speed:m_config.speed}, finish_animate);
		}
		
	    return this.each(function(){
            // main logic
            $(".hover", $(this)).hide();
            $("img." + m_config.css.target_image, $(this)).get(0).$timer = null;
            $("img." + m_config.css.target_image, $(this)).get(0).$increment = 0;
            $("img." + m_config.css.target_image, $(this)).get(0).$width = 0;
            
            $(this).mouseover(function () {
				mouseoverHandler(this);
                });
                
			this.TriggerEvent = function(command) {
			    switch(command) {
			        case "show" : 
				        mouseoverHandler(this); break;
				    default :
				        mouseoverHandler(this); break;
				}
			}
	    });

    }
   
    
})(jQuery);