/*
* AccordionGallery.js version 1.0.0
* Copyright 2010, FLComponents
* licensed acording to purchased license
* Date: Fri Feb 2 16:24:00
*/

function FLCObject()                        // Define super class
{
}


FLCObject.prototype.Render = function (container, element)        // Define Method
{
    $(container).append(element.Definition);
}


//proto
function Element()                        // Define super class
{
    this.Definition = null;
}

Element.prototype.AddChild = function (element)        // Define Method
{
    this.Definition.append(element.Definition);
}

Element.prototype.AddAttributesWithValue = function (atr, value)        // Define Method
{
    this.Definition.attr(atr, value);
}

Element.prototype.AddText = function (value)        // Define Method
{
    this.Definition.text(value);
}

Element.prototype.AddHtml = function (value)        // Define Method
{
    this.Definition.html(value);
}


Element.prototype.AddInlineStyle = function (name, value)        // Define Method
{
    this.Definition.css(name, value);
}



//Define DIV Element
Div.prototype = new Element;
Div.prototype.constructor = Div;
function Div(Id) {
    this.Definition = $("<div></div>");
    if (Id != 'undefined');
    this.Definition.attr("Id", Id);
    //Element.call(this); // Call super-class constructor (if desired)
}


//Define UL element
Ul.prototype = new Element;
Ul.prototype.constructor = Ul;
function Ul(Id) {
    this.Definition = $("<ul></ul>");
    if (this.Id != 'undefined');
    this.Definition.attr("Id", this.Id);

}


Li.prototype = new Element;
Li.prototype.constructor = Li;
function Li(Id) {
    this.Definition = $("<li></li>");
    if (this.Id != 'undefined');
    this.Definition.attr("Id", this.Id);
}

Img.prototype = new Element;
Img.prototype.constructor = Img;
function Img(Id) {
    this.Definition = $("<Img></Img>");
    if (this.Id != 'undefined');
    this.Definition.attr("Id", this.Id);
}

A.prototype = new Element;
A.prototype.constructor = A;
function A(Id) {
    this.Definition = $("<a></a>");
    if (this.Id != 'undefined');
    this.Definition.attr("Id", this.Id);
}

