(function($) {
    $.fn.cGallery = function(options) {
        var settings = {
            'galleryWidth': 1100,
            'galleryHeight': 600,
            'galleryBackgroundColor': '#000000',
            'slideShowSpeed': 3000,
            'transitionSpeed': 500,
            'imageBorderStyle': '5px solid #fff',
            'controlImagePath': '../images/',
            'autoplay': false
        };

        if (options) {
            var options = $.extend(settings, options);
            if (options.slideShowSpeed < options.transitionSpeed) {
                options.slideShowSpeed = (options.transitionSpeed + 1000);
            }
        }

        return this.each(function() {
            var newDate = new Date;
            var id = newDate.getTime();
            var nextimg;
            var currimg;
            var aryhist = new Array();
            var slideplaying = false;
            var autoplaytimeout;

            var obj = $(this);

            var htmlimgs = obj.html();

            obj.html('<div id="cgallery_pics' + id + '" style="position: relative;">' + htmlimgs + '</div>');

            $('#cgallery_pics' + id).hide();
            obj.append('<div id="cgallery_loadingbar' + id + '"><div style="float: left;">Loading Gallery...</div><div style="float: right;"><img src="../images/ajax-loader.gif" id="loading" /></div></div>');
            obj.css({ 'width': parseInt(options.galleryWidth), 'height': parseInt(options.galleryHeight), 'overflow': 'hidden', 'white-space': 'nowrap', 'background': options.galleryBackgroundColor });

            $('#cgallery_loadingbar' + id).dialog({
                modal: false,
                autoOpen: true,
                width: 400,
                minHeight: 20,
                height: 70,
                title: 'Loading Gallery...',
                resizable: false,
                open: function() {
                    $(".ui-dialog-titlebar").hide();
                },
                close: function() {
                }
            });

            $(window).load(function() {
                init();
                $('#cgallery_loadingbar' + id).dialog('close');
                if (options.autoplay) {
                    slideplaying = true;
                    setbtns();
                    showpause();
                    autoplaytimeout = setTimeout('$(\'#play\').click()', options.slideShowSpeed);
                }
            });

            init = function() {
                addnav();
                $('#cgallery_pics' + id).show();

                setbuttons();

                showplay();
                var cimg = centerimg();
                $('#cgallery_pics' + id).css('left', cimg);
                var imgs = $('.pic');
                currimg = 0;
                setclickableimage();
            }

            addnav = function() {
                $(document.createElement("img"))
                .attr({ id: 'play', src: options.controlImagePath + 'play.png', title: 'Play', width: '47', height: '38' })
                .css({ cursor: 'pointer' })
                .appendTo(obj)
                .click(function() {
                    slideplaying = true;
                    setbtns();
                    startslideshow();
                })
                $(document.createElement("img"))
                .attr({ id: 'pause', src: options.controlImagePath + 'pause.png', title: 'Pause', width: '47', height: '38' })
                .css({ cursor: 'pointer' })
                .appendTo(obj)
                .click(function() {
                    slideplaying = false;
                    setbtns();
                    clearInterval(interval);
                    clearTimeout(autoplaytimeout);
                    showplay();
                })
                $(document.createElement("img"))
                .attr({ id: 'next', src: options.controlImagePath + 'next.png', title: 'Next', width: '48', height: '38' })
                .css({ cursor: 'pointer' })
                .appendTo(obj)
                .click(function() {
                    if (!slideplaying) {
                        $('#pause').click()
                    }
                    clicknext();
                    setclickableimage();
                })
                $(document.createElement("img"))
                .attr({ id: 'previous', src: options.controlImagePath + 'previous.png', title: 'Previous', width: '48', height: '38' })
                .css({ cursor: 'pointer' })
                .appendTo(obj)
                .click(function() {
                    $('#pause').click()
                    clickprev();
                    setclickableimage();
                })
            }

            startslideshow = function() {
                playslide();
                interval = setInterval(playslide, options.slideShowSpeed);
                showpause();
            }

            setbuttons = function() {

                var gwidth = parseInt(obj.css('width').replace('px', ''));
                var gheight = parseInt(obj.css('height').replace('px', ''));

                var gposleft = obj.position().left;
                var gpostop = obj.position().top;
                var prevypos = (gheight / 2) + gpostop - ($('#prev').height() / 2);
                var prevxpos = gposleft;
                var nextypos = (gheight / 2) + gpostop - ($('#next').height() / 2);
                var nextxpos = (gposleft + gwidth) - $('#next').width();
                var playxpos = (gwidth / 2) + gposleft;
                var playypos = (gpostop + gheight) - $('#play').height();
                var loadingxpos = (gwidth / 2) + gposleft;
                var loadingypos = (gheight / 2) + gpostop - ($('#cgallery_loadingbar' + id).height() / 2);
                $('#next').css({ position: 'absolute', left: nextxpos, top: nextypos })
                $('#previous').css({ position: 'absolute', left: prevxpos, top: prevypos })
                $('#play').css({ position: 'absolute', left: playxpos, top: playypos })
                $('#pause').css({ position: 'absolute', left: playxpos, top: playypos })
            }

            $(window).resize(function() {
                setbuttons();
            });

            centerimg = function() {
                var imgs = $('.pic');
                var firstimg = imgs[0];
                var firstimgwidth = $(firstimg).attr('width');
                var firstimgpos = $(firstimg).position().left;

                var totalwidth = 0;
                var gcenter = (obj.css('width').replace('px', '') / 2);
                var imgs = $('.pic');

                //initilize the array
                aryhist = new Array(imgs.length);

                $(imgs).each(function() {
                    totalwidth += $(this).attr('width') + 20;
                    $(this).css({ opacity: 0.25 });
                    $(this).css({ border: options.imageBorderStyle });
                    $(this).css({ position: 'relative', 'margin-right': '20px' });
                });

                $('#cgallery_pics' + id).css('width', totalwidth);

                //center the first image
                nextimg = 1;
                $('#previous').css('display', 'none');
                var cimg = gcenter - ((firstimgwidth) / 2) + firstimgpos;
                aryhist[0] = cimg;
                $('.pic').eq(0).css({ opacity: 1 });
                return cimg
            }

            var interval;


            showplay = function() {
                $('#play').css('display', '');
                $('#pause').css('display', 'none');
            }

            showpause = function() {
                $('#play').css('display', 'none');
                $('#pause').css('display', '');
            }

            playslide = function() {
                var imgs = $('.pic');
                if (nextimg >= imgs.length) {
                    clearInterval(interval);
                    $('#cgallery_pics' + id).animate({
                        left: centerimg()
                    }, options.transitionSpeed, function() {
                        nextimg = 1;
                    });

                    showplay();
                }
                else {
                    $('#next').click();
                }
            }

            setbtns = function() {
                if (slideplaying) {
                    $('#previous').css('display', 'none');
                    $('#next').css('display', 'none');
                }
                else {
                    $('#next').css('display', '');
                    if (currimg > 0) {
                        $('#previous').css('display', '');
                    }
                    else {
                        $('#previous').css('display', 'none');
                    }
                }
            }

            setclickableimage = function() {
                /*var images = $('.pic');
                var currimage = images[currimg];
     
                var previmage;
                var nextimage;

                if (currimg > 0) {
                previmage = images[currimg - 1];
                }
                if (currimg < images.length - 1) {
                nextimage = images[currimg + 1];
                }

                alert(previmage);

                $(nextimage).css({ border: '3px solid green' });
                $(previmage).css({ border: '3px solid red' });
                $(currimage).css({ border: '3px solid white' });
                

                if (!slideplaying) {
                $(currimage).click(function() {

                    });

                    $(previmage).click(function() {
                alert('previmage');
                        
                });

                    $(nextimage).click(function() {
                alert('nextimage');
                        
                });
                }
                */
            }

            clicknext = function() {
                var imgs = $('.pic');
                if (nextimg < imgs.length) {
                    currimg += 1;

                    setbtns();

                    var img = imgs[nextimg];
                    var previmg = imgs[nextimg - 1];

                    var imgwidth = $(img).attr('width');
                    var gcenter = (obj.css('width').replace('px', '') / 2);
                    var imgpos = $(img).position().left;
                    var imgcenter = gcenter - ((imgwidth / 2) + imgpos);
                    aryhist[nextimg] = imgcenter;

                    $(this).attr('disabled', 'true');

                    $('#cgallery_pics' + id).animate({
                        left: imgcenter
                    }, options.transitionSpeed, function() {

                        if (nextimg < imgs.length) {
                            nextimg += 1;
                        }
                        $('#next').attr('disabled', '');

                        $(previmg).css({ opacity: 0.25 });

                        $(img).animate({
                            opacity: 1
                        }, 200, function() {
                        });

                    });
                }
                else {
                    $('#cgallery_pics' + id).animate({
                        left: centerimg()
                    }, options.transitionSpeed, function() {
                        nextimg = 1;
                        currimg = 0;
                    });
                }
            }

            clickprev = function() {
                if (nextimg - 2 >= 0) {
                    currimg -= 1;
                    var imgs = $('.pic');
                    var previmg = imgs[nextimg - 2];
                    var lastimg = imgs[nextimg - 1];
                    var loc = aryhist[nextimg - 2];
                    $(this).attr('disabled', 'true');
                    $('#cgallery_pics' + id).animate({
                        left: loc
                    }, options.transitionSpeed, function() {
                        if (nextimg > 0) {
                            nextimg -= 1;
                        }
                        $('#previous').attr('disabled', '');

                        $(lastimg).css({ opacity: 0.25 });

                        $(previmg).animate({
                            opacity: 1
                        }, 200, function() {
                        });
                    });
                }
                if (nextimg - 2 == 0) {
                    $('#previous').css('display', 'none');
                }
            }
        });

    };
})(jQuery)