$(function(){
    $('.wide').columnize({
        width : 430,
        height : 230
    });

    if($(".wide").width()>860){
        $("#leftbutton").css('display', 'inline');
        $("#rightbutton").css('display', 'inline');
        $("#rightbutton").css("background-image", "url(/css/img/point-right-red.png)");
    }

    $("#leftbutton").click(function(){
    var deleft=parseInt($(".wide").css('left').replace('px',''));
    if (deleft<0){
      $(".wide").animate({"left": "+=430px"}, "fast"

                                  ,function() {

                                                    var left=parseInt($(".wide").css('left').replace('px',''));

                                                    //alert(left);

                                                    if(left==0){
                                                        $("#leftbutton").css("background-image", "url(/css/img/point-left-blue.png)");
                                                        $("#rightbutton").css("background-image", "url(/css/img/point-right-red.png)");
                                                    }
                                                    if($(".wide").width()>left+430){
                                                        $("#rightbutton").css("background-image", "url(/css/img/point-right-red.png)");
                                                    }

                                                }
                            );
        }
   });

    $("#rightbutton").click(function(){
    var deleft=Math.abs(parseInt($(".wide").css('left').replace('px','')));

    //alert($(".wide").width());
    //alert(($(".wide").css('left')));

    if($(".wide").width()>deleft+860 || $(".wide").css('left')=='auto'){
      $(".wide").animate({"left": "-=430px"}, "fast"
                            ,function() {
                                                var left=parseInt($(".wide").css('left').replace('px',''));

                                                //alert($(".wide").width());
                                                //alert(left);
                                                //alert(Math.abs(left-860));


                                                if(left<0){
                                                    $("#leftbutton").css("background-image", "url(/css/img/point-left-red.png)");
                                                    $("#rightbutton").css("background-image", "url(/css/img/point-right-red.png)");
                                                }

                                                if($(".wide").width()<=Math.abs(left-860)){
                                                    $("#rightbutton").css("background-image", "url(/css/img/point-right-blue.png)");
                                                }

                                            }
                    );
        }
    });
});