// JavaScript Document
$(document).ready(function() {

    var thumb = new Array();
    var bigImg = new Array();
    var l = new Array();
    var g = new Array();
    var d = new Array();
    var redir = new Array();
    var imShow = new Array();
    var buyBtn = new Array();

    var tImg;
    var bImg;
    var label;
    var gen;
    var dir;
    var rdir;
    var boolean;
    var btnOn;

    var n = 0;
    var id = 0;
    var timer;


    $.ajax({
        url: "xml/gallery.xml",
        dataType: "xml",
        success: function(myXML) {

            $(myXML).find("image").each(function() {
                tImg = $(this).attr('thumb')
                thumb.push(tImg);
                n = thumb.length;

                bImg = $(this).attr('big')
                bigImg.push(bImg);


                label = $(this).attr('label')
                l.push(label);

                gen = $(this).attr('genre')
                g.push(gen);

                dir = $(this).attr('director')
                d.push(dir);

                rdir = $(this).attr('link')
                redir.push(rdir);

                boolean = $(this).attr('bigImg')
                imShow.push(boolean)


                btnOn = $(this).attr('buyBtn')
                buyBtn.push(btnOn)


            })

            imageGallery()

        }, error: function() {
            alert('Images not found'); $("#loadImg").removeClass("loader")
        }
    });


    function imageGallery() {
        $('<ul id="portfolio"></ul>').appendTo('#wrapper');
        for (var i = 0; i < n; i++) {
            $('<li class="loading" name=' + i + '></li>').appendTo('#portfolio');
        }

        addThumb();
        loadBig();

        $("ul#portfolio li").css({ "border": "1px solid #ccc", "cursor": "pointer" })
        $("ul#portfolio li:first").css({ "border": "1px solid red", "cursor": "default" })

    }


    function addThumb() {
        $("ul#portfolio li").each(function(index, el) {
            var img = new Image();
            $(img).load(function() {
                $(this).css('display', 'none');
                $(el).removeClass('loading').append(this);
                $(this).fadeIn(1000);
            }).error(function() {
                $(el).remove();
            }).attr('src', thumb[index]).bind('click', function() {

                id = $(this).parent().attr("name")
                fId = $("ul#portfolio li").index($(this).parent())

                loadBig()
                imgClick()

                $("ul#portfolio li").css({ "border": "1px solid #ccc", "cursor": "pointer" })
                $(this).parent().css({ "border": "1px solid red", "cursor": "default" })


            });
        });


    }


    function imgClick() {

        var pos = $("ul#portfolio li:eq(" + fId + ")").position().left;

        for (var f = 0; f < fId; f++) {
            var ns = $("ul#portfolio li:eq(" + f + ")").children("img").attr("src")
            var no = $("ul#portfolio li:eq(" + f + ")").attr("name")
            //var st = $("ul#portfolio li:eq("+f+")").attr("style")

            //$('<li class="loading" name="'+no+'" style="'+st+'"></li>').appendTo('#portfolio');

            $('<li class="loading" name="' + no + '"></li>').appendTo('#portfolio');
            var lis = $("ul#portfolio li:last")
            var bimg = new Image()
            $(bimg).attr('src', ns);
            $(bimg).appendTo(lis).bind('click', function() {

                id = $(this).parent().attr("name")
                fId = $("ul#portfolio li").index($(this).parent())

                loadBig()
                imgClick()

                $("ul#portfolio li").css({ "border": "1px solid #ccc", "cursor": "pointer" })
                $(this).parent().css({ "border": "1px solid red", "cursor": "default" })


            });
        }

        $("ul#portfolio").animate({ "left": -pos }, 1000, function() {
            for (var f = 0; f < fId; f++) {
                $("ul#portfolio li:eq(0)").remove();
                $("ul#portfolio").css({ "left": 0 });
            }
        })





    }




    function loadBig() {

        $("#loadImg").addClass("loader");
        $("#next").unbind('click');
        $("#prev").unbind('click');
        $("ul#portfolio").children("li").children("img").unbind('click')
        clearInterval(timer)

        $("#show").each(function() {

            var bimg = new Image();

            $(bimg).load(function() {
                $(this).css({ 'display': 'none' });
                $("#show").prepend(this);
                $("#loadImg").removeClass("loader")
                $("#show img:eq(1)").fadeOut(1000)
                $("#show img:eq(0)").fadeIn(1000, function() {
                    $("#show img:eq(1)").remove();
                    $("#next").bind('click', nextImg);
                    $("#prev").bind('click', prevImg);
                    timer = setInterval(imgChange, 5000)
                    $("ul#portfolio").children("li").children("img").bind('click', function() {
                        id = $(this).parent().attr("name")
                        fId = $("ul#portfolio li").index($(this).parent())

                        loadBig()
                        imgClick()
                        $("ul#portfolio li").css({ "border": "1px solid #ccc", "cursor": "pointer" })
                        $(this).parent().css({ "border": "1px solid red", "cursor": "default" })
                    });

                })


                if (imShow[id] == "true") {
                    $(".rightBan").animate({ "right": -210 }, 2000, function() {
                        $("#movie").html(l[id])
                        $("#gen").html(g[id])
                        $("#dir").html(d[id])
                        $("#linkD").attr("href", redir[id])
                    })
                }
                else {
                    $(".rightBan").animate({ "right": 0 }, 2000)
                    $("#movie").html(l[id])
                    $("#gen").html(g[id])
                    $("#dir").html(d[id])
                    $("#linkD").attr("href", redir[id])
                }



                if (buyBtn[id] == "false") {
                    $("#linkD").parent("p").fadeOut(500)
                }
                else {
                    $("#linkD").parent("p").fadeIn(500)
                }


            }).error(function() {


                timer = setInterval(imgChange, 5000);


            }).attr('src', bigImg[id]);
        })


    }




    //timer = setInterval(imgChange,5000)

    function imgChange() {
        //id++;
        $("ul#portfolio li").css({ "border": "1px solid #ccc", "cursor": "pointer" })
        $("ul#portfolio li:eq(1)").css({ "border": "1px solid red", "cursor": "default" })

        nextImg()

        loadBig()

    }

    function nextImg() {
        id = $("ul#portfolio li:eq(1)").attr("name");

        var pos = $("ul#portfolio li:eq(1)").position().left;
        var ns = $("ul#portfolio li:eq(0)").children("img").attr("src")
        var no = $("ul#portfolio li:eq(0)").attr("name")
        var st = $("ul#portfolio li:eq(0)").attr("style")

        $('<li class="loading" name="' + no + '" style="' + st + '"></li>').appendTo('#portfolio');

        var bimg = new Image();
        $(bimg).load(function() {
            $(this).css({ 'display': 'none' });
            $("ul#portfolio li:last").append(this);
            $(".loading").removeClass("loading")
            $(this).fadeIn(1000);
        }).attr('src', ns)/*.bind('click',function(){
											id = $(this).parent().attr("name")
											loadBig()
											$("ul#portfolio li").css({"border":"1px solid #ccc","cursor":"pointer"})
											$(this).parent().css({"border":"1px solid red","cursor":"default"})
											});*/


        $("#next").unbind('click');

        $("ul#portfolio").animate({ "left": -pos }, 800, function() {
            $("ul#portfolio li:eq(0)").remove();
            $("ul#portfolio").css({ "left": 0 });
            $("#next").bind('click', nextImg)
        })


        //loadBig();
        return false;
    }




    function prevImg() {
        id = $("ul#portfolio li:last").attr("name");

        var pos = $("ul#portfolio li:eq(1)").position().left;
        var ns = $("ul#portfolio li:last").children("img").attr("src")
        var no = $("ul#portfolio li:last").attr("name")
        var st = $("ul#portfolio li:last").attr("style")

        $('<li class="loading" name="' + no + '" style="' + st + '"></li>').prependTo('#portfolio');


        var bimg = new Image();
        $(bimg).load(function() {
            $(this).css({ 'display': 'none' });
            $("ul#portfolio li:first").append(this);
            $(".loading").removeClass("loading")
            $(this).fadeIn(0);
        }).attr('src', ns)/*.bind('click',function(){
											id = $(this).parent().attr("name")
											loadBig()
											$("ul#portfolio li").css({"border":"1px solid #ccc","cursor":"pointer"})
											$(this).parent().css({"border":"1px solid red","cursor":"default"})
											});*/


        $("#prev").unbind('click');
        $("ul#portfolio").css({ "left": -pos });

        $("ul#portfolio").animate({ "left": 0 }, 800, function() {
            $("ul#portfolio li:last").remove();
            $("#prev").bind('click', prevImg)
        })


        //loadBig();
        return false;
    }

    $("#next").bind('click', nextImg)
    $("#prev").bind('click', prevImg)

})