/**
* Coin Slider - Unique jQuery Image Slider
* @version: 1.0 - (2010/04/04)
* @requires jQuery v1.2.2 or later 
* @author Ivan Lazarevic
* Examples and documentation at: http://workshop.rs/projects/coin-slider/
 
* Licensed under MIT licence:
*   http://www.opensource.org/licenses/mit-license.php
**/



(function ($) {



    var params = new Array;

    var order = new Array;

    var images = new Array;

    var links = new Array;

    var linksTarget = new Array;

    var titles = new Array;

    var interval = new Array;

    var imagePos = new Array;

    var appInterval = new Array;

    var squarePos = new Array;

    var reverse = new Array;



    $.fn.coinslider = $.fn.CoinSlider = function (options) {



        init = function (el) {



            order[el.id] = new Array(); // order of square appereance

            images[el.id] = new Array();

            links[el.id] = new Array();

            linksTarget[el.id] = new Array();

            titles[el.id] = new Array();

            imagePos[el.id] = 0;

            squarePos[el.id] = 0;

            reverse[el.id] = 1;



            params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);



            // create images, links and titles arrays

            $.each($('#' + el.id + ' img'), function (i, item) {

                images[el.id][i] = $(item).attr('src');

                links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : '';

                linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : '';

                titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : '';

                $(item).hide();

                $(item).next().hide();

                

            });





            // set panel

            $(el).css({

                'background-image': 'url(' + images[el.id][0] + ')',

                'width': params[el.id].width,

                'height': params[el.id].height,

                'position': 'relative',

                'background-position': 'top left'

            }).wrap("<div class='coin-slider' id='coin-slider-" + el.id + "' />");





            // create title bar

            $('#' + el.id).append("<div class='cs-title' id='cs-title-" + el.id + "' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");



            $.setFields(el);



            if (params[el.id].navigation)

                $.setNavigation(el);



            $.transition(el, 0);

            $.transitionCall(el);



        }



        // squares positions

        $.setFields = function (el) {



            tWidth = sWidth = parseInt(params[el.id].width / params[el.id].spw);

            tHeight = sHeight = parseInt(params[el.id].height / params[el.id].sph);



            counter = sLeft = sTop = 0;

            tgapx = gapx = params[el.id].width - params[el.id].spw * sWidth;

            tgapy = gapy = params[el.id].height - params[el.id].sph * sHeight;



            for (i = 1; i <= params[el.id].sph; i++) {

                gapx = tgapx;



                if (gapy > 0) {

                    gapy--;

                    sHeight = tHeight + 1;

                } else {

                    sHeight = tHeight;

                }



                for (j = 1; j <= params[el.id].spw; j++) {



                    if (gapx > 0) {

                        gapx--;

                        sWidth = tWidth + 1;

                    } else {

                        sWidth = tWidth;

                    }



                    order[el.id][counter] = i + '' + j;

                    counter++;



                    if (params[el.id].links)

                        $('#' + el.id).append("<a href='" + links[el.id][0] + "' class='cs-" + el.id + "' id='cs-" + el.id + i + j + "' style='width:" + sWidth + "px; height:" + sHeight + "px; float: left; position: absolute;'></a>");

                    else

                        $('#' + el.id).append("<div class='cs-" + el.id + "' id='cs-" + el.id + i + j + "' style='width:" + sWidth + "px; height:" + sHeight + "px; float: left; position: absolute;'></div>");



                    // positioning squares

                    $("#cs-" + el.id + i + j).css({

                        'background-position': -sLeft + 'px ' + (-sTop + 'px'),

                        'left': sLeft,

                        'top': sTop

                    });



                    sLeft += sWidth;

                }



                sTop += sHeight;

                sLeft = 0;



            }





            $('.cs-' + el.id).mouseover(function () {

                $('#cs-navigation-' + el.id).show();

            });



            $('.cs-' + el.id).mouseout(function () {

                $('#cs-navigation-' + el.id).hide();

            });



            $('#cs-title-' + el.id).mouseover(function () {

                $('#cs-navigation-' + el.id).show();

            });



            $('#cs-title-' + el.id).mouseout(function () {

                $('#cs-navigation-' + el.id).hide();

            });



            if (params[el.id].hoverPause) {

                $('.cs-' + el.id).mouseover(function () {

                    params[el.id].pause = true;

                });



                $('.cs-' + el.id).mouseout(function () {

                    params[el.id].pause = false;

                });



                $('#cs-title-' + el.id).mouseover(function () {

                    params[el.id].pause = true;

                });



                $('#cs-title-' + el.id).mouseout(function () {

                    params[el.id].pause = false;

                });

            }





        };





        $.transitionCall = function (el) {



            clearInterval(interval[el.id]);

            delay = params[el.id].delay + params[el.id].spw * params[el.id].sph * params[el.id].sDelay;

            interval[el.id] = setInterval(function () { $.transition(el) }, delay);



        }



        // transitions

        $.transition = function (el, direction) {



            if (params[el.id].pause == true) return;



            $.effect(el);



            squarePos[el.id] = 0;

            appInterval[el.id] = setInterval(function () { $.appereance(el, order[el.id][squarePos[el.id]]) }, params[el.id].sDelay);



            $(el).css({ 'background-image': 'url(' + images[el.id][imagePos[el.id]] + ')' });



            if (typeof (direction) == "undefined")

                imagePos[el.id]++;

            else

                if (direction == 'prev')

                    imagePos[el.id]--;

                else

                    imagePos[el.id] = direction;



            if (imagePos[el.id] == images[el.id].length) {

                imagePos[el.id] = 0;

            }



            if (imagePos[el.id] == -1) {

                imagePos[el.id] = images[el.id].length - 1;

            }



            $('.cs-button-' + el.id).removeClass('cs-active');

            $('#cs-button-' + el.id + "-" + (imagePos[el.id] + 1)).addClass('cs-active');



            if (titles[el.id][imagePos[el.id]]) {

                $('#cs-title-' + el.id).css({ 'opacity': 0 }).animate({ 'opacity': params[el.id].opacity }, params[el.id].titleSpeed);

                $('#cs-title-' + el.id).html(titles[el.id][imagePos[el.id]]);

            } else {

                $('#cs-title-' + el.id).css('opacity', 0);

            }



        };



        $.appereance = function (el, sid) {



            $('.cs-' + el.id).attr('href', links[el.id][imagePos[el.id]]).attr('target', linksTarget[el.id][imagePos[el.id]]);



            if (squarePos[el.id] == params[el.id].spw * params[el.id].sph) {

                clearInterval(appInterval[el.id]);

                return;

            }



            $('#cs-' + el.id + sid).css({ opacity: 0, 'background-image': 'url(' + images[el.id][imagePos[el.id]] + ')' });

            $('#cs-' + el.id + sid).animate({ opacity: 1 }, 300);

            squarePos[el.id]++;



        };



        // navigation

        $.setNavigation = function (el) {

            // create prev and next 

            $(el).append("<div id='cs-navigation-" + el.id + "'></div>");

            $('#cs-navigation-' + el.id).hide();



            $('#cs-navigation-' + el.id).append("<a href='#' id='cs-prev-" + el.id + "' class='cs-prev'></a>");

            $('#cs-navigation-' + el.id).append("<a href='#' id='cs-next-" + el.id + "' class='cs-next'></a>");

            $('#cs-prev-' + el.id).css({

                'position': 'absolute',

                'top': params[el.id].height / 2 - 15,

                'left': 0,

                'z-index': 1001,

                'line-height': '30px',

                'opacity': params[el.id].opacity

            }).click(function (e) {

                e.preventDefault();

                $.transition(el, 'prev');

                $.transitionCall(el);

            }).mouseover(function () { $('#cs-navigation-' + el.id).show() });



            $('#cs-next-' + el.id).css({

                'position': 'absolute',

                'top': params[el.id].height / 2 - 15,

                'right': 0,

                'z-index': 1001,

                'line-height': '30px',

                'opacity': params[el.id].opacity

            }).click(function (e) {

                e.preventDefault();

                $.transition(el);

                $.transitionCall(el);

            }).mouseover(function () { $('#cs-navigation-' + el.id).show() });



            // image buttons

            $("<div id='cs-buttons-" + el.id + "' class='cs-buttons'></div>").appendTo($('#coin-slider-' + el.id));





            for (k = 1; k < images[el.id].length + 1; k++) {

                $('#cs-buttons-' + el.id).append("<a href='#' class='cs-button-" + el.id + "' id='cs-button-" + el.id + "-" + k + "'>" + k + "</a>");

            }



            $.each($('.cs-button-' + el.id), function (i, item) {

                $(item).click(function (e) {

                    $('.cs-button-' + el.id).removeClass('cs-active');

                    $(this).addClass('cs-active');

                    e.preventDefault();

                    $.transition(el, i);

                    $.transitionCall(el);

                })

            });



            $('#cs-navigation-' + el.id + ' a').mouseout(function () {

                $('#cs-navigation-' + el.id).hide();

                params[el.id].pause = false;

            });



            $("#cs-buttons-" + el.id).css({

                'left': '50%',

                'margin-left': -images[el.id].length * 15 / 2 - 5,

                'position': 'relative'



            });





        }









        // effects

        $.effect = function (el) {



            effA = ['random', 'swirl', 'rain', 'straight'];

            if (params[el.id].effect == '')

                eff = effA[Math.floor(Math.random() * (effA.length))];

            else

                eff = params[el.id].effect;



            order[el.id] = new Array();



            if (eff == 'random') {

                counter = 0;

                for (i = 1; i <= params[el.id].sph; i++) {

                    for (j = 1; j <= params[el.id].spw; j++) {

                        order[el.id][counter] = i + '' + j;

                        counter++;

                    }

                }

                $.random(order[el.id]);

            }



            if (eff == 'rain') {

                $.rain(el);

            }



            if (eff == 'swirl')

                $.swirl(el);



            if (eff == 'straight')

                $.straight(el);



            reverse[el.id] *= -1;

            if (reverse[el.id] > 0) {

                order[el.id].reverse();

            }



        }





        // shuffle array function

        $.random = function (arr) {



            var i = arr.length;

            if (i == 0) return false;

            while (--i) {

                var j = Math.floor(Math.random() * (i + 1));

                var tempi = arr[i];

                var tempj = arr[j];

                arr[i] = tempj;

                arr[j] = tempi;

            }

        }



        //swirl effect by milos popovic

        $.swirl = function (el) {



            var n = params[el.id].sph;

            var m = params[el.id].spw;



            var x = 1;

            var y = 1;

            var going = 0;

            var num = 0;

            var c = 0;



            var dowhile = true;



            while (dowhile) {



                num = (going == 0 || going == 2) ? m : n;



                for (i = 1; i <= num; i++) {



                    order[el.id][c] = x + '' + y;

                    c++;



                    if (i != num) {

                        switch (going) {

                            case 0: y++; break;

                            case 1: x++; break;

                            case 2: y--; break;

                            case 3: x--; break;



                        }

                    }

                }



                going = (going + 1) % 4;



                switch (going) {

                    case 0: m--; y++; break;

                    case 1: n--; x++; break;

                    case 2: m--; y--; break;

                    case 3: n--; x--; break;

                }



                check = $.max(n, m) - $.min(n, m);

                if (m <= check && n <= check)

                    dowhile = false;



            }

        }



        // rain effect

        $.rain = function (el) {

            var n = params[el.id].sph;

            var m = params[el.id].spw;



            var c = 0;

            var to = to2 = from = 1;

            var dowhile = true;





            while (dowhile) {



                for (i = from; i <= to; i++) {

                    order[el.id][c] = i + '' + parseInt(to2 - i + 1);

                    c++;

                }



                to2++;



                if (to < n && to2 < m && n < m) {

                    to++;

                }



                if (to < n && n >= m) {

                    to++;

                }



                if (to2 > m) {

                    from++;

                }



                if (from > to) dowhile = false;



            }



        }



        // straight effect

        $.straight = function (el) {

            counter = 0;

            for (i = 1; i <= params[el.id].sph; i++) {

                for (j = 1; j <= params[el.id].spw; j++) {

                    order[el.id][counter] = i + '' + j;

                    counter++;

                }



            }

        }



        $.min = function (n, m) {

            if (n > m) return m;

            else return n;

        }



        $.max = function (n, m) {

            if (n < m) return m;

            else return n;

        }



        this.each(

		function () { init(this); }

	);





    };





    // default values

    $.fn.coinslider.defaults = {

        width: 660, // width of slider panel

        height: 234, // height of slider panel

        spw: 7, // squares per width

        sph: 5, // squares per height

        delay: 3000, // delay between images in ms

        sDelay: 30, // delay beetwen squares in ms

        opacity: 0.7, // opacity of title and navigation

        titleSpeed: 500, // speed of title appereance in ms

        effect: '', // random, swirl, rain, straight

        navigation: true, // prev next and buttons

        links: true, // show images as links 

        hoverPause: true // pause on hover		

    };



})(jQuery);