function initSlider()
{
        var scrollPane = $(".scrollPane"),
			 scrollContent = $("#projects"),
             contentWidth = 0,
             sleep = 0;

        //scrollContent width
        $(scrollContent).find('.item').each(function ()
        {
            //fade in item
            $(this).delay(sleep).fadeIn();
            sleep += 100;

            //add width
            contentWidth += $(this).outerWidth(true);
        });

        scrollContent.width(contentWidth);

        //scrollbar
        var winWidth = $(window).width();
        var maxProgress = scrollContent.width() - winWidth + 80;
        if (maxProgress < 0)
        {
            maxProgress = 0;
        }
        var sliderOpts = {
            max: maxProgress,
            slide: function (event, ui)
            {
                scrollContent.css("left", -ui.value + "px");
            }
        };

        var scrollbar = $(".scroll-bar").slider(sliderOpts);

        var handleHelper = scrollbar.find(".ui-slider-handle")
		.append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")
		.wrap("<div class='ui-handle-helper-parent'></div>").parent();

        if (contentWidth > scrollPane.width())
        {
            $(".scroll-bar-wrap").fadeIn();
        }

        //drag
        scrollContent.draggable({
            axis: 'x',
            start: function (event, ui)
            {
                endWidth = scrollbar.slider("option", "max") * -1;
            },
            drag: function (event, ui)
            {
                pos = ui.position.left;
                if (pos < 80)
                {
                    pos = pos * -1;
                    scrollbar.slider("option", "value", pos);
                    $('#ffgg').val(pos);
                }
            },
            stop: function (event, ui)
            {
                //start position
                if (ui.position.left > 0)
                {
                    $(ui.helper).animate({
                        left: 0
                    }, 'fast');
                }
                
                if (ui.position.left < endWidth)
                {
                    $(ui.helper).animate({
                        left: endWidth
                    }, 'fast');
                }
            }
        });

        //touch
        scrollContent.addTouch();
        $(".ui-slider-handle").addTouch();
               
		$(window).resize(function ()
		{
            //reset value
		    winWidth = $(window).width();
		    maxProgress = scrollContent.width() - winWidth + 80;
		    scrollbar.slider("option", "max", maxProgress);
		    scrollbar.slider("value", scrollbar.slider("value"));

		    //reflow Content
		    var showing = scrollContent.width() + parseInt(scrollContent.css("left"), 10);
		    var gap = scrollPane.width() - showing;
		    if (gap > 0)
		    {
		        scrollContent.css("left", parseInt(scrollContent.css("left"), 10) + gap);
		    }
		});
}

