﻿/**
 * Advertising - An message-advertising plugin for jQuery with transition effects.
 * @requires jQuery v1.4.4 or above
 *
 * Copyright (c) 2010 José Mª González
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 0.0.2
 */

/**
 * Creates a special sequence of text-images with a background-image and a band
 * which is placed over it (over the background image) in order to emphasize the
 * text-images. The transitions are can be defined through the settings of the
 * plugin.
 *
 * The HTML markup used to build the menu can be as simple as...
 *
 *  <div>
 *      <img alt="" class="imagen" src="<url of the background image>" />
 *      <img alt="" class="resaltado" src="<url of the band image>" />
 *      <img alt="" class="mensaje" src="<url of the text first image>" />
 *      <img alt="" class="mensaje" src="<url of the text second image>" />
 *  </div>
 *
 * Once you have included the style sheet, you will have to include a reference to
 * jquery library and to the Advertising (this) plugin.
 *
 * Use the following snippet to initialize the menu (example).
 *  
 *  $(".mensaje").advertising({
 *      width: 170,
 *      backEffect: "clip",
 *      backTime: 2000,
 *      messageEffectIn: "pulsate",
 *      messageEffectOut: "fade"
 *  });
 *
 * Theses are all available options:
 *  backEffect:         disappearing band effect
 *  backTime:           time the band takes to disappear
 *  backMessageTime:    time from the band is visible to the appearing of the first message (and inverse)
 *  messageMessageTime: time between messages
 *  startDelayTime:     time to the begining of the first cycle
 *  cycleDelayTime:     time between cycles
 *  messageTime:        time the messages remains visible
 *  messageEffectIn:    appearing message effect
 *  messageTimeIn:      time it takes the (effect) message to appear
 *  messageEffectOut:   disappearing message effect
 *  messageTimeOut:     time it takes the (effect) message to disappear
 *  width:              with of the parent div
 *
 * Thats it. Now you should have a working advertising zone.
 */

(function() {
    $.fn.advertising = function(instanceSettings) {

        var messages = this; var i;

        $.fn.advertising.defaultSettings = {
            backEffect: "drop",         // efecto de (des)aparición del fondo
            backTime: 1000,             // tiempo que tarda el fondo en (des)aparecer
            backMessageTime: 700,       // tiempo desde que el fondo es visible hasta la aparición del primer mensaje (y viceversa)
            messageMessageTime: 500,    // tiempo de pausa entre mensajes
            startDelayTime: 2000,       // tiempo hasta el comienzo del primer ciclo
            cycleDelayTime: 2500,       // tiempo entre ciclos
            messageTime: 2000,          // tiempo que el mensaje permanece visible
            messageEffectIn: "drop",    // efecto de aparición del mensaje
            messageTimeIn: 1500,        // tiempo del efecto de aparición del mensaje
            messageEffectOut: "drop",   // efecto de desaparición del mensaje
            messageTimeOut: 1500,       // tiempo del efecto de desaparición del mensaje
            width: 100                  // ancho de la capa que muestra el anuncio
        };

        var settings = $.extend({}, $.fn.advertising.defaultSettings, instanceSettings || {});

        // IE (.png) hack
        settings.backEffect = $.browser.msie && settings.backEffect == "drop" ? "slide" : settings.backEffect;
        settings.messageEffectIn = $.browser.msie && settings.backEffect == "drop" ? "slide" : settings.messageEffectIn;
        settings.messageEffectOut = $.browser.msie && settings.backEffect == "drop" ? "slide" : settings.messageEffectOut;

        var start = function() {
            setTimeout(function() {
                i = 0;
                $(".resaltado").show(
                    settings.backEffect,
                    { distance: settings.width },
                    settings.backTime,
                    function() { setTimeout(all, settings.backMessageTime); });
            }, settings.cycleDelayTime);
        };

        var end = function() {
            setTimeout(function() {
                $(".resaltado").hide(
                    settings.backEffect,
                    { distance: settings.width },
                    settings.backTime,
                    start);
            }, settings.backMessageTime);
        };

        var one = function(message) {
            message.show(
                settings.messageEffectIn,
                { direction: "left", distance: settings.width }, // por defecto se mueve de izquierda a derecha
                settings.messageTimeIn,
                function() {
                    setTimeout(function() {
                        message.hide(
                        settings.messageEffectOut,
                        { direction: "right", distance: settings.width }, // por defecto se mueve de izquierda a derecha
                        settings.messageTimeOut,
                        function() { setTimeout(all, settings.messageMessageTime); });
                    }, settings.messageTime);
                });
        };

        var all = function() {
            messages.length == i ? end() : one(messages.eq(i++));
        };

        setTimeout(start, settings.startDelayTime); return this;
    };
})();