(function ($) {
    $.fn.FLCAccordion = function (options) {
        var opts = $.extend({}, $.fn.FLCAccordion.defaults, options);
        var onLoadMessage = "Can not load configuration XML, please check the path.";
        var mainElem=this.selector;
 
        jQuery.extend(jQuery.easing,
            {
                //###### Animation definition #####
                //d - animation time
                //t - animation time in miliseconds (czas ktory uplynol)
                //x - current time in miliseconds divided by duration
                //c - is always 1
                //b - is always 0 
                easeOutBounce: function (x, t, b, c, d) {
                    if ((t /= d) < (1 / 2.75)) {
                        return c * (7.5625 * t * t) + b;
                    } else if (t < (2 / 2.75)) {
                        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                    } else if (t < (2.5 / 2.75)) {
                        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                    } else {
                        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                    }
                },

                easeInOutBounce: function (x, t, b, c, d) {
                    var s = 1.70158; var p = 0; var a = c;
                    if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
                    if (a < Math.abs(c)) { a = c; var s = p / 4; }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
                }
            })


        //Create Accordion object
        accordion = new Div("container");
        accordion.AddInlineStyle("position", "relative");
        ul = new Ul();
        accordion.AddChild(ul);

        //##### Load XML Configuration ####
        $.ajax({
            type: "GET",
            url: opts.assetsPath + "/data.xml",
            dataType: "xml",
            success: function (xml) {
                var i = 0;
                //var itemsNumber =5;
                var itemsNumber = $(xml).find('li').length;
                
                $(xml).find('li').each(function () {
                    var path = $(this).find('img').text();
                    var leftText = $(this).find('leftText').text();
                    var bottomText = $(this).find('bottomText').text();
                    var url = $(this).find('url').text();
                    var urlTarget = $(this).find('url').attr("target");

                    li = new Li();
                    ul.AddChild(li);

                    divTitle = new Div();
                    divTitle.AddAttributesWithValue("class", "title");
                    divTitle.AddHtml(leftText);
                    if(opts.showLeftText ==true)
                        li.AddChild(divTitle);

                    divItem = new Div();
                    divItem.AddAttributesWithValue("class", "item");
                    li.AddChild(divItem);


                    divBottomText = new Div();
                    divBottomText.AddAttributesWithValue("class", "bottom-text");
                    divBottomText.AddHtml(bottomText);
                    if(opts.showBottomText ==true) 
                        divItem.AddChild(divBottomText);

                    image = new Img();
                    image.AddAttributesWithValue("src", path);
                    if (url != "") {
                        var linkAccordion = new A();
                        linkAccordion.AddAttributesWithValue("href", url);
                        if (urlTarget != 'undefined' && urlTarget != '')
                            linkAccordion.AddAttributesWithValue("target", urlTarget);

                        divItem.AddChild(linkAccordion);
                        linkAccordion.AddChild(image);
                        //linkAccordion.
                    }
                    else {
                        divItem.AddChild(image);
                    }




                    if (i == itemsNumber - 1) {
                        li.AddAttributesWithValue("class", "last");
                        li.AddInlineStyle("border-right", "none");
                    }
                    i++;
                });
           
                CreateGallery(itemsNumber);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(onLoadMessage);
            }
        });

        

        var slideWidth = 0;
        var expandSlideWidth = 0;
        function CreateGallery(itemsNumber) {
            
            slideWidth = (opts.galleryWidth / itemsNumber) - 1;
            expandSlideWidth = (opts.galleryWidth - opts.pictureWidth) / (itemsNumber - 1) - 1
            
            var cssString = '<style type="text/css">'+mainElem+' .title{width:' + opts.galleryHeight + 'px;height:30px;background-color:' + opts.backgroundColor + ';-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);color:#fff;font-size:17px;text-align:center;vertical-align:middle;position:absolute;bottom:-30px;left:0;line-height:30px;font-family:Arial}</style> <!--[if IE]><style type="text/css"> .title {top:0;filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}</style><![endif]--> <style type="text/css"> '+mainElem+'{position:relative;width:' + opts.galleryWidth + 'px;height:' + opts.galleryHeight + 'px;background-color:#000;font-size:18px;overflow:hidden}'+mainElem+' ul{width:' + opts.galleryWidth + 'px;height:' + opts.galleryHeight + 'px;margin:0;padding:0}'+mainElem+' li{float:left;height:' + opts.galleryHeight + 'px;width:' + slideWidth + 'px;list-style:none;border-right:solid 1px ' + opts.borderColor + ';position:relative;overflow:hidden}'+mainElem+' li .item{height:' + opts.galleryHeight + 'px;width:' + opts.pictureWidth + 'px;position:absolute}'+mainElem+' li img{height:' + opts.galleryHeight + 'px;width:' + opts.pictureWidth + 'px; border-width:0;}.last{overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important}'+mainElem+' .bottom-text{background-color:#000;width:'+(opts.pictureWidth-20)+'px;padding:5px 10px 5px 10px; text-align:justify;font-family:Arial;color:#fff;font-weight:400;font-size:12px;position:absolute;bottom:-100px}</style>';
       
            $("head").append(cssString); 

            fl = new FLCObject();
            fl.Render(mainElem, accordion);
           
          
            //$(mainElem).append("<div style='position:absolute; top:10px; left:10px; font-family:Arial; font-size:11px;'><a style='color:white; text-decoration:none;' href='http://www.flcomponents.net'>flcomponents.net<a/></div>");
            //##### Aply the animations #####
            $(mainElem+' .item').fadeTo(0, opts.imagesOpacity, function () {
                // Animation complete.
            });

            $(mainElem+' .bottom-text').fadeTo(0, opts.bottomTextOpacity, function () {
                // Animation complete.
            });



            if(opts.eventType=='over')
            {
            $(mainElem+'  li').mouseenter(function () {
                var t = this;

                $(mainElem+'  li').animate({ width: expandSlideWidth }, { duration: opts.animationTime, queue: false, easing: "swing", complete: function () {
                    }
                });


                $(t).find(".bottom-text").animate({ bottom: 10 }, { duration: 1200, queue: false, easing: "easeInOutBounce" });
                $(t).animate({
                    width: opts.pictureWidth
                }, {
                    duration: opts.animationTime,
                    queue: false,
                    easing: "swing",
                    complete: function () {
                    }
                });
            });
            }

            if(opts.eventType=='click')
            {
            $(mainElem+'  li').click(function () {
                var t = this;

                $(mainElem+'  li').animate({ width: expandSlideWidth }, { duration: opts.animationTime, queue: false, easing: "swing", complete: function () {
                    }
                });


                $(t).find(".bottom-text").animate({ bottom: 10 }, { duration: 1200, queue: false, easing: "easeInOutBounce" });
                $(t).animate({
                    width: opts.pictureWidth
                }, {
                    duration: opts.animationTime,
                    queue: false,
                    easing: "swing",
                    complete: function () {
                    }
                });
            });
            }




            $(mainElem+'  .item').mouseenter(function () {
                var t = this;
                $(this).fadeTo(opts.animationTime, 1, function () {
                    $(t).clearQueue();
                });
            });

            $(mainElem+' ').mouseleave(function () {
                var t = this;
                $(mainElem+'  li').animate({ width: slideWidth }, { duration: opts.animationTime, queue: false, easing: "swing", complete: function () {

                }
                });

            })

            $(mainElem+'  .item').mouseleave(function () {
                var t = this;
                $(t).find(".bottom-text").animate({ bottom: -$(t).find(".bottom-text").height() - 15 }, { duration: 1200, queue: false, easing: "easeInOutBounce" });
                $(this).fadeTo(opts.animationTime, opts.imagesOpacity, function () {
                    $(t).clearQueue()
                });
            })
        }

    };


    $.fn.FLCAccordion.defaults = {
        galleryWidth: 600,
        galleryHeight: 400,
        pictureWidth: 300,
        backgroundColor: '#222',
        borderColor: '#9999aa',
        imagesOpacity: 0.5,
        bottomTextOpacity: 0.6,
        eventType:'over',
        showLeftText: true,
        showBottomText:true,
        animationTime:600,
        assetsPath: 'assets'
    };
})(jQuery);