PORTFOLIO = {
    grid: function ()
    {
        var $container = $('#projects');

        $('#filters a').click(function ()
        {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });

            $('#filters a').removeClass('selected');
            $(this).addClass('selected');

            return false;
        });

        $container.imagesLoaded(function ()
        {
            $(this).isotope(
            {
                itemSelector: '.item',
                layoutMode: 'masonry',
                animationOptions: {
                    duration: 300,
                    easing: 'linear',
                    queue: false,
                    complete: function () { $(this).removeClass("youeIsAnimating"); },
                    step: function () { $(this).addClass("youeIsAnimating"); }
                },

                getSortData: {
                    random: function (elem) { return Math.random(); }
                }
            });



            var zoom = 1.1;
            $(".item").each(function ()
            {
                var oImgHeight = $(this).find('img').height();
                var oImgWidth = $(this).find('img').width();

                var nImgHeight = (oImgHeight + (oImgHeight * (1 - 1 / zoom)));
                var nImgWidth = (oImgWidth + (oImgWidth * (1 - 1 / zoom)));

                $(this).mouseenter(function ()
                {
                    $(this).not('.youeIsAnimating').find('img').stop().animate({
                        'height': nImgHeight + 'px',
                        'width': nImgWidth + 'px'
                    }, 210);

                    $(this).not('.youeIsAnimating').css('z-index', '10').animate({
                        'margin-left': ((oImgWidth - nImgWidth) / 2) + 'px',
                        'margin-top': ((oImgHeight - nImgHeight) / 2) + 'px'
                    }, 210);
                }); //mouseenter

                $(this).mouseleave(function ()
                {
                    $(this).not('.youeIsAnimating').find('img').stop().animate({
                        'height': oImgHeight + 'px',
                        'width': oImgWidth + 'px'
                    }, 150);

                    $(this).not('.youeIsAnimating').stop().animate({
                        'margin-left': '0px',
                        'margin-top': '0px'
                    }, 150);
                }); //mouseleave

            }); //each
        });

        setTimeout("$('#projects').isotope({ sortBy : 'random' });", 100);

        //        $.ajax(
        //        {
        //            type: "POST",
        //            url: "Services/Portfolio.asmx/getWorks" + '?' + Math.random() * Math.random(),
        //            cache: false,
        //            //data: "{'id': '" + id + "'}",
        //            contentType: "application/json; charset=utf-8",
        //            dataType: "json",
        //            success: function (msg)
        //            {
        //                var items = msg.d;

        //                var $items = $(items.join(''));

        //                $items.imagesLoaded(function ()
        //                {
        //                    $(".loading").hide().remove();
        //                    $container.isotope('insert', $items);
        //                    //setTimeout("$('#projects').isotope({ sortBy : 'random' });", 100);

        //                    //zoom
        //                    //
        //                    var zoom = 1.1;
        //                    $(".item").each(function ()
        //                    {
        //                        var oImgHeight = $(this).find('img').height();
        //                        var oImgWidth = $(this).find('img').width();

        //                        var nImgHeight = (oImgHeight + (oImgHeight * (1 - 1 / zoom)));
        //                        var nImgWidth = (oImgWidth + (oImgWidth * (1 - 1 / zoom)));

        //                        $(this).mouseenter(function ()
        //                        {
        //                            $(this).not('.youeIsAnimating').find('img').stop().animate({
        //                                'height': nImgHeight + 'px',
        //                                'width': nImgWidth + 'px'
        //                            }, 210);

        //                            $(this).not('.youeIsAnimating').css('z-index', '10').animate({
        //                                'margin-left': ((oImgWidth - nImgWidth) / 2) + 'px',
        //                                'margin-top': ((oImgHeight - nImgHeight) / 2) + 'px'
        //                            }, 210);
        //                        }); //mouseenter

        //                        $(this).mouseleave(function ()
        //                        {
        //                            $(this).not('.youeIsAnimating').find('img').stop().animate({
        //                                'height': oImgHeight + 'px',
        //                                'width': oImgWidth + 'px'
        //                            }, 150);

        //                            $(this).not('.youeIsAnimating').stop().animate({
        //                                'margin-left': '0px',
        //                                'margin-top': '0px'
        //                            }, 150);
        //                        }); //mouseleave

        //                    }); //each
        //                }); //imagesLoaded
        //            } //success
        //        }); //ajax
    },

    showElement: function ()
    {
        var scrollContent = $("#projects"),
            sleep = 0;

        scrollContent.find('.item').each(function ()
        {
            $(this).delay(sleep).fadeIn();
            sleep += 100;
        });

        $('.descOpen').fadeIn();
    }, //showElement

    scrollable: function ()
    {
        var scrollPane = $(".scrollPane"),
			 scrollContent = $("#projects"),
             scrollBar = $(".scroll-bar");
        contentWidth = 0,
             sleep = 0;

        //scrollbar
        var winWidth = $(window).width();
        var maxProgress = scrollContent.width() - winWidth + 80;
        if (maxProgress < 0)
        {
            maxProgress = 0;
        }
        var sliderOpts = {
            max: maxProgress,
            slide: function (event, ui)
            {
                scrollContent.css("left", -ui.value + "px");
            }
        };

        scrollBar.slider(sliderOpts);

        var handleHelper = scrollBar.find(".ui-slider-handle")
        		.append("<span class='ui-icon ui-icon-grip-dotted-vertical'>SCROLL</span>")
        		.wrap("<div class='ui-handle-helper-parent'></div>").parent();

        if (scrollContent.width() > scrollPane.width())
        {
            $(".scroll-bar-wrap").fadeIn();
        }


    }, //scrollbar

    draggable: function ()
    {
        var scrollContent = $("#projects"),
            scrollBar = $(".scroll-bar");

        scrollContent.draggable({
            axis: 'x',
            start: function (event, ui)
            {
                endWidth = scrollBar.slider("option", "max") * -1;
            },
            drag: function (event, ui)
            {
                pos = ui.position.left;
                if (pos < 80)
                {
                    pos = pos * -1;
                    scrollBar.slider("option", "value", pos);

                }
            },
            stop: function (event, ui)
            {
                //start position
                if (ui.position.left > 0)
                {
                    $(ui.helper).animate({
                        left: 0
                    }, 'fast');
                }

                if (ui.position.left < endWidth)
                {
                    $(ui.helper).animate({
                        left: endWidth
                    }, 'fast');
                }
            }
        });


    }, //draggable

    resizeScroll: function ()
    {
        var scrollPane = $(".scrollPane"),
            scrollContent = $("#projects"),
            scrollBar = $(".scroll-bar");

        $(window).resize(function ()
        {
            //reset value
            var winWidth = $(window).width();
            var maxProgress = scrollContent.width() - winWidth + 80;
            scrollBar.slider("option", "max", maxProgress);
            scrollBar.slider("value", scrollBar.slider("value"));

            //reflow Content
            var showing = scrollContent.width() + parseInt(scrollContent.css("left"), 10);
            var gap = scrollPane.width() - showing;
            if (gap > 0)
            {
                scrollContent.css("left", parseInt(scrollContent.css("left"), 10) + gap);
            }
        });
    }, //resizeScroll

    touch: function ()
    {
        $("#projects").addTouch();
        $(".ui-slider-handle").addTouch();
    }, //touch

    descBox: function ()
    {
        var box = $("#descBox");
        box.css("left", -box.width());

        $('.descClose a').click(function (event)
        {
            event.preventDefault();
            box.animate({ left: -box.width() }, 500);
        });

        $('.descOpen a').click(function (event)
        {
            event.preventDefault();
            box.animate({ left: 0 }, 500);
        });

    }, //descBox

    details: function ()
    {
        var scrollContent = $("#projects"),
            contentWidth = 0;

        scrollContent.find('.item').each(function ()
        {
            var $item = $(this);

            contentWidth += $item.outerWidth(true);
            $item.imagesLoaded(function ()
            {
                $item.fadeIn();
            });
        });

        scrollContent.width(contentWidth);

        $(".loading").hide().remove();

//        if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
//        {
//            $('<div></div>').addClass("scrollerLine").appendTo('.portfolio');
//        }
        
        this.scrollable();
        this.draggable();
        this.showElement();

        this.resizeScroll();
        this.touch();
    } //details
} //PORTFOLIO