jQuery.fn.fancyZoom = function(options) {

    var options = options || { width: 555 };
    var directory = options && options.directory ? options.directory : 'http://www.phonehouse.pt/img/fancyzoom';
    var zooming = false;

    if ($("#popOverlay").length == 0) {
        var popHtml = '<div id="popOverlay">&nbsp;</div>';
        $("body").append(popHtml);
    };

    if ($('#zoom').length == 0) {
        var ext = $.browser.msie ? 'gif' : 'png';
        var html = '<div id="zoom" style="display:none; z-index: 12000"> \
                  <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
                    <tbody> \
                      <tr> \
                        <td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                        <td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \
                        <td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                      </tr> \
                      <tr> \
                        <td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden;" /> \
                        <td class="mm" style="background:#fff; vertical-align:top; padding:10px;" id="midmid"> \
                          <div id="zoom_content"> \
                          </div> \
                        </td> \
                        <td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y;  width:20px; overflow:hidden;" /> \
                      </tr> \
                      <tr> \
                        <td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                        <td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \
                        <td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                      </tr> \
                    </tbody> \
                  </table> \
                  <a href="#" title="Close" id="zoom_close" style="position:absolute; top:1px; right:0px; z-index:999;"> \
                    <img src="' + directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \
                  </a> \
                </div>';

        $('form').append(html);

        $('#popOverlay').click(function(e) { if ($(e.target).parents('#zoom:visible').length == 0) hide(); });
        $(document).keyup(function(event) {
            if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
        });

        $('#zoom_close').click(hide);
    }

    var zoom = $('#zoom');
    var zoom_table = $('#zoom_table');
    var zoom_close = $('#zoom_close');
    var zoom_content = $('#zoom_content');
    var middle_row = $('td.ml,td.mm,td.mr');

    this.each(function(i) {
        $($(this).attr('href')).hide();
        $(this).click(show);
    });

    return this;

    function show(e) {

        // thumbnails div for this item.
        var thumbsHere = $($(this).attr('ref'));

        if (zooming) return false;
        zooming = true;
        var content_div = $("#" + $(this).attr('href').split('#')[1]);
        var zoom_width = options.width;
        var zoom_height = options.height;

        var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
        var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
        var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
        var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
        var window_size = { 'width': width, 'height': height, 'x': x, 'y': y }



        var width = (zoom_width || content_div.width()) + 60;
        var height = (zoom_height || content_div.height()) + 60;

        if (options.thumbs) {
            height = height + 60;
        }

        var d = window_size;

        // ensure that newTop is at least 0 so it doesn't hide close button
        var newTop = Math.max((d.height / 2) - (height / 2) + y, 0);
        var newLeft = (d.width / 2) - (width / 2);
        var curTop = e.pageY;
        var curLeft = e.pageX;

        zoom_close.attr('curTop', curTop);
        zoom_close.attr('curLeft', curLeft);
        zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');

        $('#zoom').hide().css({
            position: 'absolute',
            top: curTop + 'px',
            left: curLeft + 'px',
            width: '1px',
            height: '1px'
        });


        fixBackgroundsForIE();
        zoom_close.hide();

        if (options.closeOnClick) {
            $('#zoom').click(hide);
        }

        toSearchOriginal = content_div.html();
        idArrayOriginal = new Array();
        idArray = new Array();

        $('#' + $(this).attr('href').split('#')[1] + " [id]").each(function() {
            idArrayOriginal[idArrayOriginal.length] = $(this).attr("id");
            idArray[idArray.length] = $(this).attr("id") + "__zoomed";
        });
        for (i = 0; i < idArray.length; i++) {
            toSearchOriginal = toSearchOriginal.replace(idArrayOriginal[i], idArray[i]);
        }

        if (options.scaleImg) {
            zoom_content.html(toSearchOriginal);
            $('#zoom_content img').css('width', '100%');
        } else {
            zoom_content.html('');
        }

        $("#popOverlay").toggle();
        if (options.scaleImg != true) {
            zoom_content.html(toSearchOriginal);
        }
        $('#zoom').animate({
            top: newTop + 'px',
            left: newLeft + 'px',
            opacity: "show",
            width: width,
            height: height
        }, 300, null, function() {

            if (options.assignID) {
                $("#zoom_content img:first").attr("id", "mainImage");
            }

            if (options.isVideo) {

                video_str = '<object width="320" height="240" id="movie" align="" type="application/x-shockwave-flash"  data="swf/player.swf" style="visibility: visible;">' +
                    '<param name="movie" value="swf/player.swf" /><param name="flashvars" value="videoURL=../products/videos/' + options.videoName + '&amp;videoPreview=../products/videos/' + options.videoPreview + ' />' +
                    '<param name="wmode" value="transparent" /><param name="allownetworking" value="all" /><param name="allowscriptaccess" value="always" />' +
                    '<h1>Adobe Flash Player</h1><div>Para visualizar correctamente este site por favor instale a última versão do Adobe Flash Player.</div>' +
                    '<div style="margin-top:20px;"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></div></object>';

                zoom_content.html(zoom_content.html() + video_str);
            }

            if (options.isYoutube) {
                video_str = options.videoName;
                video_str = video_str.replace(/width="480"/g, 'width="320"');
                video_str = video_str.replace(/height="385"/g, 'height="240"');

                zoom_content.html(zoom_content.html() + video_str);
            }

            unfixBackgroundsForIE();
            zoom_close.show();
            zooming = false;
        });

        return false;

    }

    function hide() {
        if (zooming) return false;
        zooming = true;
        $('#zoom').unbind('click');
        fixBackgroundsForIE();
        if (zoom_close.attr('scaleImg') != 'true') {
            zoom_content.html('');
        }
        zoom_close.hide();
        $("#popOverlay").toggle();
        $('#zoom').animate({
            top: zoom_close.attr('curTop') + 'px',
            left: zoom_close.attr('curLeft') + 'px',
            opacity: "hide",
            width: '1px',
            height: '1px'
        }, 200, null, function() {
            if (zoom_close.attr('scaleImg') == 'true') {
                zoom_content.html('');
            }
            unfixBackgroundsForIE();
            zooming = false;

            if (options.isVideo || options.isYoutube) {
                zoom_content.html('');
            }
        });
        return false;
    }

    function switchBackgroundImagesTo(to) {
        $('#zoom_table td').each(function(i) {
            var bg = $(this).css('background-image').replace(/\.(png|gif|none)\"\)$/, '.' + to + '")');
            $(this).css('background-image', bg);
        });
        //var close_img = zoom_close.children('img');
        //var new_img = close_img.attr('src').replace(/\.(png|gif|none)$/, '.' + to);
        //close_img.attr('src', new_img);
    }

    function fixBackgroundsForIE() {
        if ($.browser.msie && parseFloat($.browser.version) >= 7) {
            switchBackgroundImagesTo('gif');
        }
    }

    function unfixBackgroundsForIE() {
        if ($.browser.msie && $.browser.version >= 7) {
            switchBackgroundImagesTo('png');
        }
    }
}

