/* 
Arquivo: loadEngine.js
Projeto: loadEngine a javascript plugin to load image the content after the page load.
Autor: Felipe Assunção 
Collaboration: Allan Bienemann / Vanessa Silva Jacome
Licença: Arquivo Publico
Descrição: Script responsável por substituir elementos <span> por <img>.
Data: 28/04/2011
*/

$(function () {

    // Incializando a regra javascript ( Plugin ).
    $.fn.loadEngine = function (options) {
        // Extendendo a variável responsável por alocar os dados de configuração do plugin.
        var options = $.extend({

            srcAttr: "title",
            altAttr: "class",
            widthAttr: "width",
            heightAttr: "height",
            classAttr: "rel",
            tempLoader: "images/loaderengine.gif",
            PluginInstance: $(this)

        }, options);

        // Percorrendo todos os items instanciados.
        $(this).each(function () {

            // Esconde o span caso seja necessario.
            $(this).hide();

            // Variável responsáveis por monstar o HTML das imagens.
            var imagewidth = ($(this).attr(options.widthAttr) != null) ? ' width="' + $(this).attr(options.widthAttr) + '" ' : '';
            var imageheight = ($(this).attr(options.heightAttr) != null) ? ' height="' + $(this).attr(options.heightAttr) + '" ' : '';
            var htmlsource = imagewidth + imageheight;

            // Adicionando o loader temporário no respectivo conteudo.
            $(this).after('<img class="loadEngineTemp" style="display: block; margin: 0 auto;" src="' + options.tempLoader + '" />');


        });

        // Apos o carregamento interino da página.
        $("body").ready(function () {
            // Inicializa a substituição das imagens.
            loadRealContent();

        });

        //Função responsável por carregar o conteúdo real.
        function loadRealContent() {

            // Percorrendo todos os items instanciados.
            $(options.PluginInstance).each(function () {

                // Variável responsáveis por monstar o HTML das imagens.
                var imagesrc = ($(this).attr(options.srcAttr) != null) ? ' src="' + $(this).attr(options.srcAttr) + '" ' : '';
                var imagealt = ($(this).attr(options.altAttr) != null) ? ' alt="' + $(this).attr(options.altAttr) + '" ' : '';
                var imagewidth = ($(this).attr(options.widthAttr) != null) ? ' width="' + $(this).attr(options.widthAttr) + '" ' : '';
                var imageheight = ($(this).attr(options.heightAttr) != null) ? ' height="' + $(this).attr(options.heightAttr) + '" ' : '';
                var imageclass = ($(this).attr(options.classAttr) != null) ? ' class="' + +" " + $(this).attr(options.classAttr) + '" ' : ' class="release" ';
                var htmlsource = imagesrc + imagealt + imagewidth + imageheight + imageclass;


                // Variável responsável por alocar a string a imagem a ser carregada e inseri-la na página.
                $(this).before('<img' + htmlsource + '/>');

                // Selecionando a imagem.
                var engineImageRelease = $(this).prev();

                // Escondendo a Imagem adicionada.
                $(engineImageRelease).hide();

                // Após o carregamento da imagem.
                $(engineImageRelease).load(function () {

                    // Removendo o loader.
                    $(this).next().slideUp("fast").remove();
                    // Exibindo a imagem original.
                    $(this).show();
                    // dando display block na imagem original;
                    $(this).css({ "display": "block" });
                    // Removendo o span utilizado para formar a imagem do DOM.
                    $(this).next().remove();

                });

                // Se o carregamento der erro.
                $(engineImageRelease).error(function () {

                    // Removendo o loader.
                    $(this).next().slideUp("fast").remove();
                    // Exibindo a imagem original.
                    $(this).show();
                    // dando display block na imagem original;
                    $(this).css({ "display": "block" });
                    // Removendo o span utilizado para formar a imagem do DOM.
                    $(this).next().remove();


                });


            });

        }

    }

    $(document).ready(function () {
        // Instanciando o Plugin
        $(".linkempreendimento span").loadEngine();
    });



});