$(document).ready(function(){
//    Set clicked image from List to big image
  $(".chameleonDragListObjectA").click(function(){ClickedListLink(this); return false;});
// zomm into the big image
  $(".chameleonDragZoomedOut").click(function(e){
    if ( $(this).hasClass("chameleonDragZoomedOut") ){ClickeDetailImageToZoom(this,"clickedfromimage",e);}return false;
  });
  $(".chameleonDragZoomIcon").click(function(e){
    var DetailImage=$(this).siblings("img.chameleonDragZRealZoomImage").eq(0);
    DetailImage = DetailImage[0];
    if ( $(DetailImage).hasClass("chameleonDragZoomedOut") ){ClickeDetailImageToZoom(DetailImage,"clickedfromzoomicon",e);
    }else{
      ClickedImageToZoomOut(DetailImage)
    }return false;
  });

});

function ClickedImageToZoomOut(ThisObject){
  BigImgUrl=$(ThisObject).attr("src");
  DetailImgUrl=$(ThisObject).parent().attr("href");
  $(ThisObject).parent().attr({href: BigImgUrl})
  $(ThisObject).attr({src: DetailImgUrl}).load(function(eventObject){
    afterimgrelaod(eventObject,"listclicked");
    $("img.chameleonDragZRealZoomImage").unbind('load');
  });

}

// Change big detail Image with the clicked detail image
function ClickedListLink(ThisObject){
  BigImgUrl=$(ThisObject).attr("href");
  TargetImgUrl=$("img.chameleonDragZRealZoomImage").attr("src");
  if(BigImgUrl != TargetImgUrl){
    $("img.chameleonDragZRealZoomImage").fadeOut(300,function(){
      $("img.chameleonDragZRealZoomImage").attr({src: BigImgUrl}).load(function(eventObject){
        afterimgrelaod(eventObject,"listclicked");
        $("img.chameleonDragZRealZoomImage").unbind('load');
      });
    });
    ZoomImgUrl=$(ThisObject).siblings(".hide").attr("href");
    $("a.chameleonDragZRealZoomImage").attr({href: ZoomImgUrl});
  }
}