jQuery.fn.fancyZoomOriginal = function(options) {

    var options = options || { width: 555 };
    var directory = options && options.directory ? options.directory : 'img/fancyzoom';
    var zooming = false;

    if ($("#popOverlay").length == 0) {
        var popHtml = '<div id="popOverlay">&nbsp;</div>';
        $("body").append(popHtml);
    };

    if ($('#zoom').length == 0) {
        var ext = $.browser.msie ? 'gif' : 'png';
        var html = '<div id="zoom" style="display:none; z-index: 12000"> \
                  <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
                    <tbody> \
                      <tr> \
                        <td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                        <td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \
                        <td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                      </tr> \
                      <tr> \
                        <td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden;" /> \
                        <td class="mm" style="background:#fff; vertical-align:top; padding:10px;" id="midmid"> \
                          <div id="zoom_content"> \
                          </div> \
                        </td> \
                        <td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y;  width:20px; overflow:hidden;" /> \
                      </tr> \
                      <tr> \
                        <td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                        <td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \
                        <td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                      </tr> \
                    </tbody> \
                  </table> \
                  <a href="#" title="Close" id="zoom_close" style="position:absolute; top:60px; right:30px; z-index:999;"> \
                    <img src="' + directory + '/close_fancyzoom.jpg" alt="Close" style="border:none; margin:0; padding:0;" /> \
                  </a> \
                </div>';

        $('form').append(html);

        $('#popOverlay').click(function(e) { if ($(e.target).parents('#zoom:visible').length == 0) hide(); });
        $(document).keyup(function(event) {
            if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
        });

        $('#zoom_close').click(hide);
    }

    var zoom = $('#zoom');
    var zoom_table = $('#zoom_table');
    var zoom_close = $('#zoom_close');
    var zoom_content = $('#zoom_content');
    var middle_row = $('td.ml,td.mm,td.mr');

    this.each(function(i) {
        $($(this).attr('href')).hide();
        $(this).click(show);
    });

    return this;

    function show(e) {
        // thumbnails div for this item.
        var thumbsHere = $($(this).attr('ref'));

        if (zooming) return false;
        zooming = true;
        var content_div = $("#" + $(this).attr('href').split('#')[1]);
        var zoom_width = options.width;
        var zoom_height = options.height;

        var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
        var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
        var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
        var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
        var window_size = { 'width': width, 'height': height, 'x': x, 'y': y }

        var width = (zoom_width || content_div.width()) + 60;
        var height = (zoom_height || content_div.height()) + 60;

        if (options.thumbs) {
            height = height + 60;
        }

        var d = window_size;

        // ensure that newTop is at least 0 so it doesn't hide close button
        var newTop = Math.max((d.height / 2) - (height / 2) + y, 0);
        var newLeft = (d.width / 2) - (width / 2);
        var curTop = e.pageY;
        var curLeft = e.pageX;

        zoom_close.attr('curTop', curTop);
        zoom_close.attr('curLeft', curLeft);
        zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');

        $('#zoom').hide().css({
            position: 'absolute',
            top: curTop + 'px',
            left: curLeft + 'px',
            width: '1px',
            height: '1px'
        });

        fixBackgroundsForIE();
        zoom_close.hide();

        if (options.closeOnClick) {
            $('#zoom').click(hide);
        }

        if (options.scaleImg) {
            zoom_content.html(content_div.html());
            $('#zoom_content img').css('width', '100%');
        } else {
            zoom_content.html('');
        }

        $("#popOverlay").toggle();
        if (options.scaleImg != true) {
            zoom_content.html(content_div.html());
        }
        $('#zoom').animate({
            top: newTop + 'px',
            left: newLeft + 'px',
            opacity: "show",
            width: width,
            height: height
        }, 300, null, function() {

            if (options.assignID) {
                $("#zoom_content img:first").attr("id", "mainImage");
            }


           

            unfixBackgroundsForIE();
            zoom_close.show();
            zooming = false;
        });
        

        return false;

    }

    function hide() {
        if (zooming) return false;
        zooming = true;
        $('#zoom').unbind('click');
        fixBackgroundsForIE();
        if (zoom_close.attr('scaleImg') != 'true') {
            zoom_content.html('');
        }
        zoom_close.hide();
        $("#popOverlay").toggle();
        $('#zoom').animate({
            top: zoom_close.attr('curTop') + 'px',
            left: zoom_close.attr('curLeft') + 'px',
            opacity: "hide",
            width: '1px',
            height: '1px'
        }, 200, null, function() {
            if (zoom_close.attr('scaleImg') == 'true') {
                zoom_content.html('');
            }
            unfixBackgroundsForIE();
            zooming = false;

        });
        return false;
    }

    function switchBackgroundImagesTo(to) {
        $('#zoom_table td').each(function(i) {
            var bg = $(this).css('background-image').replace(/\.(png|gif|none)\"\)$/, '.' + to + '")');
            $(this).css('background-image', bg);
        });
        //var close_img = zoom_close.children('img');
        //var new_img = close_img.attr('src').replace(/\.(png|gif|none)$/, '.' + to);
        //close_img.attr('src', new_img);
    }

    function fixBackgroundsForIE() {
        if ($.browser.msie && parseFloat($.browser.version) >= 7) {
            switchBackgroundImagesTo('gif');
        }
    }

    function unfixBackgroundsForIE() {
        if ($.browser.msie && $.browser.version >= 7) {
            switchBackgroundImagesTo('png');
        }
    }
}