/*
    FILE:             magnifyImage.js
    DEPENDENCIES:     Dojo Javascript Framework (load specific libraries below)
    NOTES:             Zooms and drags product image based on 2 images in source code HTML.  
    HTML:             The HTML is expected to be in the following structure:
                    <div id="product-image">
                        <a id="imagelink" href="/path/to/large/image.gif">
                            <img id="original-image" src="/path/to/small/image.gif" width="289" height="289" alt="Descriptive Text">
                        </a>
                    </div>
    CSS:             CSS rules are located in css/main.css
*/
dojo.require("dojo.dnd.move");
dojo.require("dojo.dnd.Container");

function initDrag() {
    if(dojo.byId('imagelink')) { //Are we there yet?
        // Grab the needed elements
        var elements = {
                container: dojo.byId('product-image'), 
                oImage: dojo.byId('original-image'), 
                nImageRef: dojo.byId('imagelink').getAttribute('href')
             };
    
        if (!elements) return false;
        
        // Magnification Zoom In link
        var $in = document.createElement('a');
        dojo.addClass($in, 'magnify-link');
        $in.setAttribute('href', 'javascript:void(0)');
        $in.setAttribute('title', 'Magnify');
        
        // Magnification Zoom Out link
        var $out = document.createElement('a');
        dojo.addClass($out, 'magnify-link');
        dojo.addClass($out, 'magnify-active');
        $out.setAttribute('href', 'javascript:void(0)');
        $out.setAttribute('title', 'Reduce');
        dojo.style($out, 'display', 'none'); 
        
        // Insert the large image and hide it
        var $largeImage = document.createElement('img');
        $largeImage.setAttribute('src', elements.nImageRef);
        $largeImage.setAttribute('id', 'large-image');
        dojo.addClass($largeImage, 'draggable-image');
        elements.container.appendChild($largeImage);
        dojo.style($largeImage, 'display', 'none');
        
        // Make the large image moveable
        var theMover = new dojo.dnd.Moveable("large-image");
                
        // Insert the links
        elements.container.appendChild($in);
        elements.container.appendChild($out);
        
        function zoomIn() {
            if(elements.oImage) dojo.style(elements.oImage, 'display', 'none');
            dojo.style($largeImage, 'display', 'block');
            dojo.style($in, 'display', 'none'); 
            dojo.style($out, 'display', 'block'); 
            
            var imgCoords = dojo.coords($largeImage);
            var newLeft = (0 - ((imgCoords.w - 280)/2)) + "px";
            var newTop = (0 - ((imgCoords.h - 280)/2)) + "px";
            dojo.style($largeImage, 'position', "absolute");
            dojo.style($largeImage, 'left', newLeft);
            dojo.style($largeImage, 'top', newTop);
            
            console.log( imgCoords.w, imgCoords.h, newLeft, newTop, dojo.style($largeImage,"left"), dojo.style($largeImage, "top"));
            return false;
        }
        
        function zoomOut() {
            if(elements.oImage) dojo.style(elements.oImage, 'display', 'block');
            dojo.style($largeImage, 'display', 'none');
            dojo.style($in, 'display', 'block'); 
            dojo.style($out, 'display', 'none');
            return false;
        }
        // Set up the click events
        dojo.connect($in, 'onclick', zoomIn);
        dojo.connect($out, 'onclick', zoomOut);
        dojo.connect(dojo.byId('imagelink'), 'onclick', function(e){
            e.preventDefault();
            zoomIn();
        });
   }
 }

dojo.addOnLoad(initDrag);