//chaneg big detail image with the zoom image
function ClickeDetailImageToZoom(ThisObject,clickedfrom,Event){
  offset=$(".chameleonDragZoomBox").offset();
  outboxLeft=offset.left;
  outboxTop=offset.top;
  mouseXpos=(Event.pageX-outboxLeft)/$(".chameleonDragZoomBox").width();
  mouseYpos=(Event.pageY-outboxTop)/$(".chameleonDragZoomBox").height();
  var zoomBoxHeight=$(ThisObject).attr("height");
  $(".chameleonDragZoomBox").height(zoomBoxHeight);
  BigImgUrl=$(ThisObject).parent().attr("href");
  DetailImgUrl=$(ThisObject).attr("src");
  $(ThisObject).parent().attr({href: DetailImgUrl})
  $(ThisObject).parent().addClass("chameleonDragZoomedIn");
  $(ThisObject).parent().removeClass("chameleonDragZoomedOut");
  ThisObject.removeAttribute("height");
  ThisObject.removeAttribute("width");
  $(".chameleonDragZoomedOut").attr({src: BigImgUrl}).load(function(eventObject){
    afterimgrelaod(eventObject,clickedfrom,mouseXpos,mouseYpos);
    $("img.chameleonDragZRealZoomImage").unbind('load');
  });

}
//was called after detail image was loaded with a new source
function afterimgrelaod(eventObject,clicked,mouseXpos,mouseYpos){
  if(typeof mouseXpos == "undefined" ) mouseXpos =false;
  if(typeof mouseYpos == "undefined" ) mouseYpos =false;
  var jQuerObject = eventObject.target;
  if ( $(jQuerObject).hasClass("chameleonDragZoomedOut") && (clicked=="clickedfromimage" || clicked=="clickedfromzoomicon") ){
      $(jQuerObject).addClass("chameleonDragZoomedIn");
      $(jQuerObject).css("position","relative");
      $(jQuerObject).attr("id","draggable");
      $(".draggable").draggable({ containment: '#containment-wrapper', scroll: false });
      $(jQuerObject).removeClass("chameleonDragZoomedOut");
      imgheight = $(jQuerObject).height()*-1;
      imgwidth = $(jQuerObject).width()*-1;
      imgOuterContainerHeight = $(".chameleonDragOuterZoomBox").height();
      imgOuterContainerWidth = $(".chameleonDragOuterZoomBox").width();
      $(".chameleonDragZoomIcon").css({
        top:$(jQuerObject).height()-$(".chameleonDragZoomIcon").height(),
        left:$(jQuerObject).width()-$(".chameleonDragZoomIcon").width()
      });
      $(".chameleonDragZoomIcon").attr({src:"/static/images/icons/zoomout.gif"});
      containerwidth= imgwidth*-2;
      containerheight= imgheight*-2;
      $(".chameleonDragZoomBox").css({
        left:imgwidth+imgOuterContainerWidth,
        top:imgheight+imgOuterContainerHeight,
        height:containerheight-imgOuterContainerHeight,
        width:containerwidth-imgOuterContainerWidth
      });
      if(clicked=="clickedfromzoomicon"){
        imagetop=((imgheight*-1)/2)-(imgOuterContainerHeight/2);
        imageleft=((imgwidth*-1)/2)-(imgOuterContainerWidth/2);
      }else{
        if(mouseXpos && mouseYpos ){
          offset=$(".chameleonDragZoomBox").offset();
          outboxLeft=offset.left;
          outboxTop=offset.top;
          imageleft=((imgwidth+imgOuterContainerWidth)*-1)-((mouseXpos*(containerwidth-imgOuterContainerWidth))*(((imgwidth+imgOuterContainerWidth)*-1)/(containerwidth-imgOuterContainerWidth)));
          imagetop= ((imgheight+imgOuterContainerHeight)*-1)-((mouseYpos*(containerheight-imgOuterContainerHeight))*(((imgheight+imgOuterContainerHeight)*-1)/(containerheight-imgOuterContainerHeight)));
        }
      }
      $(jQuerObject).animate({
        top:imagetop,
        left:imageleft
      });
      zooma=$(".chameleonDragZoomedIn ");
      if(jQuery.browser.msie) {
    	  zooma.bind("mousedown",function(){zooma.css("cursor","url('/static/closedhand.cur')");});
          zooma.bind("mouseup",function(){zooma.css("cursor","url('/static/openhand.cur')");}); 
      }  
      if(jQuery.browser.firefox || jQuery.browser.mozilla) {
    	  zooma.bind("mousedown",function(){zooma.css("cursor","-moz-grabbing");});
          zooma.bind("mouseup",function(){zooma.css("cursor","-moz-grab");}); 
      }  


      
      $(function() {
        $("#draggable").draggable({
          containment: '.chameleonDragZoomBox',
          cursor: 'move'
        });
      });
  }else{
      $(jQuerObject).removeClass("chameleonDragZoomedIn");
      $(jQuerObject).addClass("chameleonDragZoomedOut");
      $("img.chameleonDragZRealZoomImage").removeAttr("style");
      $(".chameleonDragZoomIcon").attr({src:"/static/images/icons/zoom.gif"});
      $(".chameleonDragZoomIcon").removeAttr("style");
      $(".chameleonDragZoomBox").removeAttr("style");
      $("img.chameleonDragZRealZoomImage").fadeIn(1500);
  }
}




function GetAjaxCall(url, functionName) {
  url = url +'&'+esPHPSESSION;
  $.ajax({
     url: url,
     processData: false,
     dataType:  'json',
     success: functionName,
     type: 'POST'
   });
}


function ShowListItems(data,responseMessage) {

  var productsListParent = $('#key'+data.iListKey).parent();

  productsListParent.html(data.sItemPage);
   ScrolltoTopList();
}

function ScrolltoTopList(){
  var scrolldiv=document.getElementById('containerContentBody');
  offset=$("#searchBar").offset();
  outboxTop=offset.top;
  window.scrollTo(0, outboxTop);
}


function ReplaceItemForKey(data,responseMessage) {
  $("#"+data.iListKey).before( data.sItemPage).remove();
}


function activateTab(oTab, sLayer) {
  $(oTab).parent().children('li').not('.inactive').addClass('inactive').removeClass('expanded').children('a').addClass('inactive').removeClass('expanded');
  $(oTab).addClass('expanded').removeClass('inactive').children('a').addClass('expanded').removeClass('inactive');

  $('#' + sLayer).parent().children('div').hide();
  $('#' + sLayer).show();
}


function ShopOpenBookmarklet(sBookmarkingServiceURL,urlParam,titleParam) {
  var url = sBookmarkingServiceURL + urlParam + '=' + encodeURIComponent(document.location.href) + '&' + titleParam + '=' + encodeURIComponent(document.title);
  window.open(url, 'bookmarklet', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no');
  return false;
}