﻿
$(function() {
    var hWidth = $('img.resize-h').width();
    var hHeight = $('img.resize-h').height();
    var hmpx = (hWidth / hHeight);

    var vWidth = $('img.resize-v').width();
    var vHeight = $('img.resize-v').height();
    var vmpx = (vHeight / vWidth);
   
    var oWidth = $('img.resize').width();
    var oHeight = $('img.resize').height();            
    var mpx = (oWidth / oHeight);
    
    $('img.resize-h').hover(function(){
        $(this)
        .stop()
        .animate({
            width: (hWidth * hmpx) +'px',
            height: (hHeight * hmpx) +'px'
            },1000)
            .removeClass('pre-hover')
            .addClass('on-hover');
        },
        function(){
            $(this)
                .stop()
                .animate({
                     width: hWidth +'px',
                     height: hHeight +'px'
                },1000)
                .addClass('pre-hover')
                .removeClass('on-hover');
        });

    $('img.resize-v').hover(function(){
        $(this)
        .stop()
        .animate({
            width: (vWidth * vmpx) +'px',
            height: (vHeight * vmpx) +'px'
            },1000)
            .removeClass('pre-hover')
            .addClass('on-hover');            
        },
        function(){
            $(this)
                .stop()
                .animate({
                     width: vWidth +'px',
                     height: vHeight +'px'
                },1000)
                .addClass('pre-hover')
                .removeClass('on-hover');                
        });
                        
    $('img.resize').hover(function(){
        $(this)
        .stop()
        .animate({
            width: (oWidth * mpx) +'px',
            height: (oHeight * mpx) +'px'
            },1000)
            .removeClass('pre-hover')
            .addClass('on-hover');            
        },
        function(){
            $(this)
                .stop()
                .animate({
                     width: oWidth +'px',
                     height: oHeight +'px'
                },1000)
                .addClass('pre-hover')
                .removeClass('on-hover');
        });                
});