function showPhoto(src){
var img=document.getElementById('img_img');

if(!img)document.getElementById('img_cont').innerHTML='<img src="'+src+'" id="img_img" >';
else img.src=src;
}
function showPhoto2(src){
var img=document.getElementById('frame');
if(!img)document.getElementById('img_cont').innerHTML=src;
}
function hidePhoto(){
document.getElementById('imgcont').innerHTML='';

}


function setImgSize(){
        var frame=document.getElementById('frame');
        var img=document.getElementById('img_m');
        var ratioImg=imgW/imgH;
        var ratioFrame=frame.getDimensions().width/frame.getDimensions().height;
        if(!ratioFrame){
          frameW=imgW;
          frameH=imgH;
          ratioFrame=frameW/frameH;
          
        }
        else{
          frameW=frame.getDimensions().width;
          frameH=frame.getDimensions().height;
        }
        
         
        
        if(ratioImg<ratioFrame){
        img.height=frameH;
        img.width=Math.floor(img.height*ratioImg);
        //alert('w:'+Math.floor(img.height*ratioImg)+'h:'+frame.getDimensions().height);
        }
        else{
        img.width=frameW;
        img.height=Math.floor(img.width*ratioImg);
        //alert('w:'+frame.getDimensions().width+'h:'+Math.floor(img.width*ratioImg));
        }
          

        //alert(img.getDimensions().width+':'+img.getDimensions().height+' - '+frame.getDimensions().width+':'+frame.getDimensions().height);
        }
        

// Using DragResize is simple!
// You first declare a new DragResize() object, passing its own name and an object
// whose keys constitute optional parameters/settings:

var dragresize = new DragResize('dragresize',{ minWidth: 50, minHeight: 50, minLeft: 0, minTop: 0, maxLeft: 2000, maxTop: 2000, handles:['tl','tr','bl','br','flipv','fliph'] });

// Optional settings/properties of the DragResize object are:
//  enabled: Toggle whether the object is active.
//  handles[]: An array of drag handles to use (see the .JS file).
//  minWidth, minHeight: Minimum size to which elements are resized (in pixels).
//  minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).

// Next, you must define two functions, isElement and isHandle. These are passed
// a given DOM element, and must "return true" if the element in question is a
// draggable element or draggable handle. Here, I'm checking for the CSS classname
// of the elements, but you have have any combination of conditions you like:

dragresize.isElement = function(elm)
{
 if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function(elm)
{
 if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};

// You can define optional functions that are called as elements are dragged/resized.
// Some are passed true if the source event was a resize, or false if it's a drag.
// The focus/blur events are called as handles are added/removed from an object,
// and the others are called as users drag, move and release the object's handles.
// You might use these to examine the properties of the DragResize object to sync
// other page elements, etc.

dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };

// Finally, you must apply() your DragResize object to a DOM node; all children of this
// node will then be made draggable. Here, I'm applying to the entire document.
dragresize.apply(document);