/* jQuery custom crop and preview 1.0 */

(function($){$.widget("ui.customCrop",{options:{imagePathName:'images/Kerala_houseboat.jpg',imageId:0,linkText:'Open Dialog',linkDisabledClass:'ui-state-disabled',title:'crop an image',postUrl:'http://localhost/',saveImage:'images/save.png',cancelImage:'images/cancel.png',customFieldName:'cu001',customFieldValue:'1111',dialogWidth:669,dialogHeight:470,dialogModal:true,dialogResizable:false,imageWidth:2000,lockSelectBoxDimension:[410,300],imageHeight:1500,cropBoxWidth:450,cropBoxHeight:400,cropAspectRatio:1,previewBoxWidth:100,previewBoxHeight:100,allowResize:false,allowSelect:false,setSelectBoxDimension:[0,0,410,310],minSelectWidth:400,minSelectHeight:300,alertMinImageResolution:'Banner image minimum selected resolution should be ',alertNoSelect:'Please select a crop region then press Save.',errorMessageAjaxSave:'Sorry, an error occurred while processing your request.'},_create:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;self._build();},_build:function()
{var $cropHTML='';var self=this,optionObj=self.options,elimentsObj=self.element;var outerDivWidth=optionObj.previewBoxWidth+10;var outerDivHeight=optionObj.previewBoxHeight+10;var $cropLink=$('<a>').attr('id','dialog'+optionObj.imageId+'_link').attr('href','#').attr('class',optionObj.linkDisabledClass).attr('title',optionObj.linkText).text(optionObj.linkText);$cropLink.appendTo(elimentsObj);var $dialogDiv=$('<div>').attr('id','dialog'+optionObj.imageId).attr('title',optionObj.title);var $cropBoxDiv=$('<div>').attr('id','dialogCropBoxOuter'+optionObj.imageId).attr('class','crop-box-div');var $cropDiv=$('<div>').attr('id','dialogCropBox'+optionObj.imageId).attr('class','preview-box-container');var $previewDiv=$('<div>').attr('id','dialog'+optionObj.imageId+'_previewdivbox').attr('class','preview-box');var $previewDivHead=$('<div>').attr('id','dialog'+optionObj.imageId+'_previewdivheading').attr('class','crop-heading').html('Crop Preview');var $image=$('<img>').attr('id','dialog'+optionObj.imageId+'_cropbox').attr('src',optionObj.imagePathName).attr('alt','image').attr('title','image');$cropDiv.append($image);var $prviewImage=$('<img>').attr('id','dialog'+optionObj.imageId+'_preview').attr('src',optionObj.imagePathName).attr('alt','preview').attr('title','preview');var $previewDivBox=$('<div>').attr('id','dialog'+optionObj.imageId+'_previewdiv').attr('style','overflow:hidden;width:'+optionObj.previewBoxWidth+'px;height:'+optionObj.previewBoxHeight+'px;');var $previewDivBoxOuter=$('<div>').attr('id','dialog'+optionObj.imageId+'_previewdivouter').attr('style','margin-top: 5px;padding: 10px 10px 10px 10px;background-color: #e1e1e1;width:'+outerDivWidth+'px;height:'+outerDivHeight+'px;');var $previewDivBoxBorder=$('<div>').attr('id','dialog'+optionObj.imageId+'_previewdivborder').attr('style','border: solid 1px #ccc;width: '+outerDivWidth+'px;height: '+outerDivHeight+'px;');$previewDiv.html('<p class="txt2"><b>See that area on the left with the dotted lines? That\'s the part of your image we\'ll show on the site.</b></p><p>&nbsp;</p><p class="txt2">You can change this "crop" though, to show more or less of your image. Try dragging it around or making it bigger and smaller by dragging the "handles" around the edges.</p><p>&nbsp;</p><p class="txt2">When you\'re happy, click "Save". Don\'t worry, you can change this again later.</p>');$cropBoxDiv.append($cropDiv).append($('<br/>')).append($previewDiv).append(self._buildForm())
$dialogDiv.append($cropBoxDiv);$dialogDiv.append(self._buildButtons());$cropHTML=$dialogDiv;$cropHTML.appendTo(elimentsObj);self._buildDialogBox();self._dialogLinkListener();self._saveHandler();self._cancelHandler();self._imgCropListener();},_buildForm:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;var $cropForm=$('<form>').attr('id','dialog'+optionObj.imageId+'_form').attr('name','dialog'+optionObj.imageId+'_form').attr('type','post').attr('action',optionObj.postUrl);$cropForm.append($('<input>').attr('id','dialog'+optionObj.imageId+'_x').attr('name','dialog'+optionObj.imageId+'_x').attr('type','hidden').attr('value',''));$cropForm.append($('<input>').attr('id','dialog'+optionObj.imageId+'_y').attr('name','dialog'+optionObj.imageId+'_y').attr('type','hidden').attr('value',''));$cropForm.append($('<input>').attr('id','dialog'+optionObj.imageId+'_w').attr('name','dialog'+optionObj.imageId+'_w').attr('type','hidden').attr('value',''));$cropForm.append($('<input>').attr('id','dialog'+optionObj.imageId+'_h').attr('name','dialog'+optionObj.imageId+'_h').attr('type','hidden').attr('value',''));$cropForm.append($('<input>').attr('id','imageId').attr('name','imageId').attr('type','hidden').attr('value',optionObj.imageId));$cropForm.append($('<input>').attr('id',optionObj.customFieldName).attr('name',optionObj.customFieldName).attr('type','hidden').attr('value',optionObj.customFieldValue));return $cropForm;},_buildButtons:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;var $buttonDiv=$('<div>').attr('id','dialog'+optionObj.imageId+'_button').attr('class','button-div');var $saveImage=$('<img>').attr('id','dialog'+optionObj.imageId+'_save').attr('src',optionObj.saveImage).attr('alt','save').attr('border','0').attr('class','image-save');var $cancelImage=$('<img>').attr('id','dialog'+optionObj.imageId+'_cancel').attr('src',optionObj.cancelImage).attr('alt','cancel').attr('border','0');$buttonDiv.append($saveImage).append($cancelImage);return $buttonDiv;},_saveHandler:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;$('#dialog'+optionObj.imageId+'_save').click(function(){if(parseInt($('#dialog'+optionObj.imageId+'_w').val()))
{var $inputs=$('#dialog'+optionObj.imageId+'_form :input');$.ajax({type:"POST",url:optionObj.postUrl,async:false,data:self._toJson($inputs),success:function(msg){var rTime=new Date().getTime();$('#image'+optionObj.imageId).find('img').not('#loading'+optionObj.imageId).attr('src',$('#image'+optionObj.imageId).find('img').not('#loading'+optionObj.imageId).attr('src')+rTime);$('#dialog'+optionObj.imageId).dialog("close");},error:function(){alert(optionObj.errorMessageAjaxSave);}});}
else
{alert(optionObj.alertNoSelect);}});},_cancelHandler:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;$('#dialog'+optionObj.imageId+'_cancel').click(function(){$('#dialog'+optionObj.imageId).dialog("close");});},_buildDialogBox:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;$('#dialog'+optionObj.imageId).dialog({autoOpen:false,width:optionObj.dialogWidth,height:optionObj.dialogHeight,modal:optionObj.dialogModal,resizable:optionObj.dialogResizable});$('#dialog'+optionObj.imageId).bind("dialogopen",function(event,ui){$('#dialog'+optionObj.imageId+'_cropbox').Jcrop({onChange:function(c){self._showPreview('#dialog'+optionObj.imageId+'_cropbox',c,optionObj);},onSelect:function(c){self._showPreview('#dialog'+optionObj.imageId+'_cropbox',c,optionObj);},aspectRatio:optionObj.cropAspectRatio,keySupport:false,allowResize:optionObj.allowResize,allowSelect:optionObj.allowSelect,setSelect:optionObj.setSelectBoxDimension,minSize:optionObj.lockSelectBoxDimension,boxWidth:optionObj.cropBoxWidth,boxHeight:optionObj.cropBoxHeight});});},_showPreview:function(objCrop,coords,objThis){var imgW=objThis.imageWidth;var imgH=objThis.imageHeight;var activePreviewArray=objCrop.split('_');activePreviewId=activePreviewArray[0]+'_preview';var dialogId=activePreviewArray[0];if(parseInt(coords.w)>0)
{var previewobj=this._calcuatePrviewBoxSize(coords.w,coords.h,objThis.previewBoxWidth,objThis.previewBoxHeight);jQuery(activePreviewArray[0]+'_previewdiv').css({width:previewobj.width+'px',height:previewobj.height+'px'});$(dialogId+'_x').val(coords.x);$(dialogId+'_y').val(coords.y);$(dialogId+'_w').val(coords.w);$(dialogId+'_h').val(coords.h);var rx=previewobj.width/coords.w;var ry=previewobj.height/coords.h;jQuery(activePreviewId).css({width:Math.round(rx*imgW)+'px',height:Math.round(ry*imgH)+'px',marginLeft:'-'+Math.round(rx*coords.x)+'px',marginTop:'-'+Math.round(ry*coords.y)+'px'});}
else
{$(dialogId+'_x').val('0');$(dialogId+'_y').val('0');$(dialogId+'_w').val('0');$(dialogId+'_h').val('0');jQuery(activePreviewArray[0]+'_previewdiv').css({width:'1px',height:'1px'});$(activePreviewArray[0]+'_sizeText').html('');}},_dialogLinkListener:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;$('#dialog'+optionObj.imageId+'_link').click(function(){if($('#dialog'+optionObj.imageId+'_link').hasClass(optionObj.linkDisabledClass)===false)
{$('#dialog'+optionObj.imageId).dialog('open');}
return false;});},_imgCropListener:function()
{var self=this,optionObj=self.options,elimentsObj=self.element;$('#dialog'+optionObj.imageId+'_cropbox').load(function(){$('#dialog'+optionObj.imageId+'_link').removeClass(optionObj.linkDisabledClass);}).each(function(){if(this.complete)$(this).load();});},_toJson:function(selector){var stringJson={};$.map($(selector),function(n,i)
{stringJson[n.name]=$(n).val();});return stringJson;},_calcuatePrviewBoxSize:function(selW,selH,reqW,reqH)
{var img=new Object();var width=selW;var height=selH;var newx=reqW;var newy=reqH;if(width>=height){var tmpy=height*newx/width;if(tmpy<=newy)
newy=tmpy;else
newx=width*newy/height;}
else{tmpx=width*newy/height;if(tmpx<=newx)
newx=tmpx;else
newy=height*newx/width;}
img.width=Math.round(newx);img.height=Math.round(newy);return img;},destroy:function(objId){$('#dialog'+objId).dialog("destroy");$('#dialog'+objId).remove();}});})(jQuery);